From ed6f93baa2f4ba0a4c663075a322b1360d11e700 Mon Sep 17 00:00:00 2001
From: Sjoerd <svink@graphpolaris.com>
Date: Wed, 18 Sep 2024 08:11:33 +0000
Subject: [PATCH] chore: removal of non-working visualization settings
---
.../choropleth-layer/ChoroplethOptions.tsx | 21 +---
.../layers/nodelink-layer/NodeLinkOptions.tsx | 100 ++----------------
.../visualizations/matrixvis/matrixvis.tsx | 8 --
.../nodelinkvis/nodelinkvis.tsx | 41 +------
4 files changed, 13 insertions(+), 157 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx
index 4f7bfceec..af95465b7 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/layers/choropleth-layer/ChoroplethOptions.tsx
@@ -128,26 +128,7 @@ export function ChoroplethOptions({
</AccordionHead>
<AccordionBody>
- <div>
- <div className="flex justify-between">
- <span className="font-bold">Color</span>
- <ColorPicker
- value={edgeSettings.color}
- onChange={(val) =>
- updateLayerSettings({ edges: { ...settings.edges, [edgeType]: { ...edgeSettings, color: val } } })
- }
- />
- </div>
-
- <Input
- label="Edges on hover"
- type="boolean"
- value={layerSettings?.enableBrushing}
- onChange={(val) => {
- updateLayerSettings({ enableBrushing: val as boolean });
- }}
- />
- </div>
+ <div></div>
</AccordionBody>
</AccordionItem>
);
diff --git a/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
index 59becce56..51f05d351 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
@@ -206,39 +206,6 @@ export function NodeLinkOptions({
)}
</AccordionBody>
</AccordionItem>
- <AccordionItem>
- <AccordionHead>
- <span className="font-semibold">Shape & Size</span>
- </AccordionHead>
- <AccordionBody>
- <Input
- inline
- label="Shape"
- type="dropdown"
- value={nodeSettings?.shape}
- options={['circle', 'square', 'triangle', 'diamond', 'location', 'star']}
- disabled={true}
- onChange={(val) =>
- updateLayerSettings({
- nodes: { ...layerSettings.nodes, [nodeType]: { ...nodeSettings, shape: String(val) } },
- })
- }
- />
- <Input
- label="Size"
- type="slider"
- min={0}
- max={80}
- step={5}
- value={nodeSettings?.size}
- onChange={(val) =>
- updateLayerSettings({
- nodes: { ...layerSettings.nodes, [nodeType]: { ...nodeSettings, size: Number(val) } },
- })
- }
- />
- </AccordionBody>
- </AccordionItem>
</Accordion>
</div>
</AccordionBody>
@@ -293,69 +260,16 @@ export function NodeLinkOptions({
</AccordionHead>
<AccordionBody>
<Input
- label="Fixed"
- type="boolean"
- value={edgeSettings?.fixed}
+ type="slider"
+ label="Width"
+ min={0}
+ max={10}
+ step={0.2}
+ value={edgeSettings.width}
onChange={(val) =>
- updateLayerSettings({ edges: { ...settings.edges, [edgeType]: { ...edgeSettings, fixed: val } } })
+ updateLayerSettings({ edges: { ...settings.edges, [edgeType]: { ...edgeSettings, width: Number(val) } } })
}
/>
- {!edgeSettings.fixed ? (
- <div>
- <Input
- label="Based on"
- type="dropdown"
- size="xs"
- options={
- graphMetadata.edges.types[edgeType]?.attributes
- ? Object.keys(graphMetadata.edges.types[edgeType].attributes).filter(
- (key) => graphMetadata.edges.types[edgeType].attributes[key].dimension === 'numerical',
- )
- : []
- }
- value={edgeSettings?.sizeAttribute}
- onChange={(val) =>
- updateLayerSettings({
- edges: { ...settings.edges, [edgeType]: { ...edgeSettings, sizeAttribute: String(val) } },
- })
- }
- />
- <div className="flex">
- <Input
- type="number"
- label="min"
- size="xs"
- value={edgeSettings?.min}
- onChange={(val) =>
- updateLayerSettings({ edges: { ...settings.edges, [edgeType]: { ...edgeSettings, min: val } } })
- }
- />
- <Input
- type="number"
- label="max"
- size="xs"
- value={edgeSettings?.max}
- onChange={(val) =>
- updateLayerSettings({ edges: { ...settings.edges, [edgeType]: { ...edgeSettings, max: val } } })
- }
- />
- </div>
- </div>
- ) : (
- <div>
- <Input
- type="slider"
- label="Width"
- min={0}
- max={10}
- step={0.2}
- value={edgeSettings?.width}
- onChange={(val) =>
- updateLayerSettings({ edges: { ...settings.edges, [edgeType]: { ...edgeSettings, width: Number(val) } } })
- }
- />
- </div>
- )}
</AccordionBody>
</AccordionItem>
</Accordion>
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
index 003cb472e..43b76513f 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/matrixvis.tsx
@@ -72,14 +72,6 @@ const MatrixSettings = ({ settings, updateSettings }: VisualizationSettingsPropT
options={['rect', 'circle']}
onChange={(val) => updateSettings({ marks: val as string })}
/>
-
- <Input
- type="dropdown"
- label="Color"
- value={settings.color}
- options={['blue', 'green']}
- onChange={(val) => updateSettings({ color: val as string })}
- />
</SettingsContainer>
);
};
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
index a2d1c9313..3792f77a0 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -213,40 +213,15 @@ const NodelinkSettings = ({ settings, graphMetadata, updateSettings }: Visualiza
<div className="mb-4">
<h1 className="font-bold">Nodes</h1>
-
<div>
<span className="text-xs font-semibold">Shape</span>
<Input
- type="boolean"
- label="Common shape?"
- value={settings.nodes?.shape.similar}
- onChange={(val) => updateSettings({ nodes: { ...settings.nodes, shape: { ...settings.nodes.shape, similar: val } } })}
+ type="dropdown"
+ label="Shape"
+ value={settings.shapes.shape}
+ options={[{ circle: 'Circle' }, { rectangle: 'Square' }]}
+ onChange={(val) => updateSettings({ shapes: { ...settings.shapes, shape: val as any } })}
/>
- {settings.nodes?.shape?.similar ? (
- <Input
- type="dropdown"
- label="Shape"
- value={settings.nodes?.shape.type}
- options={[{ circle: 'Circle' }, { rectangle: 'Square' }]}
- onChange={(val) => updateSettings({ nodes: { ...settings.nodes, shape: { ...settings.nodes.shape, type: val as any } } })}
- />
- ) : (
- <span>Map shapes to labels (to be implemented)</span>
- )}
- </div>
-
- <div>
- <span className="text-xs font-semibold">Labels</span>
- { Object.entries(graphMetadata.nodes.types).map(([label, type]) =>
- <Input
- type="dropdown"
- key={label}
- label={label}
- value={settings.nodes.labelAttributes ? settings.nodes.labelAttributes[label] || 'Default' : undefined}
- options={['Default', ...Object.keys(type.attributes).filter(x => x != 'labels')]}
- onChange={(val) => updateSettings({ nodes: { ...settings.nodes, labelAttributes: { ... settings.nodes.labelAttributes, [label]: val as string } } })}
- />
- )}
</div>
</div>
@@ -254,12 +229,6 @@ const NodelinkSettings = ({ settings, graphMetadata, updateSettings }: Visualiza
<h1 className="font-bold">Edges</h1>
<div>
<span className="text-xs font-semibold">Edge width</span>
- <Input
- type="boolean"
- label="Common width"
- value={settings.edges.width.similar}
- onChange={(val) => updateSettings({ edges: { ...settings.edges, width: { ...settings.edges.width, similar: val } } })}
- />
<Input
type="slider"
label="Width"
--
GitLab