feat: render the pointed action only for fixing the shaking issue (#146)

feat: render the pointed action only for fixing the shaking issue - reduce the token refreshes that only refreshed when content changed - only render the pointed action to avoid editor shaking Refs: #135 --------- Signed-off-by: seven <[email protected]>
geek-fun · Dec 28, 2024 · 5edab38 · 5edab38
1 parent a6d045f
commit 5edab38
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 127 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -16,9 +16,10 @@ declare module 'vue' {
     NCard: typeof import('naive-ui')['NCard']
     NCollapse: typeof import('naive-ui')['NCollapse']
     NCollapseItem: typeof import('naive-ui')['NCollapseItem']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
-    NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
@@ -31,9 +32,10 @@ declare module 'vue' {
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NList: typeof import('naive-ui')['NList']
-    NListItem: typeof import('naive-ui')['NListItem']
+    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
+    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NP: typeof import('naive-ui')['NP']
     NPopover: typeof import('naive-ui')['NPopover']
     NProgress: typeof import('naive-ui')['NProgress']
@@ -48,7 +50,6 @@ declare module 'vue' {
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
-    NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
     PathBreadcrumb: typeof import('./src/components/PathBreadcrumb.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "json5": "^2.2.3",
     "lodash": "^4.17.21",
     "markdown-it": "^14.1.0",
-    "monaco-editor": "^0.52.0",
+    "monaco-editor": "^0.52.2",
     "pinia": "^2.2.6",
     "pinia-plugin-persistedstate": "^3.2.3",
     "pretty-bytes": "^6.1.1",

diff --git a/src/common/monaco/tokenlizer.ts b/src/common/monaco/tokenlizer.ts
@@ -1,10 +1,16 @@
-import { Decoration, Editor, executeActions, monaco, Range, SearchAction } from './';
+import { Decoration, executeActions, monaco, SearchAction } from './';
 import JSON5 from 'json5';
+import { get } from 'lodash';
 import { CustomError } from '../customError.ts';
 
 export let searchTokens: SearchAction[] = [];
 
-export const buildSearchToken = (lines: Array<{ lineNumber: number; lineContent: string }>) => {
+export const buildSearchToken = (model: monaco.editor.IModel) => {
+  const lines = Array.from({ length: model.getLineCount() }, (_, i) => ({
+    lineNumber: i + 1,
+    lineContent: model.getLineContent(i + 1),
+  }));
+
   const commands = lines.filter(({ lineContent }) => executeActions.regexp.test(lineContent));
 
   searchTokens = commands.map(({ lineContent, lineNumber }, index, commands) => {
@@ -39,29 +45,23 @@ export const buildSearchToken = (lines: Array<{ lineNumber: number; lineContent:
         startLineNumber: lineNumber,
         endLineNumber,
         startColumn: 1,
-        endColumn: lines[endLineNumber].lineContent.length,
+        endColumn: get(lines, `[${endLineNumber}].lineContent.length`, 0),
       },
     } as SearchAction;
   });
 
   return searchTokens;
 };
-export const getPositionAction = (position: Range) => {
+export const getAction = (position: monaco.Range | monaco.Position | null | undefined) => {
+  if (!position) {
+    return undefined;
+  }
+  const startLine = get(position, 'startLineNumber', get(position, 'lineNumber', -1));
+  const endLine = get(position, 'endLineNumber', get(position, 'lineNumber', -1));
   return searchTokens.find(({ position: { startLineNumber, endLineNumber } }) => {
-    return position.startLineNumber >= startLineNumber && position.endLineNumber <= endLineNumber;
+    return startLine >= startLineNumber && endLine <= endLineNumber;
   });
 };
-export const getPointerAction = (editor: Editor, tokens: Array<SearchAction>) => {
-  const { lineNumber } = editor?.getPosition() || {};
-  if (lineNumber === undefined || lineNumber === null) {
-    return;
-  }
-
-  return tokens.find(
-    ({ position: { startLineNumber, endLineNumber } }) =>
-      lineNumber >= startLineNumber && lineNumber <= endLineNumber,
-  );
-};
 
 export const executionGutterClass = 'execute-button-decoration';
 export const getActionMarksDecorations = (searchTokens: SearchAction[]): Array<Decoration> => {
@@ -75,33 +75,36 @@ export const getActionMarksDecorations = (searchTokens: SearchAction[]): Array<D
     .sort((a, b) => (a as Decoration).id - (b as Decoration).id) as Array<Decoration>;
 };
 export const buildCodeLens = (
-  searchTokens: SearchAction[],
+  position: monaco.Position,
   autoIndentCmdId: string,
   copyAsCurlCmdId: string,
-) => {
-  const copyCurl = searchTokens.map(({ position }, index) => ({
-    range: { ...position, endLineNumber: position.startLineNumber },
-    id: `CopyAsCurl-${index}`,
+): Array<monaco.languages.CodeLens> => {
+  const action = getAction(position);
+  if (!action) {
+    return [];
+  }
+
+  const copyCurl = {
+    range: action.position,
+    id: `CopyAsCurl`,
     command: {
       id: copyAsCurlCmdId!,
       title: 'Copy as CURL',
       arguments: [position],
     },
-  }));
+  };
 
-  const autoIndent = searchTokens
-    .filter(({ qdsl }) => qdsl)
-    .map(({ position }, index) => ({
-      range: { ...position, endLineNumber: position.startLineNumber },
-      id: `AutoIndent-${index}`,
-      command: {
-        id: autoIndentCmdId!,
-        title: 'Auto Indent',
-        arguments: [{ ...position, startLineNumber: position.startLineNumber + 1 }],
-      },
-    }));
+  const autoIndent = action.qdsl && {
+    range: action.position,
+    id: `AutoIndent`,
+    command: {
+      id: autoIndentCmdId!,
+      title: 'Auto Indent',
+      arguments: [{ ...action.position, startLineNumber: action.position.startLineNumber + 1 }],
+    },
+  };
 
-  return [...autoIndent, ...copyCurl];
+  return [autoIndent, copyCurl].filter(Boolean) as Array<monaco.languages.CodeLens>;
 };
 
 export const formatQDSL = (

diff --git a/src/common/monaco/type.ts b/src/common/monaco/type.ts
@@ -1,20 +1,14 @@
 import { monaco } from './index.ts';
 
-export type Range = {
-  startLineNumber: number;
-  startColumn: number;
-  endLineNumber: number;
-  endColumn: number;
-};
 export type Decoration = {
   id: number;
-  range: Range;
+  range: monaco.Range;
   options: { isWholeLine: boolean; linesDecorationsClassName: string };
 };
 
 export type SearchAction = {
   qdsl: string;
-  position: Range;
+  position: monaco.Range;
   method: string;
   index: string;
   path: string;

diff --git a/src/common/requestUtil.ts b/src/common/requestUtil.ts
@@ -13,5 +13,5 @@ export const buildURL = (
   queryParameters?: string,
 ) => {
   const trimmedPath = path?.startsWith('/') ? path.slice(1) : path;
-  return `${host}:${port}/${trimmedPath}${queryParameters ? `?${queryParameters}` : ''}`;
+  return `${host}:${port}${trimmedPath ? `/${trimmedPath}` : ''}${queryParameters ? `?${queryParameters}` : ''}`;
 };
diff --git a/src/datasources/fetchApi.ts b/src/datasources/fetchApi.ts
@@ -76,7 +76,6 @@ const fetchRequest = async (
         options: { method, headers, body: payload ?? undefined, agent },
       }),
     ) as { status: number; message: string; data: unknown };
-
     if (status >= 200 && status < 500) {
       const parsedData =
         typeof data === 'object' ? data : (data as string)?.split('\n')?.filter(Boolean);

diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
@@ -5,21 +5,21 @@ import { loadHttpClient, storeApi } from '../datasources';
 
 export enum DatabaseType {
   ELASTICSEARCH = 'elasticsearch',
-  DYNAMODB = 'dynamodb'
+  DYNAMODB = 'dynamodb',
 }
 
 export type BaseConnection = {
   id?: number;
   name: string;
   type: DatabaseType;
-}
+};
 
 export type DynamoDBConnection = BaseConnection & {
   type: DatabaseType.DYNAMODB;
   region: string;
   accessKeyId: string;
   secretAccessKey: string;
-}
+};
 
 export type Connection = ElasticsearchConnection | DynamoDBConnection;
 
@@ -32,7 +32,7 @@ export type ElasticsearchConnection = BaseConnection & {
   password?: string;
   indexName?: string;
   queryParameters?: string;
-}
+};
 
 export type ConnectionIndex = {
   health: string;
@@ -101,8 +101,7 @@ export const useConnectionStore = defineStore('connectionStore', {
   actions: {
     async fetchConnections() {
       try {
-        const connections = await storeApi.get('connections', []) as Connection[];
-        this.connections = connections;
+        this.connections = (await storeApi.get('connections', [])) as Connection[];
       } catch (error) {
         console.error('Error fetching connections:', error);
         this.connections = [];
@@ -121,7 +120,7 @@ export const useConnectionStore = defineStore('connectionStore', {
         const newConnection = {
           ...connection,
           type: 'host' in connection ? DatabaseType.ELASTICSEARCH : DatabaseType.DYNAMODB,
-          id: connection.id || this.connections.length + 1
+          id: connection.id || this.connections.length + 1,
         } as Connection;
 
         if (connection.id) {
@@ -136,12 +135,15 @@ export const useConnectionStore = defineStore('connectionStore', {
           this.connections.push(newConnection);
           this.established = null;
         }
-        
+
         await storeApi.set('connections', pureObject(this.connections));
         return { success: true, message: 'Connection saved successfully' };
       } catch (error) {
         console.error('Error saving connection:', error);
-        return { success: false, message: error instanceof Error ? error.message : 'Unknown error' };
+        return {
+          success: false,
+          message: error instanceof Error ? error.message : 'Unknown error',
+        };
       }
     },
     async removeConnection(connection: Connection) {
@@ -173,8 +175,8 @@ export const useConnectionStore = defineStore('connectionStore', {
             const data = (await client.get('/_cat/indices', 'format=json')) as Array<{
               [key: string]: string;
             }>;
-            
-            indices = data.map((index) => ({
+
+            indices = data.map(index => ({
               ...index,
               docs: {
                 count: parseInt(index['docs.count'], 10),
@@ -191,7 +193,7 @@ export const useConnectionStore = defineStore('connectionStore', {
           this.established = { ...connection, indices: [] };
         }
       } else if (connection.type === DatabaseType.DYNAMODB) {
-        this.established = {...connection, indices: [], activeIndex: undefined};
+        this.established = { ...connection, indices: [], activeIndex: undefined };
       }
     },
     async fetchIndices() {
@@ -279,7 +281,7 @@ export const useConnectionStore = defineStore('connectionStore', {
         port: 9200,
         username: undefined,
         password: undefined,
-        sslCertVerification: false
+        sslCertVerification: false,
       };
       const params = queryParams ? `${queryParams}&format=json` : 'format=json';
       const url = buildURL(host, port, buildPath(index, path, this.established), params);
@@ -293,9 +295,8 @@ export const useConnectionStore = defineStore('connectionStore', {
     },
     async testDynamoDBConnection(connection: DynamoDBConnection) {
       // test later, should send request to rust backend
-      console.log('test connect to ',connection.type)
+      console.log('test connect to ', connection.type);
       return undefined;
-
     },
     validateConnection(connection: Connection): boolean {
       if (connection.type === DatabaseType.ELASTICSEARCH) {
@@ -305,13 +306,9 @@ export const useConnectionStore = defineStore('connectionStore', {
           typeof connection.sslCertVerification === 'boolean'
         );
       } else if (connection.type === DatabaseType.DYNAMODB) {
-        return !!(
-          connection.region &&
-          connection.accessKeyId &&
-          connection.secretAccessKey
-        );
+        return !!(connection.region && connection.accessKeyId && connection.secretAccessKey);
       }
       return false;
-    }
+    },
   },
 });