From b32b3bdce47a08d66d6b052586d997ac6043ef59 Mon Sep 17 00:00:00 2001
From: "Nicolas F. Chaves-de-Plaza" <nchaves@graphpolaris.com>
Date: Wed, 5 Feb 2025 08:44:03 -0500
Subject: [PATCH 1/5] refactor(paohvis): removed unused state entries and their
update functions
The accordion component has its own logic for collapsing/uncollapsing its contents. Therefore, we do not need state variables at the PaohSettings component level to handle this logic.
---
src/lib/vis/visualizations/paohvis/paohvis.tsx | 10 ----------
1 file changed, 10 deletions(-)
diff --git a/src/lib/vis/visualizations/paohvis/paohvis.tsx b/src/lib/vis/visualizations/paohvis/paohvis.tsx
index ab493ef9f..01b39cdc4 100644
--- a/src/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/src/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -943,16 +943,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[] = [];
--
GitLab
From 7fe00b70e58f891d3ba8ad538cd6f4b7047b27c3 Mon Sep 17 00:00:00 2001
From: "Nicolas F. Chaves-de-Plaza" <nchaves@graphpolaris.com>
Date: Wed, 5 Feb 2025 10:34:30 -0500
Subject: [PATCH 2/5] refactor(paohvis): use nodeList instead of
graphMetadata.nodes.labels for updating UI elements
This allowed us to decouple the useEffect into two: one in charge of keeping the nodeList updated and another one in charge of cleaning up de rowNode and columnNode when the nodeList changes
---
.../vis/visualizations/paohvis/paohvis.tsx | 22 ++++++++++++-------
1 file changed, 14 insertions(+), 8 deletions(-)
diff --git a/src/lib/vis/visualizations/paohvis/paohvis.tsx b/src/lib/vis/visualizations/paohvis/paohvis.tsx
index 01b39cdc4..45a134ff7 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>>(
@@ -987,16 +989,20 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
}, [settings.columnNode, graphMetadata]);
useEffect(() => {
- if (
- graphMetadata &&
- graphMetadata.nodes &&
- graphMetadata.nodes.labels.length > 1 &&
+ if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) {
+ updateSettings({ nodeList: graphMetadata.nodes.labels });
+ }
+ }, [graphMetadata]);
+
+ useEffect(() => {
+ if (
+ settings.nodeList.length > 1 &&
settings.rowNode === '' &&
settings.columnNode === ''
) {
- updateSettings({ rowNode: graphMetadata.nodes.labels[0], columnNode: graphMetadata.nodes.labels[1] });
+ updateSettings({ rowNode: settings.nodeList[0], columnNode: settings.nodeList[1] });
}
- }, [graphMetadata]);
+ }, [settings.nodeList])
return (
<SettingsContainer>
@@ -1007,7 +1013,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
@@ -1047,7 +1053,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
From 1c7f6d6205a66b1608af0008187c95e424920750 Mon Sep 17 00:00:00 2001
From: "Nicolas F. Chaves-de-Plaza" <nchaves@graphpolaris.com>
Date: Wed, 5 Feb 2025 15:41:36 -0500
Subject: [PATCH 3/5] fix(paohvis): nodeList should update even if there are no
labels
In the case graphMetadata.nodes.labels is empty (len==0), then we still update nodeList. Otherwise, nodeList would end up with a rogue element when there is only one node left in the query builder.
---
src/lib/vis/visualizations/paohvis/paohvis.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/lib/vis/visualizations/paohvis/paohvis.tsx b/src/lib/vis/visualizations/paohvis/paohvis.tsx
index 45a134ff7..f16be6fb7 100644
--- a/src/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/src/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -989,7 +989,7 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
}, [settings.columnNode, graphMetadata]);
useEffect(() => {
- if (graphMetadata && graphMetadata.nodes && graphMetadata.nodes.labels.length > 0) {
+ if (graphMetadata && graphMetadata.nodes) {
updateSettings({ nodeList: graphMetadata.nodes.labels });
}
}, [graphMetadata]);
--
GitLab
From 017be912b9f442b06ae1e2a76486fd24ed2e0702 Mon Sep 17 00:00:00 2001
From: "Nicolas F. Chaves-de-Plaza" <nchaves@graphpolaris.com>
Date: Wed, 5 Feb 2025 15:44:44 -0500
Subject: [PATCH 4/5] feat(paohvis): dropdowns update automatically based on
the state of the nodeList
Added logic to handle cases like removing one or two of the selected nodes.
---
.../vis/visualizations/paohvis/paohvis.tsx | 33 +++++++++++++++----
1 file changed, 26 insertions(+), 7 deletions(-)
diff --git a/src/lib/vis/visualizations/paohvis/paohvis.tsx b/src/lib/vis/visualizations/paohvis/paohvis.tsx
index f16be6fb7..236fac726 100644
--- a/src/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/src/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -994,14 +994,33 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
}
}, [graphMetadata]);
- useEffect(() => {
- if (
- settings.nodeList.length > 1 &&
- settings.rowNode === '' &&
- settings.columnNode === ''
- ) {
- updateSettings({ rowNode: settings.nodeList[0], columnNode: settings.nodeList[1] });
+ useEffect(() => {
+ 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 (
--
GitLab
From 9a65e441f761df7c5c737f5ab6a390320afbc20d Mon Sep 17 00:00:00 2001
From: "Nicolas F. Chaves-de-Plaza" <nchaves@graphpolaris.com>
Date: Fri, 7 Feb 2025 09:47:19 -0500
Subject: [PATCH 5/5] fix(paohvis): prevents crashing if nodeList is undefined
nodeList can be undefined, for instance, if a program state was cached that did not contain this parameter in the settings dict.
---
src/lib/vis/visualizations/paohvis/paohvis.tsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/lib/vis/visualizations/paohvis/paohvis.tsx b/src/lib/vis/visualizations/paohvis/paohvis.tsx
index 236fac726..f21cf87f4 100644
--- a/src/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/src/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -994,7 +994,9 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
}
}, [graphMetadata]);
- useEffect(() => {
+ useEffect(() => {
+ if (!settings.nodeList) return;
+
let rowNode = settings.rowNode;
let columnNode = settings.columnNode;
const availableNodes = [...settings.nodeList]
--
GitLab