bumped mantine version

package.json

@@ -139,12 +139,12 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mantine/core": "~7.0.2",
-    "@mantine/dates": "~7.0.2",
-    "@mantine/form": "~7.0.2",
-    "@mantine/hooks": "~7.0.2",
-    "@mantine/modals": "~7.0.2",
-    "@mantine/notifications": "~7.0.2",
+    "@mantine/core": "~7.1.2",
+    "@mantine/dates": "~7.1.2",
+    "@mantine/form": "~7.1.2",
+    "@mantine/hooks": "~7.1.2",
+    "@mantine/modals": "~7.1.2",
+    "@mantine/notifications": "~7.1.2",
     "@types/d3-hexbin": "^0.2.3",
     "@types/d3v7": "npm:@types/d3@^7.4.0",
     "@types/plotly.js-dist-min": "^2.3.0",
@@ -187,8 +187,7 @@
     "chromatic": "^6.19.9",
     "cypress": "^13.2.0",
     "storybook": "^7.0.12",
-    "storybook-addon-swc": "^1.1.9",
-    "typescript-plugin-css-modules": "^5.0.1"
+    "storybook-addon-swc": "^1.1.9"
   },
   "resolutions": {
     "@types/react": "~18.2.0",

src/demo/MainApp.tsx

@@ -1,4 +1,4 @@
-import { Loader, Select, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Button, Loader, Select, SimpleGrid, Stack, Text } from '@mantine/core';
 import '@mantine/core/styles.css';
 import * as React from 'react';
 import { VisynApp, VisynHeader, useVisynAppContext } from '../app';
@@ -9,8 +9,11 @@ import { IScatterConfig } from '../vis/scatter/interfaces';
 import { fetchIrisData } from '../vis/stories/Iris.stories';
 import { iris } from '../vis/stories/irisData';
 import { MyNumberScore, MyStringScore } from './scoresUtils';
+import classes from '../vis/Vis.module.css';
 
 export function MainApp() {
+
+
   const { user } = useVisynAppContext();
   const [visConfig, setVisConfig] = React.useState<BaseVisConfig>({
     type: ESupportedPlotlyVis.SCATTER,
@@ -84,6 +87,7 @@ export function MainApp() {
               onBuiltLineUp={({ createScoreColumn }) => (createScoreColumnFunc.current = createScoreColumn)}
             />
           </Stack>
+
           <Vis
             columns={columns}
             showSidebarDefault

src/vis/Vis.module.css

@@ -4,16 +4,29 @@
     overflow: hidden;
     position: relative;
 
-    [class~=nsewdrag] {
+    /* Global selector required for plotly */
+    :global(.nsewdrag) {
         cursor: pointer !important;
     }
 }
 
 .overlayWrapper {
     width: 100%;
 
-    [class~=overlay] {
-        cursor: default !important;
+    /* Global selector required for plotly */
+    :global(.overlay) {
+        cursor: pointer !important;
+    }
+}
+
+.test {
+    &[data-test] {
+        background: var(--mantine-color-red-filled);
     }
 
-}
+    &:hover {
+        background: black;
+    }
+}
+
+

src/vis/hexbin/Hexplot.tsx

@@ -322,7 +322,7 @@ export function Hexplot({ config, allColumns, selectionCallback = () => null, se
         style={{
           height: height + margin.top + margin.bottom,
         }}
-        className={classes.hexplotWrapper}
+        className={classes.overlayWrapper}
       >
         <svg id={id} width={width + margin.left + margin.right} height={height + margin.top + margin.bottom}>
           <defs>

src/vis/sidebar/CategoricalColumnSelect.tsx

@@ -1,4 +1,4 @@
-import { MultiSelect } from '@mantine/core';
+import { CheckIcon, CloseButton, Combobox, Group, MultiSelect, Pill, PillsInput, useCombobox } from '@mantine/core';
 import * as React from 'react';
 import { ColumnInfo, EColumnTypes, VisColumn } from '../interfaces';
 
@@ -8,6 +8,53 @@ interface CategoricalColumnSelectProps {
   currentSelected: ColumnInfo[];
 }
 
+function Test({ data }: { data: { value: string; label: string; description: string }[] }) {
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+  });
+
+  const [value, setValue] = React.useState<string[]>([]);
+
+  const handleValueSelect = (val: string) => setValue((current) => (current.includes(val) ? current.filter((v) => v !== val) : [...current, val]));
+
+  const handleValueRemove = (val: string) => setValue((current) => current.filter((v) => v !== val));
+
+  const values = value.map((item) => (
+    <Pill key={item} withRemoveButton onRemove={() => handleValueRemove(item)}>
+      {item}
+    </Pill>
+  ));
+
+  const options = data.map((item) => (
+    <Combobox.Option value={item.value} key={item.value} active={value.includes(item.value)}>
+      <Group gap="sm">
+        {value.includes(item.value) ? <CheckIcon size={12} /> : null}
+        <span>{item.value}</span>
+      </Group>
+    </Combobox.Option>
+  ));
+
+  return (
+    <Combobox store={combobox} onOptionSubmit={handleValueSelect}>
+      <Combobox.Target>
+        <PillsInput
+          label="Categorical columns"
+          rightSection={
+            value.length > 0 ? <CloseButton size="sm" onMouseDown={(event) => event.preventDefault()} onClick={() => setValue([])} /> : <Combobox.Chevron />
+          }
+          onClick={() => combobox.openDropdown()}
+        >
+          <Pill.Group>{values}</Pill.Group>
+        </PillsInput>
+      </Combobox.Target>
+
+      <Combobox.Dropdown>
+        <Combobox.Options>{options}</Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+}
+
 export function CategoricalColumnSelect({ callback, columns, currentSelected }: CategoricalColumnSelectProps) {
   const selectCatOptions = React.useMemo(() => {
     return columns.filter((c) => c.type === EColumnTypes.CATEGORICAL).map((c) => ({ value: c.info.id, label: c.info.name, description: c.info.description }));
@@ -18,14 +65,17 @@ export function CategoricalColumnSelect({ callback, columns, currentSelected }:
   // itemComponent={SelectDropdownItem}
 
   return (
-    <MultiSelect
-      placeholder="Select columns"
-      label="Categorical columns"
-      clearable
-      onChange={(e) => callback(e.map((id) => columns.find((c) => c.info.id === id).info))}
-      name="numColumns"
-      data={selectCatOptions}
-      value={currentSelected.map((c) => c.id)}
-    />
+    <>
+      <Test data={selectCatOptions} />
+      <MultiSelect
+        placeholder="Select columns"
+        label="Categorical columns"
+        clearable
+        onChange={(e) => callback(e.map((id) => columns.find((c) => c.info.id === id).info))}
+        name="numColumns"
+        data={selectCatOptions}
+        value={currentSelected.map((c) => c.id)}
+      />
+    </>
   );
 }

tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "jsx": "react",
     "outDir": "./dist",
-    "plugins": [{ "name": "typescript-plugin-css-modules" }],
   },
   "include": [
     "src/**/*.ts",