diff --git a/libs/shared/lib/vis/visualizations/mapvis/MapSettings.tsx b/libs/shared/lib/vis/visualizations/mapvis/MapSettings.tsx index 8ffe587a1a6688b53d8677bfd7395be3f0855350..42ceb19aec4cf43f4f31b33a5903b47c2ef4fb11 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 1a8a8626c2f46d789dd7b343c5842a58010f786b..025c470ccef3eba3fae65ab6339d82edf06e1901 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 e122e2b275b0b3a74a607a7ef5b7504d1121b826..3effcce38153ee35bdffdcef0403e6471398c606 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]);