From 09e6231314e5858f6a37e2ccdad6529a7e943ac6 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Thu, 28 Mar 2024 11:54:57 +0100
Subject: [PATCH] feat(visManager): nodelink settings
---
.../nodelinkvis/components/NLPixi.tsx | 2 +
.../nodelinkvis/nodelinkvis.tsx | 101 +++++++++++++++---
2 files changed, 90 insertions(+), 13 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index b8d90ed2d..3aba8b83c 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -7,12 +7,14 @@ import * as force from './NLForce';
import { Viewport } from 'pixi-viewport';
import { useAppDispatch, useML, useSearchResultData } from '../../../../data-access';
import { NLPopup } from './NLPopup';
+import { VisualizationConfiguration } from '../../../types';
type Props = {
onClick: (node: NodeType, pos: IPointData) => void;
// onHover: (data: { node: NodeType; pos: IPointData }) => void;
// onUnHover: (data: { node: NodeType; pos: IPointData }) => void;
highlightNodes: NodeType[];
+ configuration: VisualizationConfiguration;
currentShortestPathEdges?: LinkType[];
highlightedLinks?: LinkType[];
graph?: GraphType;
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
index ea1fbb111..9b8411bde 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/nodelinkvis.tsx
@@ -8,15 +8,35 @@ import { VisualizationPropTypes, VISComponentType } from '../../types';
import Input from '@graphpolaris/shared/lib/components/inputs';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
+import { validateProps } from '@deck.gl/core/typed/lifecycle/props';
export interface NodelinkVisProps {
layout: string;
showPopUpOnHover: boolean;
+ shapes: {
+ similar: boolean;
+ shape: 'circle' | 'rectangle';
+ shapeMap: { [id: string]: 'circle' | 'rectangle' } | undefined;
+ };
+ edges: {
+ width: {
+ similar: boolean;
+ width: number;
+ };
+ };
}
const configuration: NodelinkVisProps = {
layout: 'Force directed',
showPopUpOnHover: true,
+ shapes: {
+ similar: true,
+ shape: 'circle',
+ shapeMap: undefined,
+ },
+ edges: {
+ width: { similar: true, width: 0.2 },
+ },
};
export const NodeLinkVis = React.memo(({ data, ml, dispatch }: VisualizationPropTypes) => {
@@ -72,6 +92,7 @@ export const NodeLinkVis = React.memo(({ data, ml, dispatch }: VisualizationProp
<div className="h-full w-full overflow-hidden" ref={ref}>
<NLPixi
graph={graph}
+ configuration={configuration}
highlightNodes={highlightNodes}
highlightedLinks={highlightedLinks}
onClick={(node, pos) => {
@@ -94,19 +115,73 @@ const NodelinkSettings = ({
}) => {
return (
<SettingsContainer>
- <Input
- type="dropdown"
- label="Layout"
- value={configuration.layout}
- options={['Force directed']}
- onChange={(val) => updateSettings({ layout: val })}
- />
- <Input
- type="boolean"
- label="Show pop-up on hover"
- value={configuration.showPopUpOnHover}
- onChange={(val) => updateSettings({ showPopUpOnHover: val })}
- />
+ <div className="mb-4">
+ <h1 className="text-sm font-bold">General</h1>
+ <Input
+ type="dropdown"
+ label="Layout"
+ value={configuration.layout}
+ options={['Force directed']}
+ onChange={(val) => updateSettings({ layout: val })}
+ />
+ <Input
+ type="boolean"
+ label="Show pop-up on hover"
+ value={configuration.showPopUpOnHover}
+ onChange={(val) => updateSettings({ showPopUpOnHover: val })}
+ />
+ </div>
+
+ <div className="mb-4">
+ <h1 className="text-sm font-bold">Nodes</h1>
+
+ <div>
+ <span className="text-xs font-semibold">Shape</span>
+ <Input
+ type="boolean"
+ label="Common shape?"
+ value={configuration.shapes.similar}
+ onChange={(val) => updateSettings({ shapes: { ...configuration.shapes, similar: val } })}
+ />
+ {configuration.shapes.similar ? (
+ <Input
+ type="dropdown"
+ label="Shape"
+ value={configuration.shapes.shape}
+ options={['Circle', 'Square']}
+ onChange={(val) => updateSettings({ shapes: { ...configuration.shapes, shape: val } })}
+ />
+ ) : (
+ <span>Map shapes to labels (to be implemented)</span>
+ )}
+ </div>
+
+ <div>
+ <span className="text-xs font-semibold">Color</span>
+ </div>
+ </div>
+
+ <div>
+ <h1 className="text-sm font-bold">Edges</h1>
+ <div>
+ <span className="text-xs font-semibold">Edge width</span>
+ <Input
+ type="boolean"
+ label="Common width"
+ value={configuration.edges.width.similar}
+ onChange={(val) => updateSettings({ edges: { ...configuration.edges, width: { ...configuration.edges.width, similar: val } } })}
+ />
+ <Input
+ type="slider"
+ label="Width"
+ value={configuration.edges.width.width}
+ onChange={(val) => updateSettings({ edges: { ...configuration.edges, width: { ...configuration.edges.width, width: val } } })}
+ min={0.1}
+ max={2}
+ step={0.1}
+ />
+ </div>
+ </div>
</SettingsContainer>
);
};
--
GitLab