From 8821761f9c9ebb31e4998697b1282cad775cba1b Mon Sep 17 00:00:00 2001
From: "Nicolas F. Chaves de Plaza" <nchaves@graphpolaris.com>
Date: Fri, 7 Feb 2025 14:56:24 +0000
Subject: [PATCH] fix(paohvis): improved the functioning of the node dropdowns
in settings
---
.../vis/visualizations/paohvis/paohvis.tsx | 59 ++++++++++++-------
1 file changed, 38 insertions(+), 21 deletions(-)
diff --git a/src/lib/vis/visualizations/paohvis/paohvis.tsx b/src/lib/vis/visualizations/paohvis/paohvis.tsx
index ab493ef9f..f21cf87f4 100644
--- a/src/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/src/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -34,6 +34,7 @@ export type PaohVisProps = {
rowJumpAmount: number;
colJumpAmount: number;
mergeData: boolean;
+ nodeList: string[];
};
const settings: PaohVisProps = {
@@ -47,6 +48,7 @@ const settings: PaohVisProps = {
rowJumpAmount: 3,
colJumpAmount: 3,
mergeData: false,
+ nodeList: [],
};
const PaohVis = forwardRef<PaohVisHandle, VisualizationPropTypes<PaohVisProps>>(
@@ -943,16 +945,6 @@ const PaohVis = forwardRef<PaohVisHandle, VisualizationPropTypes<PaohVisProps>>(
);
const PaohSettings = ({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<PaohVisProps>) => {
- const [areCollapsedAttrRows, setAreCollapsedAttrRows] = useState<boolean>(true);
- const [areCollapsedAttrColumns, setAreCollapsedAttrColumns] = useState<boolean>(true);
-
- const toggleCollapseAttrRows = () => {
- setAreCollapsedAttrRows(!areCollapsedAttrRows);
- };
-
- const toggleCollapseAttrColumns = () => {
- setAreCollapsedAttrColumns(!areCollapsedAttrColumns);
- };
const rowNodeInformation = useMemo(() => {
let attributes: string[] = [];
@@ -997,17 +989,42 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
}, [settings.columnNode, graphMetadata]);
useEffect(() => {
- if (
- graphMetadata &&
- graphMetadata.nodes &&
- graphMetadata.nodes.labels.length > 1 &&
- settings.rowNode === '' &&
- settings.columnNode === ''
- ) {
- updateSettings({ rowNode: graphMetadata.nodes.labels[0], columnNode: graphMetadata.nodes.labels[1] });
- }
+ if (graphMetadata && graphMetadata.nodes) {
+ updateSettings({ nodeList: graphMetadata.nodes.labels });
+ }
}, [graphMetadata]);
+ useEffect(() => {
+ if (!settings.nodeList) return;
+
+ let rowNode = settings.rowNode;
+ let columnNode = settings.columnNode;
+ const availableNodes = [...settings.nodeList]
+
+ const indexRowNode = availableNodes.indexOf(rowNode);
+ const indexColumnNode = availableNodes.indexOf(columnNode);
+
+ if (indexRowNode === -1){
+ rowNode = '';
+ }else{
+ availableNodes.splice(indexRowNode, 1)
+ }
+ if (indexColumnNode === -1){
+ columnNode = '';
+ }else{
+ availableNodes.splice(indexColumnNode, 1)
+ }
+
+ if (availableNodes.length > 0 && rowNode === '') {
+ rowNode = availableNodes.pop()!;
+ }
+ if (availableNodes.length > 0 && columnNode === '') {
+ columnNode = availableNodes.pop()!;
+ }
+
+ updateSettings({ rowNode: rowNode, columnNode: columnNode});
+ }, [settings.nodeList])
+
return (
<SettingsContainer>
<div className="overflow-x-hidden">
@@ -1017,7 +1034,7 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
className="w-full text-justify justify-start"
type="dropdown"
value={settings.rowNode}
- options={graphMetadata.nodes.labels}
+ options={settings.nodeList}
onChange={val => updateSettings({ rowNode: val as string })}
overrideRender={
<EntityPill
@@ -1057,7 +1074,7 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
className="w-full text-justify justify-start"
type="dropdown"
value={settings.columnNode}
- options={graphMetadata.nodes.labels}
+ options={settings.nodeList}
onChange={val => updateSettings({ columnNode: val as string })}
overrideRender={
<EntityPill
--
GitLab