From 03864a99b3cff9d0904ca4642959c2669bacc9ac Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Tue, 18 Jun 2024 17:39:09 +0200
Subject: [PATCH] feat(map_nodelink): added nodelink layer
---
.../vis/visualizations/mapvis/MapSettings.tsx | 38 +++++++++++++++++++
.../layers/nodelink-layer/NodeLinkLayer.tsx | 3 ++
.../lib/vis/visualizations/mapvis/mapvis.tsx | 3 ++
3 files changed, 44 insertions(+)
diff --git a/libs/shared/lib/vis/visualizations/mapvis/MapSettings.tsx b/libs/shared/lib/vis/visualizations/mapvis/MapSettings.tsx
index 8ffe587a1..42ceb19ae 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/MapSettings.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/MapSettings.tsx
@@ -4,6 +4,44 @@ import { layerSettings, layerTypes } from './components/layers';
import { Input } from '../../..';
import { VisualizationSettingsPropTypes } from '../../common';
import { MapProps } from './mapvis';
+import { nodeColorHex } from '../nodelinkvis/components/utils';
+
+const DataLayerSettings = ({
+ layer,
+ settings,
+ graphMetadata,
+ updateSettings,
+}: VisualizationSettingsPropTypes<MapProps> & { layer: keyof typeof layerTypes }) => {
+ switch (layer) {
+ case 'nodelink':
+ return (
+ <>
+ {graphMetadata.nodes.labels.map((item, index) => (
+ <div className="flex m-1 items-center" key={item}>
+ <div className="w-3/4 mr-6">
+ <EntityPill title={item} />
+ </div>
+ <div className="w-1/2">
+ <div className={`h-5 w-5 border-2 border-sec-300`} style={{ backgroundColor: nodeColorHex(index + 1) }}></div>
+ </div>
+ </div>
+ ))}
+
+ <Input
+ label="Enable brushing"
+ type="boolean"
+ value={settings.enableBrushing}
+ onChange={(val) => {
+ console.log('update brush', val);
+ updateSettings({ enableBrushing: val as boolean });
+ }}
+ />
+ </>
+ );
+ default:
+ return;
+ }
+};
export const MapSettings = ({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<MapProps>) => {
const DataLayerSettings = settings.layer && layerSettings?.[settings.layer];
diff --git a/libs/shared/lib/vis/visualizations/mapvis/components/layers/nodelink-layer/NodeLinkLayer.tsx b/libs/shared/lib/vis/visualizations/mapvis/components/layers/nodelink-layer/NodeLinkLayer.tsx
index 1a8a8626c..025c470cc 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/components/layers/nodelink-layer/NodeLinkLayer.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/components/layers/nodelink-layer/NodeLinkLayer.tsx
@@ -20,6 +20,9 @@ export class NodeLinkLayer extends CompositeLayer<LayerProps> {
const brushingExtension = new BrushingExtension();
const collisionFilter = new CollisionFilterExtension();
+ const brushingExtension = new BrushingExtension();
+ const collisionFilter = new CollisionFilterExtension();
+
graph.metaData.nodes.labels.map((label: string) => {
layers.push(
new ScatterplotLayer({
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
index e122e2b27..3effcce38 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
@@ -15,6 +15,7 @@ export type MapProps = {
lat: string;
lon: string;
enableBrushing: boolean;
+ enableBrushing: boolean;
};
const settings: MapProps = {
@@ -23,6 +24,7 @@ const settings: MapProps = {
lat: 'gp_latitude',
lon: 'gp_longitude',
enableBrushing: false,
+ enableBrushing: false,
};
const INITIAL_VIEW_STATE = {
@@ -105,6 +107,7 @@ export const MapVis = ({ data, settings, updateSettings, graphMetadata, handleSe
name: 'New layer',
type: layerType,
config: settings,
+ config: settings,
visible: true,
});
}, [settings.layer]);
--
GitLab