feat(css): new design applied to sb and visualizations

apps/web/tsconfig.node.json

-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true,
-    "types": ["node", "vite/client"]
-  },
-  "include": ["vite.config.ts"]
-}

libs/config/node.d.ts

@@ -15,4 +15,4 @@ interface ImportMeta {
 declare module "*.png";
 declare module "*.svg";
 declare module "*.jpeg";
-declare module "*.jpg";
+declare module "*.jpg";
\ No newline at end of file

libs/shared/lib/querybuilder/panel/querypopup.tsx

+import React, { useEffect } from 'react';
+import Draggable from 'react-draggable';
+import { AllLogicDescriptions, MathFilters, NumberFunctions, QueryGraphEdgeHandle, StringFilters, StringFunctions } from '../model';
+import { InputNodeType } from '../model/logic/general';
+import { QuerySidePanel } from './querysidepanel';
+
+export function QueryBuilderModal(props: {
+  open: boolean;
+  handle: QueryGraphEdgeHandle | undefined;
+  onClose: () => void;
+  onClick: (item: AllLogicDescriptions) => void;
+}) {
+  const modal = React.useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    if (props.open) {
+      modal.current?.showModal();
+    } else {
+      modal.current?.close();
+    }
+  }, [props.open]);
+
+  function onClose() {
+    props.onClose();
+  }
+
+  return (
+    <dialog id="my_modal_1" className="modal " ref={modal} onClose={() => onClose()}>
+      <form method="dialog" className="modal-box h-auto">
+        <QuerySidePanel title="Logic Pills usable by the node" filter={props.handle?.attributeType} onClick={props.onClick} />
+      </form>
+
+      <form method="dialog" className="modal-backdrop">
+        <button>close</button>
+      </form>
+    </dialog>
+  );
+}

libs/shared/lib/querybuilder/panel/querysidepanel.tsx

+import React, { useState } from 'react';
+import { AllLogicDescriptions, AllLogicMap } from '../model';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import FunctionsIcon from '@mui/icons-material/Functions';
+import GridOnIcon from '@mui/icons-material/GridOn';
+import NumbersIcon from '@mui/icons-material/Numbers';
+import AbcIcon from '@mui/icons-material/Abc';
+
+export const QuerySidePanel = (props: {
+  title: string;
+  filter?: string;
+  draggable?: boolean;
+  onClick?: (item: AllLogicDescriptions) => void;
+}) => {
+  const dataOps = [
+    {
+      title: 'aggregation',
+      description: 'Aggregation Functions',
+      icon: <GridOnIcon fontSize="small" />,
+    },
+    {
+      title: 'function',
+      description: 'Math Functions',
+      icon: <FunctionsIcon fontSize="small" />,
+    },
+    {
+      title: 'filter',
+      description: 'Filter Functions',
+      icon: <FilterAltIcon fontSize="small" />,
+    },
+  ];
+  const dataTypes = [
+    {
+      title: 'number',
+      description: 'Number',
+      icon: <NumbersIcon fontSize="small" />,
+    },
+    {
+      title: 'string',
+      description: 'Text',
+      icon: <AbcIcon fontSize="small" />,
+    },
+  ];
+
+  const filter = props.filter === 'number' ? 'float' : props.filter;
+  const [selectedOp, setSelectedOp] = useState(dataOps.findIndex((item) => item.title === filter) || -1);
+  const [selectedType, setSelectedType] = useState(dataTypes.findIndex((item) => item.title === filter) || -1);
+
+  const onDragStart = (event: React.DragEvent, value: AllLogicDescriptions) => {
+    console.log('drag start');
+
+    event.dataTransfer.setData('application/reactflow', JSON.stringify({ value }));
+    event.dataTransfer.effectAllowed = 'move';
+  };
+
+  return (
+    <div className="bg-offwhite-100 h-flex flex flex-col gap-2">
+      <h2 className="menu-title">{props.title}</h2>
+      <div className="btn-group w-full justify-center">
+        {dataOps.map((item, index) => (
+          <div key={item.title} data-tip={item.description} className="tooltip tooltip-top m-0 p-0">
+            <button
+              className={'btn btn-sm ' + (selectedOp === index ? 'btn-active' : '')}
+              onClick={(e) => {
+                e.preventDefault();
+                index === selectedOp ? setSelectedOp(-1) : setSelectedOp(index);
+              }}
+            >
+              {item.icon}
+            </button>
+          </div>
+        ))}
+        <div className="w-2" />
+        {dataTypes.map((item, index) => (
+          <div key={item.title} data-tip={item.description} className=" tooltip tooltip-top m-0 p-0">
+            <button
+              className={'btn btn-sm block ' + (selectedType === index ? 'btn-active' : '')}
+              onClick={(e) => {
+                e.preventDefault();
+                index === selectedType ? setSelectedType(-1) : setSelectedType(index);
+              }}
+            >
+              {item.icon}
+            </button>
+          </div>
+        ))}
+      </div>
+      <div className="overflow-x-hidden flex-shrink flex-grow-0 w-full">
+        <ul className="menu bg-base-200 p-0 [&_li>*]:rounded-none h-full w-full">
+          {Object.values(AllLogicMap)
+            .filter((item) => !filter || item.key.toLowerCase().includes(filter === 'number' ? 'float' : 'string'))
+            .filter((item) => selectedOp === -1 || item.key.toLowerCase().includes(dataOps?.[selectedOp].title))
+            .filter((item) => selectedType === -1 || item.key.toLowerCase().includes(dataTypes?.[selectedType].title))
+            .map((item, index) => (
+              <li key={item.key + item.description} className="h-fit">
+                <span
+                  data-tip={item.description}
+                  className="flex before:w-[10rem] before:text-center tooltip tooltip-bottom text-start "
+                  onDragStart={(e) => onDragStart(e, item)}
+                  draggable={props.draggable}
+                  onClick={() => {
+                    if (!props.draggable && props?.onClick) props.onClick(item);
+                  }}
+                >
+                  {item.icon && <span className="w-min">{item.icon}</span>}
+                  <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" />}
+                  </span>
+                </span>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export type QueryBuilderProps = {
+  onRunQuery?: () => void;
+};