diff --git a/libs/shared/lib/vis/visualizations/vis1D/Vis1D.tsx b/libs/shared/lib/vis/visualizations/vis1D/Vis1D.tsx index 846ab862ba48dc0feab31dc7211e5bcff37c9610..ebfc2423f95f443d9fe3ed9b010e0595ed72a4d9 100644 --- a/libs/shared/lib/vis/visualizations/vis1D/Vis1D.tsx +++ b/libs/shared/lib/vis/visualizations/vis1D/Vis1D.tsx @@ -10,7 +10,7 @@ import { Button } from '@graphpolaris/shared/lib/components/buttons'; export interface Vis1DProps { plotType: (typeof plotTypeOptions)[number]; // plotly plot type title: string; // title of the plot - nodeLabel: string; // node label to plot + selectedEntity: string; // node label to plot xAxisLabel?: string; yAxisLabel?: string; showAxis: boolean; @@ -19,7 +19,7 @@ export interface Vis1DProps { const defaultSettings: Vis1DProps = { plotType: 'bar', title: '', - nodeLabel: '', + selectedEntity: '', xAxisLabel: '', yAxisLabel: '', showAxis: true, @@ -68,17 +68,17 @@ const Vis1D = forwardRef<Vis1DVisHandle, VisualizationPropTypes<Vis1DProps>>(({ })); const getAttributeValues = (attributeKey: string | number | undefined) => { - if (!settings.nodeLabel || !attributeKey) { + if (!settings.selectedEntity || !attributeKey) { return []; } return data.nodes - .filter((item) => item.label === settings.nodeLabel && item.attributes && attributeKey in item.attributes) + .filter((item) => item.label === settings.selectedEntity && item.attributes && attributeKey in item.attributes) .map((item) => item.attributes[attributeKey]); }; - const xAxisData = useMemo(() => getAttributeValues(settings.xAxisLabel), [data, settings.nodeLabel, settings.xAxisLabel]); - const yAxisData = useMemo(() => getAttributeValues(settings.yAxisLabel), [data, settings.nodeLabel, settings.yAxisLabel]); + const xAxisData = useMemo(() => getAttributeValues(settings.xAxisLabel), [data, settings.selectedEntity, settings.xAxisLabel]); + const yAxisData = useMemo(() => getAttributeValues(settings.yAxisLabel), [data, settings.selectedEntity, settings.yAxisLabel]); return ( <div className="h-full w-full flex items-center justify-center overflow-hidden" ref={internalRef}> @@ -96,26 +96,36 @@ const Vis1D = forwardRef<Vis1DVisHandle, VisualizationPropTypes<Vis1DProps>>(({ }); const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<Vis1DProps>) => { + // !TODO: include relationship const mutablePlotTypes = [...plotTypeOptions]; const [attributeOptions, setAttributeOptions] = useState<string[]>([]); useEffect(() => { - if (settings.nodeLabel === '' && graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) { - const nodeLabelTemp = graphMetadata.nodes.labels[0]; - updateSettings({ nodeLabel: nodeLabelTemp }); + if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) { + if (settings.selectedEntity === '') { + updateSettings({ selectedEntity: graphMetadata.nodes.labels[0] }); + } else { + const labelNodes = graphMetadata.nodes.labels; + if (!labelNodes.includes(settings.selectedEntity)) { + updateSettings({ selectedEntity: graphMetadata.nodes.labels[0] }); + } + } } - }, [settings.nodeLabel, graphMetadata]); + }, [graphMetadata]); useEffect(() => { - if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0 && settings.nodeLabel != '') { - const newAttributeOptions = Object.keys(graphMetadata.nodes.types[settings.nodeLabel].attributes); - if (settings.xAxisLabel === '') { - updateSettings({ xAxisLabel: newAttributeOptions[0] }); + if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0 && settings.selectedEntity != '') { + const labelNodes = graphMetadata.nodes.labels; + if (labelNodes.includes(settings.selectedEntity)) { + const newAttributeOptions = Object.keys(graphMetadata.nodes.types[settings.selectedEntity].attributes); + if (settings.xAxisLabel === '') { + updateSettings({ xAxisLabel: newAttributeOptions[0] }); + } + setAttributeOptions(newAttributeOptions); + } else { } - // initialize the selected option for creating the dropdown and plots - setAttributeOptions(newAttributeOptions); } - }, [graphMetadata, settings.nodeLabel]); + }, [graphMetadata, settings.selectedEntity]); return ( <SettingsContainer> @@ -123,14 +133,14 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio <Input className="w-full text-justify justify-start mb-2" type="dropdown" - value={settings.nodeLabel} + value={settings.selectedEntity} options={graphMetadata.nodes.labels} - onChange={(val) => updateSettings({ nodeLabel: val as string })} + onChange={(val) => updateSettings({ selectedEntity: val as string })} overrideRender={ <EntityPill title={ <div className="flex flex-row justify-between items-center cursor-pointer"> - <span>{settings.nodeLabel || ''}</span> + <span>{settings.selectedEntity || ''}</span> <Button variantType="secondary" variant="ghost" size="2xs" iconComponent="icon-[ic--baseline-arrow-drop-down]" /> </div> }