feat: add insert variables dropdown for visualizations

libs/shared/lib/components/textEditor/VariableNode.tsx

@@ -2,21 +2,29 @@ import type { NodeKey, LexicalEditor, DOMExportOutput } from 'lexical';
 import { DecoratorNode, EditorConfig } from 'lexical';
 
 
+export enum VariableType {
+  statistic,
+  visualization
+};
+
+
 export class VariableNode extends DecoratorNode<JSX.Element> {
 
   __name: string;
+  __variableType: VariableType;
 
   static getType(): string {
     return 'variable-node';
   }
 
   static clone(node: VariableNode): VariableNode {
-    return new VariableNode(node.__name, node.__key);
+    return new VariableNode(node.__name, node.__variableType, node.__key);
   }
 
-  constructor(name: string, key?: NodeKey) {
+  constructor(name: string, type: VariableType, key?: NodeKey) {
     super(key);
     this.__name = name;
+    this.__variableType = type;
   }
 
   setName(name: string) {
@@ -31,7 +39,7 @@ export class VariableNode extends DecoratorNode<JSX.Element> {
 
   getTextContent(): string {
     const self = this.getLatest();
-    return `{{${self.__name}}}`;
+    return `{{ ${self.__variableType}:${self.__name} }}`;
   }
 
   // View

libs/shared/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx

@@ -10,18 +10,22 @@ import {
   $parseSerializedNode
 } from "lexical";
 import { Input } from '@graphpolaris/shared/lib/components/inputs';
-import { VariableNode } from '../VariableNode';
+import { VariableNode, VariableType } from '../VariableNode';
 import { useState } from 'react';
-import { useGraphQueryResult } from '@graphpolaris/shared/lib/data-access';
+import { useGraphQueryResult, useVisualization } from '@graphpolaris/shared/lib/data-access';
 
 export const InsertVariablesPlugin = () => {
   const [editor] = useLexicalComposerContext();
+  const { openVisualizationArray } = useVisualization();
 
-  const onChange = (value: string | number) => {
+  const visualizationOptions = openVisualizationArray
+    .map(x => x.name);
+
+  const onChange = (value: string | number, type: VariableType) => {
     editor.update(() => {
       const selection = $getSelection() as BaseSelection;
       
-      const node = new VariableNode(String(value));
+      const node = new VariableNode(String(value), type);
       
       selection.insertNodes([node]);
 
@@ -43,13 +47,24 @@ export const InsertVariablesPlugin = () => {
     return Object.entries(typeObj.attributes).map(([k,v]) => Object.keys(v).map(x => `${k}_${x}`)).flat();
   }
 
-  return nodeTypes.map((nodeType) => 
+  return <>
+    { nodeTypes.map((nodeType) => 
       <Input
             type="dropdown"
             label={`${nodeType} variable`}
             value=""
             options={optionsForType(nodeType)}
-            onChange={onChange}
+            onChange={(v) => onChange(v, VariableType.statistic)}
             />
-        );
+        )
+    }
+    { (visualizationOptions.length > 0) ? <Input
+          type="dropdown"
+          label={`Visualization`}
+          value=""
+          options={visualizationOptions}
+          onChange={(v) => onChange(v, VariableType.visualization)}
+          /> : ''
+    }
+  </>;
 };
\ No newline at end of file