Webgui-new language service

Author: Barnabás Domozi

webgui-new/package-lock.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@codemirror/lang-cpp": "^6.0.2",
+    "@codemirror/lang-python": "^6.1.6",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",

webgui-new/package.json

@@ -1,10 +1,11 @@
-import ReactCodeMirror, { Decoration, EditorView, ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import ReactCodeMirror, { Decoration, EditorView, Extension, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { AccordionLabel } from 'enums/accordion-enum';
 import { ThemeContext } from 'global-context/theme-context';
 import React, { useContext, useRef, useState, useEffect, MouseEvent } from 'react';
-import { getCppAstNodeInfoByPosition, getCppReferenceTypes, getCppReferences } from 'service/cpp-service';
+import { createClient, getAstNodeInfoByPosition, getReferenceTypes, getReferences } from 'service/language-service';
 import { AstNodeInfo, FileInfo, Position, Range } from '@thrift-generated';
 import { cpp } from '@codemirror/lang-cpp';
+import { python } from '@codemirror/lang-python';
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
 import { EditorContextMenu } from 'components/editor-context-menu/editor-context-menu';
 import { FileName } from 'components/file-name/file-name';
@@ -75,6 +76,8 @@ export const CodeMirrorEditor = (): JSX.Element => {
   useEffect(() => {
     if(!editorRef.current || !editorRef.current.view) return;
     setHighlightRanges([]);
+
+    createClient(appCtx.workspaceId, fileInfo?.type);
   }, [appCtx.workspaceId, fileInfo, fileContent])
 
   const createHighlightDecoration = (view: EditorView, highlightPosition: HighlightPosition, highlightColor: string) => {
@@ -100,10 +103,23 @@ export const CodeMirrorEditor = (): JSX.Element => {
     return Decoration.set(decorations, true);
   })}
 
+  const languageExtension = (fileType?: string) =>
+  {
+    switch(fileType)
+    {
+      case "CPP":
+        return cpp();
+      case "PY":
+        return python();
+      default:
+        return null;
+    }
+  }
+
   const updateHighlights = async (astNode : AstNodeInfo) => {
-    const refTypes = await getCppReferenceTypes(astNode.id as string)
+    const refTypes = await getReferenceTypes(astNode.id as string)
     if(visitedLastAstNode?.id !== astNode.id){
-      const allReferences = await getCppReferences(astNode.id as string, refTypes.get('Usage') as number, []);
+      const allReferences = await getReferences(astNode.id as string, refTypes.get('Usage') as number, []);
       const referencesInFile = allReferences.filter(ref => ref.range?.file === fileInfo?.id);
       setHighlightRanges(referencesInFile.map(nodeInfo => {
         const startpos = nodeInfo?.range?.range?.startpos as { line: number, column: number };
@@ -174,7 +190,8 @@ export const CodeMirrorEditor = (): JSX.Element => {
     const astNodeInfo =
       fileInfo?.type === 'Unknown'
         ? null
-        : await getCppAstNodeInfoByPosition(fileInfo?.id as string, line.number, column);
+        : await getAstNodeInfoByPosition(fileInfo?.id as string, line.number, column);
+
     if (astNodeInfo) {
       sendGAEvent({
         event_action: 'click_on_word',
@@ -318,7 +335,7 @@ export const CodeMirrorEditor = (): JSX.Element => {
         </SC.GitBlameContainer>
         <ReactCodeMirror
           readOnly={true}
-          extensions={[cpp(), highlightExtension()]}
+          extensions={[languageExtension(fileInfo?.type), highlightExtension()].filter(e => e) as Extension[]}
           theme={theme === 'dark' ? githubDark : githubLight}
           basicSetup={{
             syntaxHighlighting: false,

webgui-new/src/components/codemirror-editor/codemirror-editor.tsx

@@ -3,12 +3,13 @@ import { IconButton, Menu, MenuItem, Modal, Tooltip } from '@mui/material';
 import { ChevronRight, Close } from '@mui/icons-material';
 import { TabName } from 'enums/tab-enum';
 import {
-  getCppAstNodeInfo,
-  getCppDiagramTypes,
-  getCppDocumentation,
-  getCppReferenceTypes,
-  getCppReferences,
-} from 'service/cpp-service';
+  createClient,
+  getAstNodeInfo,
+  getDiagramTypes,
+  getDocumentation,
+  getReferenceTypes,
+  getReferences,
+} from 'service/language-service';
 import { getAsHTMLForNode } from 'service/cpp-reparse-service';
 import { AstNodeInfo, Range } from '@thrift-generated';
 import { convertSelectionRangeToString } from 'utils/utils';
@@ -52,10 +53,13 @@ export const EditorContextMenu = ({
   useEffect(() => {
     if (!appCtx.languageNodeId) return;
     const init = async () => {
-      const initAstNodeInfo = await getCppAstNodeInfo(appCtx.languageNodeId);
+      const fileInfo = await getFileInfo(appCtx.projectFileId);
+      createClient(appCtx.workspaceId, fileInfo?.type);
+
+      const initAstNodeInfo = await getAstNodeInfo(appCtx.languageNodeId);
       setAstNodeInfo(initAstNodeInfo);
 
-      const initDiagramTypes = await getCppDiagramTypes(appCtx.languageNodeId);
+      const initDiagramTypes = await getDiagramTypes(appCtx.languageNodeId);
       setDiagramTypes(initDiagramTypes);
     };
     init();
@@ -69,7 +73,7 @@ export const EditorContextMenu = ({
   };
 
   const getDocs = async () => {
-    const initDocs = await getCppDocumentation(astNodeInfo?.id as string);
+    const initDocs = await getDocumentation(astNodeInfo?.id as string);
     const fileInfo = await getFileInfo(appCtx.projectFileId as string);
     const parser = new DOMParser();
     const parsedHTML = parser.parseFromString(initDocs, 'text/html');
@@ -115,8 +119,8 @@ export const EditorContextMenu = ({
   const jumpToDef = async () => {
     if (!astNodeInfo) return;
 
-    const refTypes = await getCppReferenceTypes(astNodeInfo.id as string);
-    const defRefs = await getCppReferences(
+    const refTypes = await getReferenceTypes(astNodeInfo.id as string);
+    const defRefs = await getReferences(
       astNodeInfo.id as string,
       refTypes.get('Definition') as number,
       astNodeInfo.tags ?? []

webgui-new/src/components/editor-context-menu/editor-context-menu.tsx

@@ -3,12 +3,13 @@ import { Code } from '@mui/icons-material';
 import { ExpandMore, ChevronRight } from '@mui/icons-material';
 import React, { SyntheticEvent, useContext, useEffect, useState } from 'react';
 import {
-  getCppReferenceTypes,
-  getCppReferences,
-  getCppProperties,
-  getCppReferenceCount,
-  getCppAstNodeInfo,
-} from 'service/cpp-service';
+  createClient,
+  getReferenceTypes,
+  getReferences,
+  getProperties,
+  getReferenceCount,
+  getAstNodeInfo,
+} from 'service/language-service';
 import { AstNodeInfo, FileInfo, Range } from '@thrift-generated';
 import { FileIcon, RefIcon } from 'components/custom-icon/custom-icon';
 import { TabName } from 'enums/tab-enum';
@@ -39,20 +40,23 @@ export const InfoTree = (): JSX.Element => {
     if (!appCtx.languageNodeId) return;
     setLoadComplete(false);
     const init = async () => {
-      const initAstNodeInfo = await getCppAstNodeInfo(appCtx.languageNodeId as string);
+      const fileInfo = await getFileInfo(appCtx.projectFileId);
+
+      createClient(appCtx.workspaceId, fileInfo?.type);
+      const initAstNodeInfo = await getAstNodeInfo(appCtx.languageNodeId as string);
       if (!initAstNodeInfo) return;
 
-      const initProps = await getCppProperties(initAstNodeInfo.id as string);
-      const initRefTypes = await getCppReferenceTypes(initAstNodeInfo.id as string);
+      const initProps = await getProperties(initAstNodeInfo.id as string);
+      const initRefTypes = await getReferenceTypes(initAstNodeInfo.id as string);
       const initRefCounts: typeof refCounts = new Map();
       const initRefs: typeof refs = new Map();
       const initFileUsages: typeof fileUsages = new Map();
 
       for (const [rType, rId] of initRefTypes) {
-        const refCount = await getCppReferenceCount(initAstNodeInfo.id as string, rId);
+        const refCount = await getReferenceCount(initAstNodeInfo.id as string, rId);
         initRefCounts.set(rType, refCount);
 
-        const refsForType = await getCppReferences(initAstNodeInfo.id as string, rId, initAstNodeInfo.tags ?? []);
+        const refsForType = await getReferences(initAstNodeInfo.id as string, rId, initAstNodeInfo.tags ?? []);
         initRefs.set(rType, refsForType);
 
         if (rType === 'Caller' || rType === 'Usage') {