From a8df946321fb8fd6d04bb5c28bd649d89aa09897 Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Mon, 22 Jul 2024 18:46:12 +0200
Subject: [PATCH] fix: remove mui
---
apps/web/package.json | 1 -
.../components/CardToolTipVis/VisualizationTooltip.tsx | 4 ++--
.../VisualizationTooltip/VisualizationTooltip.tsx | 4 ++--
.../mapvis/layers/choropleth-layer/ChoroplethOptions.tsx | 1 -
.../mapvis/layers/heatmap-layer/HeatLayerOptions.tsx | 5 ++---
.../mapvis/layers/icon-layer/IconOptions.tsx | 3 +--
.../mapvis/layers/node-layer/NodeOptions.tsx | 5 ++---
.../mapvis/layers/nodelink-layer/NodeLinkOptions.tsx | 8 +++-----
libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx | 6 +++---
9 files changed, 15 insertions(+), 22 deletions(-)
diff --git a/apps/web/package.json b/apps/web/package.json
index 1f0cdc5ec..3f0075baf 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 53bebb390..a6e5fc675 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 21a08ab4a..699c3354a 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 af7deba69..fea160aa1 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 2007d3330..cae0eb34a 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 433c9b0f5..878dfd787 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 783788f82..0054a2f7d 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 21d5a5523..1de263ca5 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 5f5478621..c4458e284 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 && (
--
GitLab