From 6adc5809a8b1e8e134aabb5ec5d90804aabcc329 Mon Sep 17 00:00:00 2001 From: Leonardo <leomilho@gmail.com> Date: Mon, 29 Apr 2024 00:53:59 +0200 Subject: [PATCH] chore(vis): tableVis load first label as default --- libs/shared/lib/vis/common/types.ts | 3 +++ .../lib/vis/manager/VisualizationManager.tsx | 8 ++++-- .../vis/visualizations/tablevis/tablevis.tsx | 26 ++++++++++++------- package.json | 3 +-- 4 files changed, 26 insertions(+), 14 deletions(-) diff --git a/libs/shared/lib/vis/common/types.ts b/libs/shared/lib/vis/common/types.ts index 6bb2d9862..e7cc10675 100644 --- a/libs/shared/lib/vis/common/types.ts +++ b/libs/shared/lib/vis/common/types.ts @@ -5,6 +5,7 @@ import type { AppDispatch } from '../../data-access'; import { FC } from 'react'; import { Visualizations } from '../manager'; import { Edge, Node } from 'reactflow'; +import { GraphMetaData } from '../../data-access/statistics'; export type VisualizationConfiguration = { [id: string]: any }; @@ -21,6 +22,8 @@ export type VisualizationPropTypes = { ml: ML; configuration: VisualizationConfiguration; dispatch: AppDispatch; + graphMetaData: GraphMetaData; + updateSettings: (newSettings: any) => void; handleHover: (val: any) => void; handleSelect: (val: any) => void; }; diff --git a/libs/shared/lib/vis/manager/VisualizationManager.tsx b/libs/shared/lib/vis/manager/VisualizationManager.tsx index 694298d7e..61b2a55fd 100644 --- a/libs/shared/lib/vis/manager/VisualizationManager.tsx +++ b/libs/shared/lib/vis/manager/VisualizationManager.tsx @@ -36,7 +36,7 @@ export const VisualizationManager = (): VisualizationManagerType => { const ml = useML(); const schema = useSchemaGraph(); const graphQueryResult = useGraphQueryResult(); - const meta = useGraphQueryResultMeta(); + const graphMetaData = useGraphQueryResultMeta(); const { activeVisualization, openVisualizations } = useVisualization(); const [configuration, setConfiguration] = useState<any>(); @@ -114,7 +114,9 @@ export const VisualizationManager = (): VisualizationManagerType => { const renderSettings = () => { return ( visualization?.settings && - configuration && <visualization.settings configuration={configuration} graph={meta} updateSettings={updateSettings} /> + configuration && ( + <visualization.settings configuration={configuration} graphMetaData={graphMetaData} updateSettings={updateSettings} /> + ) ); }; @@ -130,6 +132,8 @@ export const VisualizationManager = (): VisualizationManagerType => { configuration={configuration} dispatch={dispatch} handleSelect={handleSelect} + graphMetaData={graphMetaData} + updateSettings={updateSettings} /> )} </Suspense> diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx index 2744b0be6..34f885e38 100644 --- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx +++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx @@ -20,9 +20,15 @@ const configuration: TableProps = { displayEntity: '', }; -export const TableVis = ({ data, schema, configuration }: VisualizationPropTypes) => { +export const TableVis = ({ data, schema, configuration, updateSettings, graphMetaData }: VisualizationPropTypes) => { const ref = useRef<HTMLDivElement>(null); + useEffect(() => { + if (!graphMetaData.nodes.labels.includes(configuration.displayEntity)) { + updateSettings({ displayEntity: graphMetaData.nodes.labels[0] }); + } + }, [graphMetaData.nodes.labels, data]); + const attributesArray = useMemo<AugmentedNodeAttributes[]>( () => data.nodes @@ -58,31 +64,31 @@ export const TableVis = ({ data, schema, configuration }: VisualizationPropTypes const TableSettings = ({ configuration, - graph, + graphMetaData, updateSettings, }: { configuration: TableProps; - graph: GraphMetaData; + graphMetaData: GraphMetaData; updateSettings: (val: any) => void; }) => { useEffect(() => { - if (graph && graph.nodes && graph.nodes.labels.length > 0) { - updateSettings({ displayEntity: graph.nodes.labels[0] }); + if (graphMetaData && graphMetaData.nodes && graphMetaData.nodes.labels.length > 0) { + updateSettings({ displayEntity: graphMetaData.nodes.labels[0] }); } - }, [graph]); + }, [graphMetaData]); const selectedNodeAttributes = useMemo(() => { if (configuration.displayEntity) { - const nodeType = graph.nodes.types[configuration.displayEntity]; + const nodeType = graphMetaData.nodes.types[configuration.displayEntity]; if (nodeType && nodeType.attributes) { return Object.keys(nodeType.attributes); } } return []; - }, [configuration.displayEntity, graph]); + }, [configuration.displayEntity, graphMetaData]); useEffect(() => { - if (graph && graph.nodes && graph.nodes.labels.length > 0) { + if (graphMetaData && graphMetaData.nodes && graphMetaData.nodes.labels.length > 0) { updateSettings({ displayAttributes: selectedNodeAttributes }); } }, [selectedNodeAttributes]); @@ -94,7 +100,7 @@ const TableSettings = ({ label="Select entity" value={configuration.displayEntity} onChange={(val) => updateSettings({ displayEntity: val })} - options={graph.nodes.labels} + options={graphMetaData.nodes.labels} /> <Input type="boolean" diff --git a/package.json b/package.json index d00b7432e..e29fcf0f5 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,5 @@ }, "engines": { "node": ">=14.0.0" - }, - "packageManager": "pnpm@7.27.1" + } } -- GitLab