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 4f7bfceec152e2a93df83079646d98bcf9058cdb..af95465b7c3ae88ba274814a5ce0a29d4980dc50 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 59becce56f5187834c35dbdf21225fe43e59acc0..51f05d351bdb5c8821cfa85645709d3903e51023 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 003cb472eab72fb205340b664d351836f92122da..43b76513f74c06b57e7e3c230316fc1b58e9ae70 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 a2d1c931383daa4212981d02706ef6447104482c..3792f77a0ce07786386a358a1699f33f086df21a 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"