diff --git a/apps/web/package.json b/apps/web/package.json
index 1f0cdc5ec056ee6bf8a3cca3fc014641a40124fa..3f0075baf1360a11c4cf9d2f27a949ee42c98911 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,7 +16,6 @@
},
"dependencies": {
"@graphpolaris/shared": "workspace:*",
- "@mui/icons-material": "^5.15.13",
"@reduxjs/toolkit": "^2.2.1",
"config": "workspace:*",
"graphology": "^0.25.4",
diff --git a/libs/shared/lib/components/CardToolTipVis/VisualizationTooltip.tsx b/libs/shared/lib/components/CardToolTipVis/VisualizationTooltip.tsx
index 53bebb390f11d4dc180cd54eb36e144883a7f7e0..a6e5fc675aa24ca262b92122b7aaae344d4cd145 100644
--- a/libs/shared/lib/components/CardToolTipVis/VisualizationTooltip.tsx
+++ b/libs/shared/lib/components/CardToolTipVis/VisualizationTooltip.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
-import { Numbers, Close } from '@mui/icons-material';
import styles from './cardtooltipvis.module.scss';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
import {
@@ -64,7 +63,8 @@ export const VisualizationTooltip: React.FC<CardToolTipVisProps> = ({
{type === 'schema' && numberOfElements && (
<div className="px-4 py-1 border-b border-sec-200">
<div className="flex flex-row gap-1 items-center justify-between">
- <Icon component={<Numbers />} size={24} /> <span className="ml-auto text-right">{formatNumber(numberOfElements)}</span>
+ <Icon component="icon-[ic--baseline-numbers]" size={24} />{' '}
+ <span className="ml-auto text-right">{formatNumber(numberOfElements)}</span>
</div>
</div>
)}
diff --git a/libs/shared/lib/components/VisualizationTooltip/VisualizationTooltip.tsx b/libs/shared/lib/components/VisualizationTooltip/VisualizationTooltip.tsx
index 21a08ab4afba057e4ff9f9b71ae8c153fa5d8092..699c3354af0d8932429f5847554e0708dfc8e307 100644
--- a/libs/shared/lib/components/VisualizationTooltip/VisualizationTooltip.tsx
+++ b/libs/shared/lib/components/VisualizationTooltip/VisualizationTooltip.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
-import { Numbers, Close } from '@mui/icons-material';
import styles from './VisualizationTooltip.module.scss';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';
import {
@@ -64,7 +63,8 @@ export const VisualizationTooltip: React.FC<CardToolTipVisProps> = ({
{type === 'schema' && numberOfElements && (
<div className="px-4 py-1 border-b border-sec-200">
<div className="flex flex-row gap-1 items-center justify-between">
- <Icon component={<Numbers />} size={24} /> <span className="ml-auto text-right">{formatNumber(numberOfElements)}</span>
+ <Icon component="icon-[ic--baseline-numbers]" size={24} />{' '}
+ <span className="ml-auto text-right">{formatNumber(numberOfElements)}</span>
</div>
</div>
)}
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 af7deba698290f5d71aafc29ac68c391d370c36b..fea160aa1dad5b964ffce4938057a4b12ff9bdc6 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
@@ -3,7 +3,6 @@ import ColorPicker from '@graphpolaris/shared/lib/components/colorComponents/col
import { VisualizationSettingsPropTypes } from '@graphpolaris/shared/lib/vis/common';
import { MapProps } from '../../mapvis';
import { EntityPill, Icon, Input, RelationPill } from '@graphpolaris/shared/lib/components';
-import { SubdirectoryArrowRight } from '@mui/icons-material';
export default function ChoroplethOptions({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<MapProps>) {
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
diff --git a/libs/shared/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx
index 2007d3330d08f32dac4d3330ed5e30ea764e845e..cae0eb34ac26b97a0daf9a2ddb61ed22b1ac6e63 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/layers/heatmap-layer/HeatLayerOptions.tsx
@@ -1,8 +1,7 @@
import React, { useState, useMemo, useEffect } from 'react';
import { VisualizationSettingsPropTypes } from '@graphpolaris/shared/lib/vis/common';
import { MapProps } from '../../mapvis';
-import { Button, EntityPill, Icon, Input } from '@graphpolaris/shared/lib/components';
-import { SubdirectoryArrowRight, Visibility, VisibilityOff } from '@mui/icons-material';
+import { Button, EntityPill, Input } from '@graphpolaris/shared/lib/components';
export default function HeatLayerOptions({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<MapProps>) {
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
@@ -50,7 +49,7 @@ export default function HeatLayerOptions({ settings, graphMetadata, updateSettin
</div>
<div className="w-1/2">
<Button
- iconComponent={settings?.[nodeType].hidden ? <VisibilityOff /> : <Visibility />}
+ iconComponent={settings?.[nodeType].hidden ? 'icon-[ic--baseline-visibility-off]' : 'icon-[ic--baseline-visibility]'}
variant="ghost"
onClick={() => {
updateSettings({ [nodeType]: { ...settings?.[nodeType], hidden: !settings?.[nodeType].hidden as boolean } });
diff --git a/libs/shared/lib/vis/visualizations/mapvis/layers/icon-layer/IconOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/icon-layer/IconOptions.tsx
index 433c9b0f5ab57e8da2fe1b5e6bef0e8b5cb3328f..878dfd78738c60642ed2511519aa235fe8e57121 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/layers/icon-layer/IconOptions.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/layers/icon-layer/IconOptions.tsx
@@ -3,7 +3,6 @@ import ColorPicker from '@graphpolaris/shared/lib/components/colorComponents/col
import { VisualizationSettingsPropTypes } from '@graphpolaris/shared/lib/vis/common';
import { MapProps } from '../../mapvis';
import { EntityPill, Icon, Input, RelationPill } from '@graphpolaris/shared/lib/components';
-import { SubdirectoryArrowRight } from '@mui/icons-material';
export default function IconOptions({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<MapProps>) {
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
@@ -78,7 +77,7 @@ export default function IconOptions({ settings, graphMetadata, updateSettings }:
onChange={(val) => updateSettings({ [nodeType]: { ...settings?.[nodeType], lat: val as string } })}
/>
<div className="flex items-center gap-1">
- <Icon component={<SubdirectoryArrowRight />} size={16} color="text-secondary-300" />
+ <Icon component="icon-[ic--baseline-subdirectory-arrow-right]" size={16} color="text-secondary-300" />
<Input
label="Hidden"
type="boolean"
diff --git a/libs/shared/lib/vis/visualizations/mapvis/layers/node-layer/NodeOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/node-layer/NodeOptions.tsx
index 783788f826d5e83a063fb476f2b2e6d5feaaddad..0054a2f7dce4cd53eada0d3875d211564f2825b1 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/layers/node-layer/NodeOptions.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/layers/node-layer/NodeOptions.tsx
@@ -3,7 +3,6 @@ import ColorPicker from '@graphpolaris/shared/lib/components/colorComponents/col
import { MapProps } from '../../mapvis';
import { VisualizationSettingsPropTypes } from '@graphpolaris/shared/lib/vis/common';
import { EntityPill, Icon, Input } from '@graphpolaris/shared/lib/components';
-import { SubdirectoryArrowRight } from '@mui/icons-material';
export default function NodeOptions({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<MapProps>) {
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
@@ -81,7 +80,7 @@ export default function NodeOptions({ settings, graphMetadata, updateSettings }:
<div className="ml-2">
<div className="flex items-center gap-1">
- <Icon component={<SubdirectoryArrowRight />} size={16} color="text-secondary-300" />
+ <Icon component="icon-[ic--baseline-subdirectory-arrow-right]" size={16} color="text-secondary-300" />
<Input
label="Hidden"
type="boolean"
@@ -92,7 +91,7 @@ export default function NodeOptions({ settings, graphMetadata, updateSettings }:
<div>
<div className="flex items-center gap-1">
- <Icon component={<SubdirectoryArrowRight />} size={16} color="text-secondary-300" />
+ <Icon component="icon-[ic--baseline-subdirectory-arrow-right]" size={16} color="text-secondary-300" />
<span>Radius</span>
</div>
<Input
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 21d5a55231fdbee64a641d1668d5a1643c4d58c5..1de263ca59e0991ca8812d74ebb6c100362b801c 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
@@ -3,8 +3,6 @@ import ColorPicker from '@graphpolaris/shared/lib/components/colorComponents/col
import { VisualizationSettingsPropTypes } from '@graphpolaris/shared/lib/vis/common';
import { MapProps } from '../../mapvis';
import { Button, EntityPill, Icon, Input, RelationPill } from '@graphpolaris/shared/lib/components';
-import { SubdirectoryArrowRight, Visibility, VisibilityOff } from '@mui/icons-material';
-import { IconButton } from '@graphpolaris/shared/lib/components/buttons/button.stories';
export default function NodeLinkOptions({ settings, graphMetadata, updateSettings }: VisualizationSettingsPropTypes<MapProps>) {
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
@@ -72,7 +70,7 @@ export default function NodeLinkOptions({ settings, graphMetadata, updateSetting
updateValue={(val: number[]) => updateSettings({ [nodeType]: { ...settings?.[nodeType], color: val } })}
/>
<Button
- iconComponent={settings?.[nodeType]?.hidden ? <VisibilityOff /> : <Visibility />}
+ iconComponent={settings?.[nodeType]?.hidden ? 'icon-[ic--baseline-visibility-off]' : 'icon-[ic--baseline-visibility]'}
variant="ghost"
onClick={() => {
updateSettings({ [nodeType]: { ...settings?.[nodeType], hidden: !settings?.[nodeType]?.hidden as boolean } });
@@ -137,7 +135,7 @@ export default function NodeLinkOptions({ settings, graphMetadata, updateSetting
updateValue={(val: number[]) => updateSettings({ [edgeType]: { ...settings?.[edgeType], color: val } })}
/>
<Button
- iconComponent={settings?.[edgeType]?.hidden ? <VisibilityOff /> : <Visibility />}
+ iconComponent={settings?.[edgeType]?.hidden ? 'icon-[ic--baseline-visibility-off]' : 'icon-[ic--baseline-visibility]'}
variant="ghost"
onClick={() => {
updateSettings({ [edgeType]: { ...settings?.[edgeType], hidden: !settings?.[edgeType]?.hidden as boolean } });
@@ -159,7 +157,7 @@ export default function NodeLinkOptions({ settings, graphMetadata, updateSetting
<div>
<div className="flex items-center gap-1">
- <Icon component={<SubdirectoryArrowRight />} size={16} color="text-secondary-300" />
+ <Icon component="icon-[ic--baseline-subdirectory-arrow-right]" size={16} color="text-secondary-300" />
<span>Width</span>
</div>
<Input
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
index 5f547862142fd7fa2aba28fb73762945a563dd29..c4458e284b7c76b3d2ffb73eb693fb9630c89f2f 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
@@ -7,8 +7,8 @@ import { VISComponentType, VisualizationPropTypes } from '../../common';
import { layerTypes, createBaseMap } from './layers';
import { MapSettings } from './settings';
import { Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
-import { HighlightAlt, SearchOutlined } from '@mui/icons-material';
import SearchBar from './search';
+import { Icon } from '@graphpolaris/shared/lib/components';
export type MapProps = { layer: string; enableBrushing: boolean };
@@ -138,10 +138,10 @@ export const MapVis = ({ data, settings, handleSelect, graphMetadata }: Visualiz
<div className="w-full h-full flex-grow relative overflow-hidden">
<div className="absolute left-0 top-0 z-50 m-1">
<div className="cursor-pointer p-1 bg-white shadow-md rounded mb-1" onClick={() => setSelectingRectangle(true)}>
- <HighlightAlt />
+ <Icon component="icon-[ic--baseline-highlight-alt]" />
</div>
<div className="cursor-pointer p-1 bg-white shadow-md rounded" onClick={() => setIsSearching(!isSearching)}>
- <SearchOutlined />
+ <Icon component="icon-[ic--outline-search]" />
</div>
</div>
{isSearching && (