diff --git a/libs/shared/lib/components/textEditor/VariableNode.tsx b/libs/shared/lib/components/textEditor/VariableNode.tsx index 20fa9679572f1b8041e401affdc18df4ab5c384d..72ced5ad048f585aa72297d63bcd481f169174a4 100644 --- a/libs/shared/lib/components/textEditor/VariableNode.tsx +++ b/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 diff --git a/libs/shared/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx b/libs/shared/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx index 77824221fd8423a2a0d8abfbcd1eb1adb82bd7ee..8e14880147eec5a90e6c0b6f68f272df348332d7 100644 --- a/libs/shared/lib/components/textEditor/plugins/InsertVariablesPlugin.tsx +++ b/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