From fa0e64ae541970bdcbd9befa34ec925eac84d208 Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Thu, 11 Jul 2024 18:58:57 +0200
Subject: [PATCH] feat: moving from mui to iconify
---
.../dbConnectionSelector.tsx | 21 ++-
.../DatabaseManagement/forms/settings.tsx | 4 +-
.../src/components/onboarding/onboarding.tsx | 3 +-
libs/config/package.json | 1 +
libs/config/tailwind.config.js | 3 +-
.../components/DesignGuides/styleGuide.mdx | 134 ++----------------
libs/shared/lib/components/Legend.tsx | 10 +-
libs/shared/lib/components/buttons/Button.tsx | 2 +-
.../lib/components/buttons/button.stories.tsx | 3 +-
.../components/buttons/buttons.module.scss | 7 +-
.../lib/components/color-mode/index.tsx | 3 +-
.../dropdowns/dropdowns.module.scss | 19 ---
.../dropdowns/dropdowns.module.scss.d.ts | 2 -
.../shared/lib/components/dropdowns/index.tsx | 4 +-
libs/shared/lib/components/forms/index.tsx | 3 +-
.../lib/components/icon/icon.stories.tsx | 23 ++-
libs/shared/lib/components/icon/index.tsx | 10 +-
libs/shared/lib/components/icon/overview.mdx | 22 ---
libs/shared/lib/components/info/index.tsx | 3 +-
.../lib/components/pagination/index.tsx | 9 +-
.../selectors/entityPillSelector.stories.tsx | 2 +-
.../selectors/entityPillSelector.tsx | 9 +-
.../authorization/dashboardAlerts.tsx | 10 +-
.../lib/querybuilder/panel/QueryBuilder.tsx | 35 +++--
.../queryBuilderLogicPillsPanel.tsx | 32 ++---
.../entitypill/QueryEntityPill.tsx | 3 +-
.../logicpill/QueryLogicPill.tsx | 1 -
.../relationpill/QueryRelationPill.tsx | 3 +-
.../pills/pilldropdown/PillDropdown.tsx | 21 ++-
.../pills/pilldropdown/PillDropdownItem.tsx | 2 +-
libs/shared/lib/schema/panel/Schema.tsx | 15 +-
.../popup/attribute-analytics-popup-menu.tsx | 1 -
.../attribute-analytics-popup-menu.tsx | 1 -
.../nodes/popup/popupmenus/filterbar.tsx | 1 -
libs/shared/lib/sidebar/index.tsx | 7 +-
libs/shared/lib/sidebar/search/SearchBar.tsx | 7 +-
.../vis/components/VisualizationTabBar.tsx | 20 ++-
.../vis/components/config/SelectionConfig.tsx | 3 +-
.../config/VisualizationSettings.tsx | 3 +-
libs/shared/lib/vis/views/NoData.tsx | 3 +-
.../lib/vis/visualizations/mapvis/mapvis.tsx | 4 +-
.../matrixvis/components/MatrixPixi.tsx | 1 -
.../nodelinkvis/components/NLPixi.tsx | 1 -
.../paohvis/components/HyperRangeBlock.tsx | 23 ++-
.../paohvis/components/RowLabels.tsx | 17 ++-
.../vis/visualizations/paohvis/paohvis.tsx | 9 +-
.../components/Scatterplot.tsx | 5 +-
.../configPanel/SemSubsConfigPanel.tsx | 13 +-
.../semSubsConfigPanel.stories.tsx | 2 +-
.../semanticsubstratesvis.tsx | 3 +-
.../tablevis/components/Table.tsx | 9 +-
.../vis/visualizations/tablevis/tablevis.tsx | 3 +-
libs/shared/package.json | 2 +-
libs/storybook/package.json | 9 +-
pnpm-lock.yaml | 19 ++-
55 files changed, 222 insertions(+), 363 deletions(-)
delete mode 100644 libs/shared/lib/components/dropdowns/dropdowns.module.scss
delete mode 100644 libs/shared/lib/components/dropdowns/dropdowns.module.scss.d.ts
diff --git a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
index a1feb5608..b56e21877 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
@@ -1,5 +1,4 @@
import React, { useEffect, useState } from 'react';
-import { Add, Delete, Settings, StorageOutlined } from '@mui/icons-material';
import { useAppDispatch, useSchemaGraph, useSessionCache, useAuthorizationCache } from '@graphpolaris/shared/lib/data-access';
import { deleteSaveState, selectSaveState } from '@graphpolaris/shared/lib/data-access/store/sessionSlice';
import { SettingsForm } from './forms/settings';
@@ -99,13 +98,13 @@ export default function DatabaseSelector({}) {
<p className="ml-2 truncate">Connecting to {session.saveStates[session.currentSaveState].name}</p>
</>
) : session.currentSaveState && session.currentSaveState in session.saveStates && session.currentSaveState !== nilUUID ? (
- <div className="flex items-center">
- <div className="relative self-center">
- <Icon component={<StorageOutlined />} size={20} />
- <div
- className={`absolute bottom-0 left-0 h-2 w-2 border border-light rounded-full ${session.testedSaveState[session.currentSaveState] === DatabaseStatus.tested ? 'bg-success-500' : 'bg-danger-500'}`}
+ <div className="flex">
+ <Icon component="icon-[ic--outline-storage]" size={20} className=" self-center" />
+ <span className="relative">
+ <span
+ className={`absolute bottom-0.5 right-3 h-2 w-2 border border-light rounded-full ${session.testedSaveState[session.currentSaveState] === DatabaseStatus.tested ? 'bg-success-500' : 'bg-danger-500'}`}
/>
- </div>
+ </span>
<p className="ml-2 truncate">{session.saveStates[session.currentSaveState].name}</p>
</div>
) : session.saveStates === undefined ? (
@@ -141,12 +140,12 @@ export default function DatabaseSelector({}) {
>
{session.saveStates && Object.keys(session.saveStates).length === 0 ? (
<>
- <Add />
+ <Icon component="icon-[ic--baseline-add]" size={24} />
<p className="ml-2">Add your first database</p>
</>
) : (
<>
- <Add />
+ <Icon component="icon-[ic--baseline-add]" size={24} />
<p className="ml-2">Add database</p>
</>
)}
@@ -207,7 +206,7 @@ export default function DatabaseSelector({}) {
>
<Tooltip>
<TooltipTrigger>
- <Settings />
+ <Icon component="icon-[ic--baseline-settings]" size={24} />
</TooltipTrigger>
<TooltipContent>
<p>Change the connection details</p>
@@ -230,7 +229,7 @@ export default function DatabaseSelector({}) {
>
<Tooltip>
<TooltipTrigger>
- <Delete />
+ <Icon component="icon-[ic--baseline-delete]" size={24} />
</TooltipTrigger>
<TooltipContent>
<p>Delete the database</p>
diff --git a/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx b/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx
index 259bf1193..48a711222 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/forms/settings.tsx
@@ -8,13 +8,13 @@ import {
useAuthorizationCache,
nilUUID,
} from '@graphpolaris/shared/lib/data-access';
-import { ErrorOutline } from '@mui/icons-material';
import { Dialog, DialogContent } from '@graphpolaris/shared/lib/components/layout';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
import { useImmer } from 'use-immer';
import { addSaveState, testedSaveState } from '@graphpolaris/shared/lib/data-access/store/sessionSlice';
import { DatabaseForm, INITIAL_SAVE_STATE } from './databaseForm';
import { SampleDatabaseSelector } from './mockSaveStates';
+import { Icon } from '@graphpolaris/shared';
type Connection = {
updating: boolean;
@@ -159,7 +159,7 @@ export const SettingsForm = (props: { onClose(): void; open: 'add' | 'update'; s
{!(connection.status === null) && (
<div className={`flex flex-col justify-center items-center`}>
<div className="flex justify-center items-center">
- {connection.verified === false && <ErrorOutline className="text-secondary-400" />}
+ {connection.verified === false && <Icon component="icon-[ic--baseline-error-outline]" className="text-secondary-400" />}
<p className="font-light text-sm text-secondary-400 ">{connection.status}</p>
</div>
{connection.verified === null && <progress className="progress w-56"></progress>}
diff --git a/apps/web/src/components/onboarding/onboarding.tsx b/apps/web/src/components/onboarding/onboarding.tsx
index d811f1df2..285cdebee 100644
--- a/apps/web/src/components/onboarding/onboarding.tsx
+++ b/apps/web/src/components/onboarding/onboarding.tsx
@@ -4,7 +4,6 @@ import { useLocation } from 'react-router-dom';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
import { useCases } from './use-cases';
import { useAuthorizationCache } from '@graphpolaris/shared/lib/data-access';
-import { Close } from '@mui/icons-material';
interface OnboardingState {
run?: boolean;
@@ -57,7 +56,7 @@ export function Onboarding({}) {
{showWalkthrough && (
<div className="bg-accent-light alert absolute bottom-5 left-5 w-fit cursor-pointer z-50">
<Button onClick={startWalkThrough} label={'Start a Tour'} variant="ghost" />
- <Button onClick={() => addWalkthroughCookie()} iconComponent={<Close />} variant="ghost" rounded />
+ <Button onClick={() => addWalkthroughCookie()} iconComponent="icon-[ic--baseline-close]" variant="ghost" rounded />
</div>
)}
<Joyride
diff --git a/libs/config/package.json b/libs/config/package.json
index 282d12d81..8844e33fa 100644
--- a/libs/config/package.json
+++ b/libs/config/package.json
@@ -7,6 +7,7 @@
"types": "src/index.ts",
"license": "MIT",
"devDependencies": {
+ "@iconify/tailwind": "^1.1.1",
"@tailwindcss/typography": "^0.5.10",
"daisyui": "^4.7.3",
"postcss": "^8.4.35",
diff --git a/libs/config/tailwind.config.js b/libs/config/tailwind.config.js
index a6e1334de..306e0bf0f 100644
--- a/libs/config/tailwind.config.js
+++ b/libs/config/tailwind.config.js
@@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */
import * as defaultTheme from 'tailwindcss/defaultTheme';
import { tailwindColors } from './src/colors';
+const { addDynamicIconSelectors } = require('@iconify/tailwind');
export default {
content: ['./index.html', 'src/**/*.{js,ts,jsx,tsx,mdx}', '../../libs/*/lib/**/*.{js,ts,jsx,tsx,mdx}'],
@@ -57,7 +58,7 @@ export default {
},
},
},
- plugins: [require('@tailwindcss/typography'), require('daisyui')],
+ plugins: [require('@tailwindcss/typography'), require('daisyui'), addDynamicIconSelectors({ scale: 0 })],
// daisyUI config (optional - here are the default values)
daisyui: {
themes: [
diff --git a/libs/shared/lib/components/DesignGuides/styleGuide.mdx b/libs/shared/lib/components/DesignGuides/styleGuide.mdx
index f461cac58..6847394b8 100644
--- a/libs/shared/lib/components/DesignGuides/styleGuide.mdx
+++ b/libs/shared/lib/components/DesignGuides/styleGuide.mdx
@@ -6,37 +6,6 @@ import { TextInput } from '@graphpolaris/shared/lib/components/inputs';
import { Icon } from '../icon/.';
import { visualizationColors } from 'config';
-import {
- Delete as DeleteIcon,
- DeleteOutlined as DeleteOutlinedIcon,
- DeleteRounded as DeleteRoundedIcon,
- DeleteTwoTone as DeleteTwoToneIcon,
- DeleteSharp as DeleteSharpIcon,
- Settings as SettingsIcon,
- PhotoCamera as PhotoCameraIcon,
- Add as AddIcon,
- Fullscreen as FullscreenIcon,
- FullscreenExit as FullscreenExitIcon,
- ContentCopy as ContentCopyIcon,
- Cached as CachedIcon,
- Info as InfoIcon,
- ErrorOutline as ErrorOutlineIcon,
- CheckCircleOutline as CheckCircleOutlineIcon,
- Search as SearchIcon,
- ArrowDropDown as ArrowDropDownIcon,
- ArrowDropUp as ArrowDropUpIcon,
- ArrowBack as ArrowBackIcon,
- ArrowForward as ArrowForwardIcon,
- Close as CloseIcon,
- Cancel as CancelIcon,
- KeyboardArrowDown as KeyboardArrowDownIcon,
- KeyboardArrowLeft as KeyboardArrowLeftIcon,
- KeyboardArrowRight as KeyboardArrowRightIcon,
- KeyboardArrowUp as KeyboardArrowUpIcon,
- CheckCircle as CheckCircleIcon,
-} from '@mui/icons-material';
-import { ArrowBack } from '@mui/icons-material';
-
<Meta title="Design guide" />
# Style Guide
@@ -639,123 +608,38 @@ this is a hsl color, if you want to use this color in a css file you can use the
## Icons
-GraphPolaris uses [Material UI](https://mui.com/material-ui/material-icons/) through an Icon component, where the Material UI icon is specified along its size:
+GraphPolaris uses Iconify's [Material UI](https://icon-sets.iconify.design/ic/) through an Icon component, where the icon is specified along its size:
<div className="w-32 m-5 mx-auto">
- <Icon component={<ArrowBack />} size={32} />
+ <Icon name="ArrowBack" component="icon-[ic--baseline-settings]" size={32} />
</div>
```jsx
-import Icon from '@graphpolaris/shared/lib/components/icon';
-<Icon component={<ArrowBack />} size={32} />;
+import { Icon } from '@graphpolaris/shared/lib/components/icon';
+<Icon name="ArrowBack" component="icon-[ic--baseline-settings]" size={32} />;
```
-There are 5 types of Icons in Material UI:
-
-<IconGallery>
- <IconItem name="Filled-Default">
- <DeleteIcon />
- </IconItem>
- <IconItem name="Outlined">
- <DeleteOutlinedIcon />
- </IconItem>
- <IconItem name="Rounded">
- <DeleteRoundedIcon />
- </IconItem>
- <IconItem name="TwoTone">
- <DeleteTwoToneIcon />
- </IconItem>
- <IconItem name="Sharp">
- <DeleteSharpIcon />
- </IconItem>
-</IconGallery>
-
GP, mainly, use < b > Filled < /b> and <b>Outlined</b >.
We ditinguish two usage scenarios:
--General app view.Elements already in use:
-
-<IconGallery>
- <IconItem name="Settings">
- <SettingsIcon/>
- </IconItem>
- <IconItem name="PhotoCamera">
- <PhotoCameraIcon/>
- </IconItem>
- <IconItem name="Add">
- <AddIcon/>
- </IconItem>
- <IconItem name="Fullscreen">
- <FullscreenIcon/>
- </IconItem>
- <IconItem name="FullscreenExit">
- <FullscreenExitIcon/>
- </IconItem>
- <IconItem name="Content Copy">
- <ContentCopyIcon/>
- </IconItem>
- <IconItem name="Cached">
- <CachedIcon/>
- </IconItem>
- <IconItem name="Info">
- <InfoIcon/>
- </IconItem>
- <IconItem name="Error Outline">
- <ErrorOutlineIcon/>
- </IconItem>
- <IconItem name="CheckCircleOutline">
- <CheckCircleOutlineIcon/>
- </IconItem>
- <IconItem name="Search">
- <SearchIcon/>
- </IconItem>
- <IconItem name="ArrowDropDown">
- <ArrowDropDownIcon/>
- </IconItem>
- <IconItem name="ArrowDropUp">
- <ArrowDropUpIcon/>
- </IconItem>
- <IconItem name="ArrowBack">
- <ArrowBackIcon/>
- </IconItem>
- <IconItem name="ArrowForward">
- <ArrowForwardIcon/>
- </IconItem>
- <IconItem name="Close">
- <CloseIcon/>
- </IconItem>
- <IconItem name="Cancel">
- <CancelIcon/>
- </IconItem>
- <IconItem name="KeyboardArrowDown">
- <KeyboardArrowDownIcon/>
- </IconItem>
- <IconItem name="KeyboardArrowLeft">
- <KeyboardArrowLeftIcon/>
- </IconItem>
- <IconItem name="KeyboardArrowRight">
- <KeyboardArrowRightIcon/>
- </IconItem>
- <IconItem name="KeyboardArrowUp">
- <KeyboardArrowUpIcon/>
- </IconItem>
-
-</IconGallery>
-
--Per component, Button component can have an icon(for more information go to Button's document):
+-Direct usage with the Icon component, as is shown in the example above.
+-Usage with a Button component which passes the icon as a prop:
+```jsx
<div className="w-32 m-5 mx-auto">
<Button
type="primary"
label="Next"
iconName="ArrowForward"
iconPosition="leading"
+ iconComponent="icon-[ic--baseline-settings]"
onClick={() => {
console.log('Button clicked!');
}}
/>
</div>
+```
## Border radius
diff --git a/libs/shared/lib/components/Legend.tsx b/libs/shared/lib/components/Legend.tsx
index 33aedb864..ecb0d1570 100644
--- a/libs/shared/lib/components/Legend.tsx
+++ b/libs/shared/lib/components/Legend.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Close, ExpandLess, ExpandMore } from '@mui/icons-material';
+import { Icon } from './icon';
type Props = {
title?: string;
@@ -22,10 +22,14 @@ export const Legend = ({ title = DEFAULT_TITLE, screenPosition = DEFAULT_SCREEN_
<h4 className="font-bold">{title}</h4>
<div>
<button className="btn btn-outline btn-xs" onClick={() => setExpand(!expand)}>
- {expand ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
+ {expand ? (
+ <Icon component="icon-[ic--baseline-expand-less]" size={20} />
+ ) : (
+ <Icon component="icon-[ic--baseline-expand-more]" size={20} />
+ )}
</button>
<button className="btn btn-primary btn-xs ml-1" onClick={() => setOpen(false)}>
- <Close fontSize="small" />
+ <Icon component="icon-[ic--baseline-close]" size={20} />
</button>
</div>
</div>
diff --git a/libs/shared/lib/components/buttons/Button.tsx b/libs/shared/lib/components/buttons/Button.tsx
index f607db885..2b0d0d7b3 100644
--- a/libs/shared/lib/components/buttons/Button.tsx
+++ b/libs/shared/lib/components/buttons/Button.tsx
@@ -14,7 +14,7 @@ type ButtonProps = {
block?: boolean;
onClick?: (e: any) => void;
href?: string;
- iconComponent?: React.ReactElement;
+ iconComponent?: React.ReactElement | string;
iconPosition?: 'leading' | 'trailing';
ariaLabel?: string;
children?: React.ReactNode;
diff --git a/libs/shared/lib/components/buttons/button.stories.tsx b/libs/shared/lib/components/buttons/button.stories.tsx
index 69931feb8..6dc5fa42a 100644
--- a/libs/shared/lib/components/buttons/button.stories.tsx
+++ b/libs/shared/lib/components/buttons/button.stories.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '.';
-import { ArrowBack } from '@mui/icons-material';
const meta: Meta<typeof Button> = {
title: 'Components/Button',
@@ -99,7 +98,7 @@ export const IconButton: Story = {
args: {
variantType: 'primary',
variant: 'outline',
- iconComponent: <ArrowBack />,
+ iconComponent: 'icon-[ic--baseline-arrow-back]',
rounded: true,
},
};
diff --git a/libs/shared/lib/components/buttons/buttons.module.scss b/libs/shared/lib/components/buttons/buttons.module.scss
index 3c65332d2..32d79309d 100644
--- a/libs/shared/lib/components/buttons/buttons.module.scss
+++ b/libs/shared/lib/components/buttons/buttons.module.scss
@@ -45,35 +45,32 @@
}
.btn-icon-only {
line-height: 1;
+ @apply p-1;
}
.btn-lg {
@apply text-lg h-10 gap-1.5;
&.btn-icon-only {
- @apply w-10;
}
}
.btn-md {
@apply text-base h-9 gap-1;
&.btn-icon-only {
- @apply w-9;
}
}
.btn-sm {
@apply text-sm h-8 gap-1;
&.btn-icon-only {
- @apply w-8;
}
}
.btn-xs {
@apply text-xs h-6 gap-0.5;
&.btn-icon-only {
- @apply w-6;
}
}
.btn-2xs {
@apply text-2xs h-4 gap-0.5;
&.btn-icon-only {
- @apply w-4 p-0;
+ @apply p-0;
}
}
diff --git a/libs/shared/lib/components/color-mode/index.tsx b/libs/shared/lib/components/color-mode/index.tsx
index c55ceb456..7854d1f05 100644
--- a/libs/shared/lib/components/color-mode/index.tsx
+++ b/libs/shared/lib/components/color-mode/index.tsx
@@ -1,6 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Button } from '../buttons'; // Adjust the import path according to your project structure
-import { Apps as AppsIcon, DarkMode, LightMode, Settings as SettingsIcon } from '@mui/icons-material';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
const ColorMode = () => {
@@ -39,7 +38,7 @@ const ColorMode = () => {
const toggleTheme = () => {
setTheme((currentTheme) => (currentTheme === 'light-mode' ? 'dark-mode' : 'light-mode'));
};
- const iconComponent = theme === 'dark-mode' ? <DarkMode /> : <LightMode />;
+ const iconComponent = theme === 'dark-mode' ? 'icon-[ic--baseline-dark-mode]' : 'icon-[ic--baseline-light-mode]';
return (
<TooltipProvider delayDuration={0}>
diff --git a/libs/shared/lib/components/dropdowns/dropdowns.module.scss b/libs/shared/lib/components/dropdowns/dropdowns.module.scss
deleted file mode 100644
index c051a7c9f..000000000
--- a/libs/shared/lib/components/dropdowns/dropdowns.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.dropdown {
-}
-.dropdown-item {
- // //todo: color
- // //@apply cursor-pointer block px-4 py-2 text-sm bg-secondary-200;
- // @apply cursor-pointer block text-sm px-2 py-1 rounded hover:bg-secondary-200 border-0;
-}
-.dropdown-container {
- // width: inherit;
- // max-width: 100%;
- // @apply absolute z-10 mt-2 origin-top-right rounded-sm shadow-lg truncate;
- // ul {
- // //todo: color
- // @apply divide-y;
- // //@apply divide-y divide-secondary-100;
- // li {
- // }
- // }
-}
diff --git a/libs/shared/lib/components/dropdowns/dropdowns.module.scss.d.ts b/libs/shared/lib/components/dropdowns/dropdowns.module.scss.d.ts
deleted file mode 100644
index 5fc8829cc..000000000
--- a/libs/shared/lib/components/dropdowns/dropdowns.module.scss.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-declare const classNames: {};
-export = classNames;
diff --git a/libs/shared/lib/components/dropdowns/index.tsx b/libs/shared/lib/components/dropdowns/index.tsx
index 8fb237c6e..9d098bf7c 100644
--- a/libs/shared/lib/components/dropdowns/index.tsx
+++ b/libs/shared/lib/components/dropdowns/index.tsx
@@ -1,7 +1,5 @@
import React, { useState, useEffect, useRef, ReactNode } from 'react';
-import styles from './dropdowns.module.scss';
import { Icon } from '../icon';
-import { ArrowDropDown } from '@mui/icons-material';
import { PopoverContent, PopoverTrigger, Popover, PopoverOptions } from '../layout/Popover';
export const DropdownContainer = ({ children, ...props }: { children: React.ReactNode } & PopoverOptions) => {
@@ -48,7 +46,7 @@ export function DropdownTrigger({
className={`inline-flex w-full truncate justify-between items-center gap-x-1.5 ${variantClass} ${textSizeClass} ${paddingClass} text-secondary-900 shadow-sm hover:bg-secondary-50 disabled:bg-secondary-100 disabled:cursor-not-allowed disabled:text-secondary-400 pl-1 truncate cursor-pointer${className ? ` ${className}` : ''}`}
>
<span className={`text-${size}`}>{title}</span>
- <Icon component={<ArrowDropDown />} size={16} />
+ <Icon component="icon-[ic--baseline-arrow-drop-down]" size={16} />
</div>
);
diff --git a/libs/shared/lib/components/forms/index.tsx b/libs/shared/lib/components/forms/index.tsx
index 366b045d1..05330fadb 100644
--- a/libs/shared/lib/components/forms/index.tsx
+++ b/libs/shared/lib/components/forms/index.tsx
@@ -1,6 +1,5 @@
import React, { PropsWithChildren } from 'react';
import { Button } from '../buttons';
-import { Close } from '@mui/icons-material';
/** @deprecated */
export const FormDiv = React.forwardRef<HTMLDivElement, PropsWithChildren<{ className?: string; hAnchor?: string; offset?: string }>>(
@@ -84,7 +83,7 @@ export const FormTitle = ({ children, title, onClose }: PropsWithChildren<{ titl
return (
<div className="font-semibold p-5 py-0 flex w-full">
<h2 className="w-full">{title}</h2>
- {onClose && <Button rounded variant="ghost" iconComponent={<Close />} onClick={() => onClose()} />}
+ {onClose && <Button rounded variant="ghost" iconComponent="icon-[ic--baseline-close]" onClick={() => onClose()} />}
</div>
);
};
diff --git a/libs/shared/lib/components/icon/icon.stories.tsx b/libs/shared/lib/components/icon/icon.stories.tsx
index 9277a7c9f..623f6d5fd 100644
--- a/libs/shared/lib/components/icon/icon.stories.tsx
+++ b/libs/shared/lib/components/icon/icon.stories.tsx
@@ -1,8 +1,7 @@
import { StoryObj, Meta } from '@storybook/react';
import { Icon } from '../icon';
-import { ArrowBack } from '@mui/icons-material';
-import { CarbonStringInteger } from '@graphpolaris/shared/lib/assets/carbonIcons/carbonIcons';
-const Component: Meta<typeof Icon> = {
+
+export default {
title: 'Components/Icon',
component: Icon,
argTypes: {
@@ -16,18 +15,12 @@ const Component: Meta<typeof Icon> = {
},
},
decorators: [(Story) => <div className="p-5">{Story()}</div>],
-};
-
-export default Component;
-type Story = StoryObj<typeof Component>;
+} as Meta;
-export const MUIIcon: Story = (args: any) => {
- return <Icon component={<ArrowBack />} size={24} {...args} />;
-};
+type Story = StoryObj<typeof Icon>;
-export const CarbonIcon: Story = (args: any) => {
- return <Icon component={<CarbonStringInteger />} size={24} {...args} />;
+export const MUIIcon: Story = {
+ args: {
+ component: 'icon-[ic--baseline-settings]',
+ },
};
-
-MUIIcon.args = {};
-CarbonIcon.args = {};
diff --git a/libs/shared/lib/components/icon/index.tsx b/libs/shared/lib/components/icon/index.tsx
index aa206f3a0..c4015c436 100644
--- a/libs/shared/lib/components/icon/index.tsx
+++ b/libs/shared/lib/components/icon/index.tsx
@@ -4,19 +4,23 @@ import { SVGProps } from 'react';
// Define Sizes and IconProps types
export type Sizes = 12 | 14 | 16 | 20 | 24 | 28 | 32 | 40;
export type IconProps = SVGProps<SVGSVGElement> & {
- component: ReactNode | ReactElement<any>;
+ component?: ReactNode | ReactElement<any> | string;
size?: Sizes;
color?: string;
};
// Icon component definition
-export const Icon: React.FC<IconProps> = ({ component, size = 24, color, ...props }) => {
+export const Icon = ({ component, size = 24, color, ...props }: IconProps) => {
if (!component) {
console.error('No icon found');
return <div></div>;
}
- const style = { fontSize: size, color };
+ const style = { fontSize: size, color, width: size, height: size };
+ if (typeof component === 'string') {
+ // return <span className={'icon-[material-symbols--fullscreen] absolute text-sm'}></span>;
+ return <span className={component + ' ' + props.className} style={style}></span>;
+ }
// Check if component is a valid React element
if (React.isValidElement(component)) {
diff --git a/libs/shared/lib/components/icon/overview.mdx b/libs/shared/lib/components/icon/overview.mdx
index 5dd08be20..e69de29bb 100644
--- a/libs/shared/lib/components/icon/overview.mdx
+++ b/libs/shared/lib/components/icon/overview.mdx
@@ -1,22 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as IconStories from './icon.stories';
-import { Icon } from '../icon';
-
-import { ArrowBack } from '@mui/icons-material';
-
-<Meta title="Components/Icon" component={Icon} />
-
-# Icon Component
-
-The `Icon` component is used to display icons in the application in one of the following sizes:
-16px, 20px, 24px, 28px, 32px, 40px
-
-## Usage
-
-<div className="w-52 m-5">
- <Icon component={<ArrowBack />} size={24} />
-</div>
-
-```jsx
-<Icon component={<ArrowBack />} size={24} />
-```
diff --git a/libs/shared/lib/components/info/index.tsx b/libs/shared/lib/components/info/index.tsx
index 32c5d2ba3..13f1ed608 100644
--- a/libs/shared/lib/components/info/index.tsx
+++ b/libs/shared/lib/components/info/index.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import { Icon } from '../icon';
import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
-import { InfoOutlined } from '@mui/icons-material';
type Props = {
tooltip: string;
@@ -12,7 +11,7 @@ export default function Info({ tooltip, placement = 'left' }: Props) {
return (
<Tooltip placement={placement}>
<TooltipTrigger>
- <Icon component={<InfoOutlined />} size={14} />
+ <Icon component="icon-[ic--outline-info]" size={14} />
</TooltipTrigger>
<TooltipContent>
<p>{tooltip}</p>
diff --git a/libs/shared/lib/components/pagination/index.tsx b/libs/shared/lib/components/pagination/index.tsx
index f08bb38f6..b130b6a1a 100644
--- a/libs/shared/lib/components/pagination/index.tsx
+++ b/libs/shared/lib/components/pagination/index.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { Button } from '../buttons';
-import { ArrowBack, ArrowForward, ArrowUpward, ArrowDownward } from '@mui/icons-material';
export type PaginationProps = {
currentPage: number;
@@ -35,8 +34,8 @@ export const Pagination: React.FC<PaginationProps> = ({
}
};
- const BackIcon = arrangement === 'vertical' ? ArrowUpward : ArrowBack;
- const ForwardIcon = arrangement === 'vertical' ? ArrowDownward : ArrowForward;
+ const backIcon = arrangement === 'vertical' ? 'icon-[ic--baseline-arrow-upward]' : 'icon-[ic--baseline-arrow-back]';
+ const forwardIcon = arrangement === 'vertical' ? 'icon-[ic--baseline-arrow-downward]' : 'icon-[ic--baseline-arrow-forward]';
return (
<div
@@ -50,7 +49,7 @@ export const Pagination: React.FC<PaginationProps> = ({
size={'sm'}
label="Previous"
variant="outline"
- iconComponent={<BackIcon />}
+ iconComponent={backIcon}
onClick={goToPreviousPage}
disabled={currentPage === 1}
/>
@@ -58,7 +57,7 @@ export const Pagination: React.FC<PaginationProps> = ({
size={'sm'}
label="Next"
variant="outline"
- iconComponent={<ForwardIcon />}
+ iconComponent={forwardIcon}
iconPosition="trailing"
onClick={goToNextPage}
disabled={currentPage === totalPages || numItemsArrayReal === totalItems}
diff --git a/libs/shared/lib/components/selectors/entityPillSelector.stories.tsx b/libs/shared/lib/components/selectors/entityPillSelector.stories.tsx
index 1925d1fff..26bedb47e 100644
--- a/libs/shared/lib/components/selectors/entityPillSelector.stories.tsx
+++ b/libs/shared/lib/components/selectors/entityPillSelector.stories.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
-import { EntityPillSelector, EntityPillSelectorProps } from './entityPillSelector';
+import { EntityPillSelector } from './entityPillSelector';
const metaPillDropdown: Meta<typeof EntityPillSelector> = {
component: EntityPillSelector,
diff --git a/libs/shared/lib/components/selectors/entityPillSelector.tsx b/libs/shared/lib/components/selectors/entityPillSelector.tsx
index 998294d88..6c83c168b 100644
--- a/libs/shared/lib/components/selectors/entityPillSelector.tsx
+++ b/libs/shared/lib/components/selectors/entityPillSelector.tsx
@@ -1,6 +1,5 @@
import React, { useRef, useState } from 'react';
import { Button } from '../buttons';
-import { ArrowDropDown } from '@mui/icons-material';
import { EntityPill } from '@graphpolaris/shared/lib/components/pills/Pill';
import { DropdownContainer, DropdownItemContainer, DropdownTrigger, DropdownItem } from '../dropdowns';
@@ -31,7 +30,13 @@ export function EntityPillSelector({ dropdownNodes, onSelectOption, selectedNode
title={
<div className="flex flex-row items-center justify-between pointer-events-none">
<span>{selectedNode || 'Choose a node:'}</span>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<ArrowDropDown />} onClick={handleButtonClick} />
+ <Button
+ variantType="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent="icon-[ic--baseline-arrow-drop-down]"
+ onClick={handleButtonClick}
+ />
</div>
}
/>
diff --git a/libs/shared/lib/data-access/authorization/dashboardAlerts.tsx b/libs/shared/lib/data-access/authorization/dashboardAlerts.tsx
index 93839e9c0..5d3edcd0e 100644
--- a/libs/shared/lib/data-access/authorization/dashboardAlerts.tsx
+++ b/libs/shared/lib/data-access/authorization/dashboardAlerts.tsx
@@ -1,10 +1,10 @@
import React, { ReactNode, useEffect, useState, useImperativeHandle, useRef } from 'react';
import { useImmer } from 'use-immer';
-import { CheckCircleOutline as CheckCircleOutlineIcon, ErrorOutline as ErrorOutlineIcon } from '@mui/icons-material';
import { useAppDispatch, useConfig } from '../store';
import { removeLastError, removeLastInfo, removeLastSuccess, removeLastWarning } from '../store/configSlice';
import { includes } from 'lodash-es';
import { ReceiveMessageI } from '../broker/types';
+import { Icon } from '../../components';
type Message = {
message: ReactNode;
@@ -68,7 +68,7 @@ export const DashboardAlerts = (props: { timer?: number }) => {
{
message: (
<>
- <ErrorOutlineIcon /> {config.errors?.[config.errors.length - 1] || 'Sever Error'}
+ <Icon component="icon-[ic--baseline-error-outline]" /> {config.errors?.[config.errors.length - 1] || 'Sever Error'}
</>
),
className: 'alert-error',
@@ -86,7 +86,7 @@ export const DashboardAlerts = (props: { timer?: number }) => {
{
message: (
<>
- <ErrorOutlineIcon /> {config.warnings[config.warnings.length - 1]}
+ <Icon component="icon-[ic--baseline-error-outline]" /> {config.warnings[config.warnings.length - 1]}
</>
),
className: 'alert-warning',
@@ -104,7 +104,7 @@ export const DashboardAlerts = (props: { timer?: number }) => {
{
message: (
<>
- <CheckCircleOutlineIcon /> {config.infos[config.infos.length - 1]}
+ <Icon component="icon-[ic--baseline-check-circle-outline]" /> {config.infos[config.infos.length - 1]}
</>
),
className: 'alert-success bg-primary',
@@ -122,7 +122,7 @@ export const DashboardAlerts = (props: { timer?: number }) => {
{
message: (
<>
- <CheckCircleOutlineIcon /> {config.successes[config.successes.length - 1]}
+ <Icon component="icon-[ic--baseline-check-circle-outline]" /> {config.successes[config.successes.length - 1]}
</>
),
className: 'alert-success',
diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
index 675f1ba4f..f79f55f86 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
@@ -39,7 +39,6 @@ import { QueryBuilderLogicPillsPanel } from './querysidepanel/queryBuilderLogicP
import { QueryBuilderRelatedNodesPanel } from './querysidepanel/queryBuilderRelatedNodesPanel';
import { QueryMLDialog } from './querysidepanel/queryMLDialog';
import { ConnectingNodeDataI } from './utils/connectorDrop';
-import { CameraAlt, Cached, Difference, ImportExport, Lightbulb, Settings, Fullscreen, Delete } from '@mui/icons-material';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
import { resultSetFocus } from '../../data-access/store/interactionSlice';
import { QueryBuilderDispatcherContext } from './QueryBuilderDispatcher';
@@ -479,7 +478,13 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fitView} />
+ <Button
+ variantType="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent="icon-[ic--baseline-fullscreen]"
+ onClick={fitView}
+ />
</TooltipTrigger>
<TooltipContent>
<p>Fit to screen</p>
@@ -487,7 +492,13 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
</Tooltip>
<Tooltip>
<TooltipTrigger>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Delete />} onClick={() => clearAllNodes()} />
+ <Button
+ variantType="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent="icon-[ic--baseline-delete]"
+ onClick={() => clearAllNodes()}
+ />
</TooltipTrigger>
<TooltipContent>
<p>Clear query panel</p>
@@ -499,7 +510,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<CameraAlt />}
+ iconComponent="icon-[ic--baseline-camera-alt]"
onClick={(event) => {
event.stopPropagation();
}}
@@ -515,7 +526,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<ImportExport />}
+ iconComponent="icon-[ic--baseline-import-export]"
onClick={(event) => {
event.stopPropagation();
applyLayout();
@@ -530,7 +541,13 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
<PopoverTrigger>
<Tooltip>
<TooltipTrigger>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Settings />} className="query-settings" />
+ <Button
+ variantType="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent="icon-[ic--baseline-settings]"
+ className="query-settings"
+ />
</TooltipTrigger>
<TooltipContent>
<p>Query builder settings</p>
@@ -547,7 +564,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<Cached />}
+ iconComponent="icon-[ic--baseline-cached]"
onClick={(event) => {
event.stopPropagation();
if (props.onRunQuery) props.onRunQuery();
@@ -564,7 +581,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<Difference />}
+ iconComponent="icon-[ic--baseline-difference]"
onClick={(event) => {
event.stopPropagation();
if (toggleSettings === 'logic') setToggleSettings(undefined);
@@ -580,7 +597,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
<PopoverTrigger>
<Tooltip>
<TooltipTrigger>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Lightbulb />} />
+ <Button variantType="secondary" variant="ghost" size="xs" iconComponent="icon-[ic--baseline-lightbulb]" />
</TooltipTrigger>
<TooltipContent disabled={toggleSettings === 'ml'}>
<p>Machine learning</p>
diff --git a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderLogicPillsPanel.tsx b/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderLogicPillsPanel.tsx
index 0b9f7cff8..fb74fe2cd 100644
--- a/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderLogicPillsPanel.tsx
+++ b/libs/shared/lib/querybuilder/panel/querysidepanel/queryBuilderLogicPillsPanel.tsx
@@ -1,18 +1,10 @@
-import {
- FilterAlt as FilterAltIcon,
- Functions as FunctionsIcon,
- GridOn as GridOnIcon,
- Numbers as NumbersIcon,
- Abc as AbcIcon,
-} from '@mui/icons-material';
-
import { useState } from 'react';
import { AllLogicDescriptions, AllLogicMap, QueryElementTypes, SchemaReactflowLogicNode, toHandleData } from '../../model';
import { ConnectingNodeDataI } from '../utils/connectorDrop';
import { useQuerybuilderGraph } from '@graphpolaris/shared/lib/data-access';
import { toQuerybuilderGraphology, setQuerybuilderGraphology } from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice';
import { useDispatch } from 'react-redux';
-import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../..';
+import { Button, Icon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../..';
export const QueryBuilderLogicPillsPanel = (props: {
reactFlowWrapper: HTMLDivElement | null;
@@ -40,29 +32,29 @@ export const QueryBuilderLogicPillsPanel = (props: {
{
title: 'aggregation',
description: 'Aggregation Functions',
- icon: <GridOnIcon fontSize="small" />,
+ icon: 'icon-[ic--baseline-grid-on]',
},
{
title: 'function',
description: 'Math Functions',
- icon: <FunctionsIcon fontSize="small" />,
+ icon: 'icon-[ic--baseline-functions]',
},
{
title: 'filter',
description: 'Filter Functions',
- icon: <FilterAltIcon fontSize="small" />,
+ icon: 'icon-[ic--baseline-filter-alt]',
},
];
const dataTypes = [
{
title: 'number',
description: 'Number',
- icon: <NumbersIcon fontSize="small" />,
+ icon: 'icon-[ic--baseline-numbers]',
},
{
title: 'string',
description: 'Text',
- icon: <AbcIcon fontSize="small" />,
+ icon: 'icon-[ic--baseline-abc]',
},
].filter((item) => !filterType || item.title === filterType);
@@ -220,16 +212,16 @@ export const QueryBuilderLogicPillsPanel = (props: {
>
{item.icon && (
<div className="w-[1rem] rounded-sm justify-center flex">
- <span>{item.icon}</span>
+ <Icon component={item.icon} size={20} />
</div>
)}
<span className="w-full">{item.name}</span>
<span className="flex scale-75">
- {item.key.toLowerCase().includes('filter') && <FilterAltIcon fontSize="small" />}
- {item.key.toLowerCase().includes('function') && <FunctionsIcon fontSize="small" />}
- {item.key.toLowerCase().includes('aggregation') && <GridOnIcon fontSize="small" />}
- {item.key.toLowerCase().includes('number') && <NumbersIcon fontSize="small" />}
- {item.key.toLowerCase().includes('string') && <AbcIcon fontSize="small" />}
+ {item.key.toLowerCase().includes('filter') && <Icon component="icon-[ic--baseline-filter-alt]" size={20} />}
+ {item.key.toLowerCase().includes('function') && <Icon component="icon-[ic--baseline-functions]" size={20} />}
+ {item.key.toLowerCase().includes('aggregation') && <Icon component="icon-[ic--baseline-grid-on]" size={20} />}
+ {item.key.toLowerCase().includes('number') && <Icon component="icon-[ic--baseline-numbers]" size={20} />}
+ {item.key.toLowerCase().includes('string') && <Icon component="icon-[ic--baseline-abc]" size={20} />}
</span>
</span>
</li>
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx
index ae777b716..993108329 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/QueryEntityPill.tsx
@@ -4,7 +4,6 @@ import { Handle, Position, useUpdateNodeInternals } from 'reactflow';
import { NodeAttribute, SchemaReactflowEntityNode, toHandleId } from '../../../model';
import { PillDropdown } from '../../pilldropdown/PillDropdown';
import { Button, DropdownContainer, DropdownItemContainer, DropdownTrigger, EntityPill } from '@graphpolaris/shared/lib/components';
-import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
/**
* Component to render an entity flow element
@@ -36,7 +35,7 @@ export const QueryEntityPill = React.memo((node: SchemaReactflowEntityNode) => {
variantType="secondary"
variant="ghost"
size="2xs"
- iconComponent={openDropdown ? <ArrowDropUp /> : <ArrowDropDown />}
+ iconComponent={openDropdown ? 'icon-[ic--baseline-arrow-drop-up]' : 'icon-[ic--baseline-arrow-drop-down]'}
onMouseDownCapture={(e) => {
e.stopPropagation();
e.preventDefault();
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
index f17b0e705..14370915c 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx
@@ -7,7 +7,6 @@ import { styleHandleMap } from '../../utils';
import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice';
import { LogicInput } from './LogicInput';
import { Button, DropdownTrigger, Input, LogicPill } from '@graphpolaris/shared/lib/components';
-import { ArrowDropDown } from '@mui/icons-material';
import { QueryBuilderDispatcherContext } from '../../../panel/QueryBuilderDispatcher';
export function QueryLogicPill(node: SchemaReactflowLogicNode) {
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx
index 1fd01d879..1f4ecc154 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/QueryRelationPill.tsx
@@ -6,7 +6,6 @@ import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@graphpolar
import { PillDropdown } from '../../pilldropdown/PillDropdown';
import { Button, DropdownContainer, DropdownTrigger, RelationPill } from '@graphpolaris/shared/lib/components';
import { Handle, Position } from 'reactflow';
-import { ArrowDropUp, ArrowDropDown } from '@mui/icons-material';
import { pillWidth } from '@graphpolaris/shared/lib/components/pills/pill.const';
export const QueryRelationPill = memo((node: SchemaReactflowRelationNode) => {
@@ -72,7 +71,7 @@ export const QueryRelationPill = memo((node: SchemaReactflowRelationNode) => {
variantType="secondary"
variant="ghost"
size="2xs"
- iconComponent={openDropdown ? <ArrowDropUp /> : <ArrowDropDown />}
+ iconComponent={openDropdown ? 'icon-[ic--baseline-arrow-drop-up]' : 'icon-[ic--baseline-arrow-drop-down]'}
onMouseDownCapture={(e) => {
e.stopPropagation();
e.preventDefault();
diff --git a/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx b/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx
index 086858584..80ec77455 100644
--- a/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx
+++ b/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx
@@ -7,7 +7,6 @@ import {
SchemaReactflowEntityNode,
SchemaReactflowRelationNode,
} from '../../model';
-import { Abc, CalendarToday, Map, Numbers, Place, QuestionMarkOutlined } from '@mui/icons-material';
import { Button, TextInput, useAppDispatch, useQuerybuilderAttributesShown } from '../../..';
import { attributeShownToggle } from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice';
import { isEqual } from 'lodash-es';
@@ -24,15 +23,15 @@ type PillDropdownProps = {
};
type IconMapType = {
- [key: string]: ReactElement;
+ [key: string]: string | undefined;
};
const IconMap: IconMapType = {
- temporal: <CalendarToday />,
- spatial: <Map />,
- numerical: <Numbers />,
- categorical: <Abc />,
- default: <Place />,
+ temporal: 'icon-[ic--baseline-calendar-today]',
+ spatial: 'icon-[ic--baseline-map]',
+ numerical: 'icon-[ic--baseline-numbers]',
+ categorical: 'icon-[ic--baseline-abc]',
+ default: 'icon-[ic--baseline-place]',
};
export const PillDropdown = (props: PillDropdownProps) => {
@@ -60,11 +59,9 @@ export const PillDropdown = (props: PillDropdownProps) => {
mr={props.mr}
className={props.className}
icon={
- props.attributes[i].handleData?.attributeDimension ? (
- IconMap[props.attributes[i].handleData.attributeDimension || 0]
- ) : (
- <QuestionMarkOutlined />
- )
+ props.attributes[i].handleData?.attributeDimension
+ ? IconMap[props.attributes[i].handleData.attributeDimension || 0]
+ : 'icon-[ic--outline-question-mark]'
}
/>
);
diff --git a/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdownItem.tsx b/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdownItem.tsx
index 6304229d1..55e9938e5 100644
--- a/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdownItem.tsx
+++ b/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdownItem.tsx
@@ -17,7 +17,7 @@ type PillDropdownItemProps = {
node: SchemaReactflowEntityNode | SchemaReactflowRelationNode;
className?: string;
mr?: number;
- icon: ReactElement;
+ icon: string | undefined;
};
export const PillDropdownItem = (props: PillDropdownItemProps) => {
diff --git a/libs/shared/lib/schema/panel/Schema.tsx b/libs/shared/lib/schema/panel/Schema.tsx
index ca35b37ad..cd8bdbc39 100644
--- a/libs/shared/lib/schema/panel/Schema.tsx
+++ b/libs/shared/lib/schema/panel/Schema.tsx
@@ -10,7 +10,6 @@ import { SelfEdge } from '../pills/edges/self-edge';
import { SchemaEntityPill } from '../pills/nodes/entity/SchemaEntityPill';
import { SchemaRelationPill } from '../pills/nodes/relation/SchemaRelationPill';
import { SchemaSettings } from './SchemaSettings';
-import { Settings, ContentCopy, Fullscreen, Remove } from '@mui/icons-material';
import { AlgorithmToLayoutProvider, AllLayoutAlgorithms, LayoutFactory } from '../../graph-layout';
import { ConnectionLine, ConnectionDragLine } from '../../querybuilder';
import { schemaExpandRelation, schemaGraphology2Reactflow } from '../schema-utils';
@@ -142,7 +141,7 @@ export const Schema = (props: Props) => {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<Remove />}
+ iconComponent="icon-[ic--baseline-remove]"
onClick={() => {
if (props.onRemove) props.onRemove();
}}
@@ -158,7 +157,7 @@ export const Schema = (props: Props) => {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<ContentCopy />}
+ iconComponent="icon-[ic--baseline-content-copy]"
onClick={() => {
// Copy the schema to the clipboard
navigator.clipboard.writeText(JSON.stringify(schemaGraph, null, 2));
@@ -175,7 +174,7 @@ export const Schema = (props: Props) => {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<Fullscreen />}
+ iconComponent="icon-[ic--baseline-fullscreen]"
onClick={() => {
fitView();
}}
@@ -189,7 +188,13 @@ export const Schema = (props: Props) => {
<PopoverTrigger>
<Tooltip>
<TooltipTrigger>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Settings />} className="schema-settings" />
+ <Button
+ variantType="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent="icon-[ic--baseline-settings]"
+ className="schema-settings"
+ />
</TooltipTrigger>
<TooltipContent>
<p>Schema settings</p>
diff --git a/libs/shared/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.tsx b/libs/shared/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.tsx
index fa5325917..f063bbcbe 100644
--- a/libs/shared/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.tsx
+++ b/libs/shared/lib/schema/pills/nodes/popup/attribute-analytics-popup-menu.tsx
@@ -8,7 +8,6 @@
/* The comment above was added so the code coverage wouldn't count this file towards code coverage.
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import { ExpandMore, Visibility } from '@mui/icons-material';
import React, { ReactElement } from 'react';
import { AttributeAnalyticsData, AttributeWithData, NodeType } from '../../../model/reactflow';
import { NodeProps } from 'reactflow';
diff --git a/libs/shared/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.tsx b/libs/shared/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.tsx
index 97eade305..afa86bfc9 100644
--- a/libs/shared/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.tsx
+++ b/libs/shared/lib/schema/pills/nodes/popup/popupmenus/attribute-analytics-popup-menu.tsx
@@ -9,7 +9,6 @@
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import { ExpandMore, Visibility } from '@mui/icons-material';
import React, { ReactElement } from 'react';
import { NodeType, AttributeAnalyticsData, AttributeCategory } from '../../../../model/reactflow';
import { Filter } from './filterbar';
diff --git a/libs/shared/lib/schema/pills/nodes/popup/popupmenus/filterbar.tsx b/libs/shared/lib/schema/pills/nodes/popup/popupmenus/filterbar.tsx
index 6dcaec7b7..80aeaabe0 100644
--- a/libs/shared/lib/schema/pills/nodes/popup/popupmenus/filterbar.tsx
+++ b/libs/shared/lib/schema/pills/nodes/popup/popupmenus/filterbar.tsx
@@ -9,7 +9,6 @@
* We do not test components/renderfunctions/styling files.
* See testing plan for more details.*/
-import { ExpandMore } from '@mui/icons-material';
import React, { ReactElement, useState } from 'react';
import { AttributeAnalyticsData, AttributeCategory, NodeType } from '../../../../model/reactflow';
diff --git a/libs/shared/lib/sidebar/index.tsx b/libs/shared/lib/sidebar/index.tsx
index 9c8e66ed5..33eb167ca 100644
--- a/libs/shared/lib/sidebar/index.tsx
+++ b/libs/shared/lib/sidebar/index.tsx
@@ -1,18 +1,17 @@
import React, { useState } from 'react';
import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components';
-import { Fullscreen, Schema as SchemaIcon, Search as SearchIcon } from '@mui/icons-material';
import ColorMode from '../components/color-mode';
export type SideNavTab = 'Schema' | 'Search' | undefined;
const tabs: Array<{
name: SideNavTab;
- icon: JSX.Element;
+ icon: string | undefined;
}> = [
{
name: 'Search',
- icon: <SearchIcon />,
+ icon: 'icon-[ic--outline-search]',
},
- { name: 'Schema', icon: <SchemaIcon /> },
+ { name: 'Schema', icon: 'icon-[ic--baseline-schema]' },
];
export function Sidebar({ onTab, tab }: { onTab: (tab: SideNavTab) => void; tab: SideNavTab }) {
diff --git a/libs/shared/lib/sidebar/search/SearchBar.tsx b/libs/shared/lib/sidebar/search/SearchBar.tsx
index 39a3bff10..cb9e3e702 100644
--- a/libs/shared/lib/sidebar/search/SearchBar.tsx
+++ b/libs/shared/lib/sidebar/search/SearchBar.tsx
@@ -18,7 +18,6 @@ import {
} from '../../data-access/store/searchResultSlice';
import { filterData } from './similarity';
import { Button, Panel, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components';
-import { Remove, Fullscreen } from '@mui/icons-material';
import { NestedItem } from './NestedItem';
const SIMILARITY_THRESHOLD = 0.7;
@@ -120,7 +119,7 @@ export function SearchBar(props: { onRemove?: () => void }) {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<Remove />}
+ iconComponent="icon-[ic--baseline-remove]"
onClick={() => {
if (props.onRemove) props.onRemove();
}}
@@ -131,8 +130,8 @@ export function SearchBar(props: { onRemove?: () => void }) {
</TooltipContent>
</Tooltip>
<Tooltip>
- <TooltipTrigger asChild>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={() => {}} />
+ <TooltipTrigger>
+ <Button variantType="secondary" variant="ghost" size="sm" iconComponent="icon-[ic--round-fullscreen]" onClick={() => {}} />
</TooltipTrigger>
<TooltipContent>
<p>Mock icon</p>
diff --git a/libs/shared/lib/vis/components/VisualizationTabBar.tsx b/libs/shared/lib/vis/components/VisualizationTabBar.tsx
index b1b038411..8ff06c7a4 100644
--- a/libs/shared/lib/vis/components/VisualizationTabBar.tsx
+++ b/libs/shared/lib/vis/components/VisualizationTabBar.tsx
@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import { Button, DropdownContainer, DropdownItem, DropdownItemContainer, DropdownTrigger } from '../../components';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
-import { Add, Close, Fullscreen } from '@mui/icons-material';
import { ControlContainer } from '../../components/controls';
import { Tabs, Tab } from '../../components/tabs';
import { useAppDispatch, useVisualization } from '../../data-access';
@@ -61,7 +60,7 @@ export default function VisualizationTabBar(props: { fullSize: () => void }) {
variant="ghost"
rounded
size="2xs"
- iconComponent={<Close />}
+ iconComponent="icon-[ic--baseline-close]"
onClick={(e) => {
e.stopPropagation();
onDelete(i);
@@ -77,7 +76,14 @@ export default function VisualizationTabBar(props: { fullSize: () => void }) {
<TooltipTrigger>
<DropdownContainer open={open} onOpenChange={setOpen}>
<DropdownTrigger onClick={() => setOpen((v) => !v)}>
- <Button as={'a'} variantType="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
+ <Button
+ as={'a'}
+ variantType="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent="icon-[ic--baseline-add]"
+ onClick={() => {}}
+ />
</DropdownTrigger>
<DropdownItemContainer>
{Object.keys(Visualizations).map((name, i) => (
@@ -107,7 +113,13 @@ export default function VisualizationTabBar(props: { fullSize: () => void }) {
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
- <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={props.fullSize} />
+ <Button
+ variantType="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent="icon-[ic--baseline-fullscreen]"
+ onClick={props.fullSize}
+ />
</TooltipTrigger>
<TooltipContent>
<p>Full screen</p>
diff --git a/libs/shared/lib/vis/components/config/SelectionConfig.tsx b/libs/shared/lib/vis/components/config/SelectionConfig.tsx
index 1d5e96f04..2e5d9d687 100644
--- a/libs/shared/lib/vis/components/config/SelectionConfig.tsx
+++ b/libs/shared/lib/vis/components/config/SelectionConfig.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { SelectionStateI, unSelect } from '@graphpolaris/shared/lib/data-access/store/interactionSlice';
-import { Delete } from '@mui/icons-material';
import { useDispatch } from 'react-redux';
import { Button, EntityPill, useSelection } from '../../..';
import { SettingsHeader } from './components';
@@ -19,7 +18,7 @@ export const SelectionConfig = () => {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<Delete />}
+ iconComponent="icon-[ic--baseline-delete]"
onClick={() => {
dispatch(unSelect());
}}
diff --git a/libs/shared/lib/vis/components/config/VisualizationSettings.tsx b/libs/shared/lib/vis/components/config/VisualizationSettings.tsx
index ad4686354..19609a25b 100644
--- a/libs/shared/lib/vis/components/config/VisualizationSettings.tsx
+++ b/libs/shared/lib/vis/components/config/VisualizationSettings.tsx
@@ -1,5 +1,4 @@
import React, { Suspense, useEffect, useMemo, useState } from 'react';
-import { Delete } from '@mui/icons-material';
import {
Button,
Input,
@@ -75,7 +74,7 @@ export function VisualizationSettings({}: Props) {
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={<Delete />}
+ iconComponent="icon-[ic--baseline-delete]"
onClick={() => {
if (activeVisualization) removeVisualization();
}}
diff --git a/libs/shared/lib/vis/views/NoData.tsx b/libs/shared/lib/vis/views/NoData.tsx
index dc63c70bc..0eff583f0 100644
--- a/libs/shared/lib/vis/views/NoData.tsx
+++ b/libs/shared/lib/vis/views/NoData.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { Button } from '../../components';
-import { InfoOutlined } from '@mui/icons-material';
type Props = { dataAvailable: boolean };
@@ -19,7 +18,7 @@ export function NoData({ dataAvailable }: Props) {
variant="outline"
label="Learn how to query data"
size="sm"
- iconComponent={<InfoOutlined />}
+ iconComponent="icon-[ic--outline-info]"
onClick={() => window.open('https://graphpolaris.com', '_blank')}
/>
</div>
diff --git a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
index d42ebe644..5f5478621 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
+++ b/libs/shared/lib/vis/visualizations/mapvis/mapvis.tsx
@@ -10,9 +10,9 @@ import { Node } from '@graphpolaris/shared/lib/data-access/store/graphQueryResul
import { HighlightAlt, SearchOutlined } from '@mui/icons-material';
import SearchBar from './search';
-export type MapProps = { layer: string };
+export type MapProps = { layer: string; enableBrushing: boolean };
-const settings: MapProps = { layer: 'nodelink' };
+const settings: MapProps = { layer: 'nodelink', enableBrushing: false };
const INITIAL_VIEW_STATE = {
latitude: 52.1006,
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
index 62383f984..acc16d05b 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
@@ -69,7 +69,6 @@ export const MatrixPixi = (props: Props) => {
const svg = useRef<SVGSVGElement>(null);
const isSetup = useRef(false);
const ml = useML();
- const searchResults = useSearchResultData();
// const imperative = useRef<any>(null);
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 9f18518da..40a6ec192 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -24,7 +24,6 @@ import { Viewport } from 'pixi-viewport';
import { NodelinkVisProps } from '../nodelinkvis';
import { Tooltip, TooltipContent, TooltipTrigger } from '@graphpolaris/shared/lib/components/tooltip';
import { MovedEvent } from 'pixi-viewport/dist/types';
-import { ConstructionOutlined } from '@mui/icons-material';
type Props = {
onClick: (event?: { node: NodeTypeD3; pos: IPointData }) => void;
diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
index 83114728a..4a75d8308 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/HyperRangeBlock.tsx
@@ -1,9 +1,6 @@
import React, { useEffect, useState, useMemo } from 'react';
import { CustomLine } from './CustomLine';
-import { PaohvisDataPaginated, RowInformation, LinesHyperEdges } from '../types';
-import { ArrowDownward, ArrowUpward, ContactPageSharp, Sort } from '@mui/icons-material';
-import { select } from 'd3';
-import { visualizationColors, tailwindColors } from 'config';
+import { LinesHyperEdges, PaohvisDataPaginated, RowInformation } from '../types';
interface HyperEdgeRangesBlockProps {
dataModel: PaohvisDataPaginated;
@@ -69,37 +66,39 @@ export const HyperEdgeRangesBlock: React.FC<HyperEdgeRangesBlockProps> = ({
const [isHovered, setIsHovered] = useState(false);
const [hoverRowIndex, setHoverRowIndex] = useState<number | null>(null);
- const [iconComponents, setIconComponents] = useState<{ [key: number]: JSX.Element }[]>(Array(columnHeaderInformation.length).fill({}));
+ const [iconComponents, setIconComponents] = useState<{ [key: number]: string | undefined }[]>(
+ Array(columnHeaderInformation.length).fill({}),
+ );
const [iconColors, setIconColors] = useState<string[]>([]);
useEffect(() => {
const iconColorsTemporal: string[] = [];
const updatedIconComponents = columnHeaderInformation.map((row, indexRows) => {
- let iconComponent: JSX.Element = <></>;
+ let iconComponent: string | undefined = undefined;
if (row.header == headerState) {
switch (sortState) {
case 'asc':
- iconComponent = <ArrowUpward />;
+ iconComponent = 'icon-[ic--baseline-arrow-upward]';
break;
case 'desc':
- iconComponent = <ArrowDownward />;
+ iconComponent = 'icon-[ic--baseline-arrow-downward]';
break;
case 'original':
- iconComponent = <Sort />;
+ iconComponent = 'icon-[ic--baseline-sort]';
break;
default:
- iconComponent = <></>;
+ iconComponent = undefined;
}
iconColorsTemporal.push('hsl(var(--clr-sec--800))');
} else {
- iconComponent = <></>;
+ iconComponent = undefined;
iconColorsTemporal.push('hsl(var(--clr-sec--500))');
}
if (indexRows == hoverRowIndex && headerState != row.header) {
- iconComponent = <Sort />;
+ iconComponent = 'icon-[ic--baseline-sort]';
}
return { [indexRows]: iconComponent };
});
diff --git a/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx b/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
index b26c336d1..412e8d912 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/components/RowLabels.tsx
@@ -1,7 +1,6 @@
import React, { useEffect, useState, useMemo } from 'react';
import { CustomLine } from './CustomLine';
import { RowInformation } from '../types';
-import { ArrowDownward, ArrowUpward, Sort } from '@mui/icons-material';
interface RowLabelsProps {
dataRows: RowInformation;
@@ -42,7 +41,7 @@ export const RowLabels = ({
});
const [isHovered, setIsHovered] = useState(false);
const [hoverRowIndex, setHoverRowIndex] = useState<number | null>(null);
- const [iconComponents, setIconComponents] = useState<{ [key: number]: JSX.Element }[]>(Array(dataRows.length).fill({}));
+ const [iconComponents, setIconComponents] = useState<{ [key: number]: string | undefined }[]>(Array(dataRows.length).fill({}));
const [iconColors, setIconColors] = useState<string[]>([]);
const adjustedFontSize = useMemo(() => {
return Math.max(0.4, (rowHeight * 0.75) / 20);
@@ -52,29 +51,29 @@ export const RowLabels = ({
const iconColorsTemporal: string[] = [];
const updatedIconComponents = dataRows.map((row, indexRows) => {
- let iconComponent: JSX.Element = <></>;
+ let iconComponent: string | undefined = undefined;
if (row.header == headerState) {
switch (sortState) {
case 'asc':
- iconComponent = <ArrowUpward />;
+ iconComponent = 'icon-[ic--baseline-arrow-upward]';
break;
case 'desc':
- iconComponent = <ArrowDownward />;
+ iconComponent = 'icon-[ic--baseline-arrow-downward]';
break;
case 'original':
- iconComponent = <Sort />;
+ iconComponent = 'icon-[ic--baseline-sort]';
break;
default:
- iconComponent = <></>;
+ iconComponent = undefined;
}
iconColorsTemporal.push('hsl(var(--clr-sec--800))');
} else {
- iconComponent = <></>;
+ iconComponent = undefined;
iconColorsTemporal.push('hsl(var(--clr-sec--500))');
}
if (indexRows == hoverRowIndex && headerState != row.header) {
- iconComponent = <Sort />;
+ iconComponent = 'icon-[ic--baseline-sort]';
}
return { [indexRows]: iconComponent };
diff --git a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
index 51274d3a3..a643ea9d8 100644
--- a/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
+++ b/libs/shared/lib/vis/visualizations/paohvis/paohvis.tsx
@@ -13,7 +13,6 @@ import { Input } from '@graphpolaris/shared/lib/components/inputs';
import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
import { EntityPill } from '@graphpolaris/shared/lib/components/pills/Pill';
-import { ArrowDropDown, ArrowRight } from '@mui/icons-material';
import { cloneDeep } from 'lodash-es';
import { useImmer } from 'use-immer';
@@ -966,7 +965,7 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
title={
<div className="flex flex-row justify-between items-center cursor-pointer">
<span>{settings.rowNode || ''}</span>
- <Button variantType="secondary" variant="ghost" size="2xs" iconComponent={<ArrowDropDown />} />
+ <Button variantType="secondary" variant="ghost" size="2xs" iconComponent="icon-[ic--baseline-arrow-drop-down]" />
</div>
}
/>
@@ -979,7 +978,7 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
size="sm"
className="-pt-3 mt-1"
onClick={toggleCollapseAttrRows}
- iconComponent={areCollapsedAttrRows ? <ArrowRight /> : <ArrowDropDown />}
+ iconComponent={areCollapsedAttrRows ? 'icon-[ic--baseline-arrow-right]' : 'icon-[ic--baseline-arrow-drop-down]'}
>
attributes:{' '}
</Button>
@@ -1010,7 +1009,7 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
title={
<div className="flex flex-row justify-between items-center cursor-pointer">
<span>{settings.columnNode || ''}</span>
- <Button variantType="secondary" variant="ghost" size="2xs" iconComponent={<ArrowDropDown />} />
+ <Button variantType="secondary" variant="ghost" size="2xs" iconComponent="icon-[ic--baseline-arrow-drop-down]" />
</div>
}
/>
@@ -1024,7 +1023,7 @@ const PaohSettings = ({ settings, graphMetadata, updateSettings }: Visualization
size="sm"
className="-pt-3 mt-1"
onClick={toggleCollapseAttrColumns}
- iconComponent={areCollapsedAttrColumns ? <ArrowRight /> : <ArrowDropDown />}
+ iconComponent={areCollapsedAttrColumns ? 'icon-[ic--baseline-arrow-right]' : 'icon-[ic--baseline-arrow-drop-down]'}
>
attributes:{' '}
</Button>
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx
index 2f1b41503..6d8aeb062 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/components/Scatterplot.tsx
@@ -20,7 +20,6 @@ import {
import { VisualRegionConfig, RegionData, DataPoint, DataPointXY } from './types';
import { calcTextWidth } from './utils';
-import { ArrowForward } from '@mui/icons-material';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
import { EntityPill } from '@graphpolaris/shared/lib/components/pills/Pill';
import { noDataRange } from '../utils';
@@ -650,11 +649,11 @@ export const Scatterplot: React.FC<ScatterplotProps> = ({
<div>
{data.attributeName && (
<div className="flex items-center gap-1">
- <Icon component={<ArrowForward />} size={16} color="text-secondary-300" />
+ <Icon component="icon-[ic--baseline-arrow-forward]" size={16} color="text-secondary-300" />
<span className="text-secondary-700 text-sm m-0.5">{data.attributeName}</span>
{data.attributeSelected && (
<div className="flex items-center gap-1">
- <Icon component={<ArrowForward />} size={16} color="text-secondary-300" />
+ <Icon component="icon-[ic--baseline-arrow-forward]" size={16} color="text-secondary-300" />
<span className="text-secondary-700 text-sm m-0.5">{data.attributeSelected}</span>
</div>
)}
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/configPanel/SemSubsConfigPanel.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/configPanel/SemSubsConfigPanel.tsx
index a6df7b0f3..f7c5fa6f9 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/configPanel/SemSubsConfigPanel.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/configPanel/SemSubsConfigPanel.tsx
@@ -1,5 +1,4 @@
import React, { useState, useMemo, useEffect } from 'react';
-import { DeleteOutline, ArrowDropDown, SubdirectoryArrowRight, ArrowRight } from '@mui/icons-material';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
import { Icon } from '@graphpolaris/shared/lib/components/icon';
import { DataFromPanel, DataPanelConfig } from '../components/types';
@@ -149,7 +148,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
variantType="secondary"
variant="ghost"
size="xs"
- iconComponent={dataFromPanel.settingsOpen ? <ArrowDropDown /> : <ArrowRight />}
+ iconComponent={dataFromPanel.settingsOpen ? 'icon-[ic--baseline-arrow-drop-down]' : 'icon-[ic--baseline-arrow-right]'}
/>
<EntityPillSelector
@@ -170,7 +169,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
variant="ghost"
size="xs"
disabled={isFirstPanel}
- iconComponent={<DeleteOutline />}
+ iconComponent="icon-[ic--baseline-delete-outline]"
onClick={onDelete}
/>
</div>
@@ -178,7 +177,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
{isNotCollapsed && (
<div className="ml-4 gap-2 flex flex-col">
<div className="flex justify-between 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
size="xs"
type="dropdown"
@@ -193,7 +192,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
</div>
<div className="flex justify-between 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
size="xs"
type="dropdown"
@@ -208,7 +207,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
/>
</div>
<div className="flex justify-between 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
size="xs"
type="dropdown"
@@ -223,7 +222,7 @@ export const SemSubsConfigPanel: React.FC<SemSubsConfigPanelProps> = ({
</div>
<div className="flex justify-between items-center ml-3 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
size="xs"
type="dropdown"
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/configPanel/semSubsConfigPanel.stories.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/configPanel/semSubsConfigPanel.stories.tsx
index 67199cf03..ec0fc0f50 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/configPanel/semSubsConfigPanel.stories.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/configPanel/semSubsConfigPanel.stories.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
-import { SemSubsConfigPanel, SemSubsConfigPanelProps } from './SemSubsConfigPanel';
+import { SemSubsConfigPanel } from '.';
const metaPillDropdown: Meta<typeof SemSubsConfigPanel> = {
component: SemSubsConfigPanel,
diff --git a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
index b542d9847..e7e90f844 100644
--- a/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
+++ b/libs/shared/lib/vis/visualizations/semanticsubstratesvis/semanticsubstratesvis.tsx
@@ -2,7 +2,6 @@ import React, { useRef, useState, useMemo, useEffect } from 'react';
import { Scatterplot, KeyedScatterplotProps } from './components/Scatterplot';
import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
-import { Add } from '@mui/icons-material';
import { select, selectAll } from 'd3';
import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
import { findConnectionsNodes, getRegionData, setExtension, filterArray, getUniqueValues } from './components/utils';
@@ -902,7 +901,7 @@ const SemSubstrSettings = ({ settings, updateSettings, graphMetadata }: Visualiz
<div className="">
<div className="flex justify-between items-center px-3 py-1">
<span className="text-xs font-semibold">Substrates</span>
- <Button variantType="secondary" variant="ghost" size="sm" iconComponent={<Add />} onClick={() => addPanel()} />
+ <Button variantType="secondary" variant="ghost" size="sm" iconComponent="icon-[ic--baseline-add]" onClick={() => addPanel()} />
</div>
{settings.dataPanels.map((panel, index) => (
<SemSubsConfigPanel
diff --git a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
index 365d3fe68..1a423108e 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx
@@ -5,7 +5,6 @@ import { BarPlot } from '@graphpolaris/shared/lib/components/charts/barplot';
import { NodeAttributes } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
import { SchemaAttributeTypes } from '@graphpolaris/shared/lib/schema';
import styles from './table.module.scss';
-import { ArrowDownward, ArrowUpward, Sort } from '@mui/icons-material';
import { Icon } from '@graphpolaris/shared/lib/components';
import { group } from 'd3';
@@ -266,7 +265,13 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
}
>
<Icon
- component={sortColumn === item ? sortOrder === 'asc' ? <ArrowDownward /> : <ArrowUpward /> : <Sort />}
+ component={
+ sortColumn === item
+ ? sortOrder === 'asc'
+ ? 'icon-[ic--baseline-arrow-downward]'
+ : 'icon-[ic--baseline-arrow-upward]'
+ : 'icon-[ic--baseline-sort]'
+ }
size={20}
className={`${sortColumn === item && sortOrder ? 'text-secondary-800' : 'text-secondary-500'}`}
/>
diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
index def795508..37e198c9d 100644
--- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
+++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx
@@ -4,7 +4,6 @@ import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropType
import { Input } from '@graphpolaris/shared/lib/components/inputs';
import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
import { Button } from '@graphpolaris/shared/lib/components/buttons';
-import { ArrowDropDown } from '@mui/icons-material';
import { useSearchResultData } from '@graphpolaris/shared/lib/data-access';
export type TableProps = {
@@ -174,7 +173,7 @@ const TableSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
variant="ghost"
size="sm"
onClick={toggleCollapseAttr}
- iconComponent={<ArrowDropDown />}
+ iconComponent="icon-[ic--baseline-arrow-drop-down]"
>
attributes:{' '}
</Button>
diff --git a/libs/shared/package.json b/libs/shared/package.json
index bea444b8f..f403a9fcb 100644
--- a/libs/shared/package.json
+++ b/libs/shared/package.json
@@ -23,7 +23,6 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@floating-ui/react": "^0.26.16",
- "@mui/icons-material": "^5.15.13",
"@pixi-essentials/cull": "^2.0.0",
"@reactflow/node-resizer": "^2.2.9",
"@reduxjs/toolkit": "^2.2.1",
@@ -74,6 +73,7 @@
},
"devDependencies": {
"@iconify/json": "^2.2.192",
+ "@iconify/tailwind": "^1.1.1",
"@storybook/preset-scss": "^1.0.3",
"@testing-library/react": "14.2.1",
"@types/color": "^3.0.6",
diff --git a/libs/storybook/package.json b/libs/storybook/package.json
index 1e5077702..2ce57afce 100644
--- a/libs/storybook/package.json
+++ b/libs/storybook/package.json
@@ -9,6 +9,10 @@
"build-storybook": "storybook build"
},
"dependencies": {
+ "@deck.gl-community/editable-layers": "9.0.0-alpha.1",
+ "@deck.gl/core": "^9.0.12",
+ "@deck.gl/layers": "^9.0.12",
+ "@deck.gl/react": "^9.0.12",
"@graphpolaris/shared": "workspace:*",
"@storybook/manager-api": "^8.0.6",
"@storybook/test": "^8.0.6",
@@ -16,13 +20,10 @@
"postcss-scss": "^4.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "@deck.gl-community/editable-layers": "9.0.0-alpha.1",
- "@deck.gl/core": "^9.0.12",
- "@deck.gl/layers": "^9.0.12",
- "@deck.gl/react": "^9.0.12",
"web": "workspace:*"
},
"devDependencies": {
+ "@iconify/tailwind": "^1.1.1",
"@storybook/addon-essentials": "^8.0.6",
"@storybook/addon-interactions": "^8.0.6",
"@storybook/addon-links": "^8.0.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15d4e78fd..f795f11b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -190,6 +190,9 @@ importers:
libs/config:
devDependencies:
+ '@iconify/tailwind':
+ specifier: ^1.1.1
+ version: 1.1.1
'@tailwindcss/typography':
specifier: ^0.5.10
version: 0.5.10(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.4.2)))
@@ -229,9 +232,6 @@ importers:
'@floating-ui/react':
specifier: ^0.26.16
version: 0.26.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
- '@mui/icons-material':
- specifier: ^5.15.13
- version: 5.15.13(@mui/material@5.15.13(@emotion/react@11.11.4(@types/react@18.2.65)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.4(@types/react@18.2.65)(react@18.2.0))(@types/react@18.2.65)(react@18.2.0))(@types/react@18.2.65)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.2.65)(react@18.2.0)
'@pixi-essentials/cull':
specifier: ^2.0.0
version: 2.0.0(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/math@7.4.2)
@@ -377,6 +377,9 @@ importers:
'@iconify/json':
specifier: ^2.2.192
version: 2.2.192
+ '@iconify/tailwind':
+ specifier: ^1.1.1
+ version: 1.1.1
'@storybook/preset-scss':
specifier: ^1.0.3
version: 1.0.3(css-loader@6.10.0(webpack@5.90.3(@swc/core@1.4.2(@swc/helpers@0.5.2))))(sass-loader@14.1.1(sass@1.72.0)(webpack@5.90.3(@swc/core@1.4.2(@swc/helpers@0.5.2))))(style-loader@3.3.4(webpack@5.90.3(@swc/core@1.4.2(@swc/helpers@0.5.2))))
@@ -597,6 +600,9 @@ importers:
specifier: workspace:*
version: link:../../apps/web
devDependencies:
+ '@iconify/tailwind':
+ specifier: ^1.1.1
+ version: 1.1.1
'@storybook/addon-essentials':
specifier: ^8.0.6
version: 8.0.9(@types/react@18.2.65)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -1860,6 +1866,9 @@ packages:
'@iconify/json@2.2.192':
resolution: {integrity: sha512-q03tWoVKoMRaTEUDOPWc8geSsKkMe+3D/kK4UZ7F7P3NYwr4h+GN/yT3+5Z68lnD0ajDmTuswfMKOi1DbVnEnw==}
+ '@iconify/tailwind@1.1.1':
+ resolution: {integrity: sha512-4mmA//qjZigv7D4KlqcVSYTqfRIJzyts2/lSCAJfCL0rVMIE76+ifJnaE5jxCo1+nYGBF8FsFo0qFOs+sX4EnA==}
+
'@iconify/types@2.0.0':
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -9926,6 +9935,10 @@ snapshots:
'@iconify/types': 2.0.0
pathe: 1.1.2
+ '@iconify/tailwind@1.1.1':
+ dependencies:
+ '@iconify/types': 2.0.0
+
'@iconify/types@2.0.0': {}
'@iconify/utils@2.1.22':
--
GitLab