Mantine7

package.json

@@ -90,7 +90,8 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "[email protected]": "patch:vega-lite@npm:4.16.8#.yarn/patches/vega-lite-npm-4.16.8-2acecf824b.patch"
+    "[email protected]": "patch:vega-lite@npm:4.16.8#.yarn/patches/vega-lite-npm-4.16.8-2acecf824b.patch",
+    "visyn_core": "git+ssh://[email protected]/datavisyn/visyn_core#mantine7"
   },
   "visyn": {
     "entries": {

src/Backend/ReactionCIMEBackend.ts

@@ -10,7 +10,10 @@
 
   protected cache = {};
 
-  constructor(public readonly baseUrl: string, public readonly fetchParams: Parameters<typeof fetch>[1] = {}) {}
+  constructor(
+    public readonly baseUrl: string,
+    public readonly fetchParams: Parameters<typeof fetch>[1] = {},
+  ) {}
 
   protected handleSmilesCache = (smiles: string, highlight = false) => {
     // already downloaded this image -> saved in smiles cache
@@ -47,7 +50,7 @@
 
   handleJSONErrors = (data) => {
     if (Object.keys(data).includes('error')) {
       alert(data.error);
     }
     return data;
   };
@@ -68,7 +71,7 @@
       });
   };
 
   public deleteFile = async (filename): Promise<{ deleted: any }> => {
     const path = `${this.baseUrl}/delete_file/${encodeURIComponent(filename)}`;
 
     return fetch(path, {
@@ -79,7 +82,7 @@
       .then((response) => response.json())
       .then(this.handleJSONErrors)
       .catch((error) => {
         alert('file could not be deleted. please, try again');
         console.log(error);
       });
   };
@@ -161,12 +164,12 @@
         throw Error(`Backend responded with error: ${data.error}`);
       })
       .catch((error) => {
         alert('could not find substructure match');
         console.log(error);
       });
   };
 
   public terminate_projection = async (filename): Promise<{ response: any }> => {
     const path = `${this.baseUrl}/terminate_projection_thread/${encodeURIComponent(filename)}`;
 
     return fetch(path, {
@@ -255,7 +258,7 @@
         if (error.name === 'AbortError') {
           console.log('Fetch aborted');
         } else {
           alert('error when uploading file. it might be too big');
           console.log(error);
         }
       });
@@ -316,7 +319,7 @@
 
   public loadCategoryCountOfHex = async (filename: string, col_name: string, xChannel: string, yChannel: string, x: number, y: number, circ_radius: number) => {
     if (xChannel == null) {
       xChannel = 'x';
     }
     if (yChannel == null) {
       yChannel = 'y';

src/ReactionCIMEApp.tsx

@@ -16,10 +16,9 @@
 import HelpIcon from '@mui/icons-material/Help';
 import { IconButton, Tooltip } from '@mui/material';
 import { useVisynAppContext, VisynApp, VisynHeader } from 'visyn_core/app';
-import { Anchor, useMantineTheme } from '@mantine/core';
+import { Anchor, useMantineTheme, MantineColorShade } from '@mantine/core';
 
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
-import { IClientConfig } from 'visyn_core/base';
 import { LineUpContext } from './LineUpContext';
 import { LineUpTabPanel } from './Overrides/LineUpTabPanel';
 import { AppState, CIME4RViewActions, createCIMERootReducer } from './State/Store';
@@ -174,7 +173,7 @@
         baseUrl: ReactionCIMEBackendFromEnv.baseUrl,
       }}
       features={{
         embeddings: clientConfig?.publicVersion
           ? [
               {
                 id: 'noProjection',
@@ -264,12 +263,12 @@
     <PSEContextProvider context={context}>
       <VisynApp
         header={
           clientConfig?.publicVersion ? (
             // eslint-disable-next-line react/jsx-no-useless-fragment
             <></>
           ) : (
             <VisynHeader
-              backgroundColor={theme.colors.dark[theme.fn.primaryShade()]}
+              backgroundColor={theme.colors.dark[theme.primaryShade as MantineColorShade]}
               components={{
                 aboutAppModal: {
                   content: <BuildInfoContent />,
@@ -286,7 +285,7 @@
                       href="https://www.bayer.com/"
                       rel="noreferrer"
                       target="_blank"
-                      sx={{
+                      style={{
                         // Center the image
                         display: 'flex',
                         alignItems: 'center',
@@ -298,7 +297,7 @@
                       href="https://jku-vds-lab.at/"
                       rel="noreferrer"
                       target="_blank"
-                      sx={{
+                      style={{
                         // Center the image
                         display: 'flex',
                         alignItems: 'center',

src/Utility/HeaderCustomization.tsx

@@ -5,7 +5,7 @@ import vdsLogo from '../assets/jku-vds-lab-logo.svg';
 
 export function BuildInfoContent() {
   return (
-    <Stack spacing="xl">
+    <Stack gap="xl">
       <Text>
         CIME4R is a web-based tool for interactive exploration of chemical reaction optimization data. CIME4R allows chemists to better understand the decision
         process of AI models and enhances human-AI collaboration.
@@ -16,8 +16,8 @@ export function BuildInfoContent() {
 
 export function BuildInfoLogos() {
   return (
-    <Group align="center" noWrap>
-      <Anchor href="https://bayer.com/" rel="noreferrer noopener" target="_blank" sx={{ transform: 'scale(1.3)' }}>
+    <Group align="center" wrap="nowrap">
+      <Anchor href="https://bayer.com/" rel="noreferrer noopener" target="_blank" style={{ transform: 'scale(1.3)' }}>
         <img src={bayerLogo} alt="logo" style={{ height: '24px' }} />
       </Anchor>
       <Anchor href="https://jku-vds-lab.at/" rel="noreferrer noopener" target="_blank">

src/initialize.tsx

@@ -6,14 +6,14 @@
 import 'lineupjs/build/LineUpJS.css';
 
 // Globally extend the clientConfig
 declare module 'visyn_core/base' {
   export interface IClientConfig {
     publicVersion?: boolean;
   }
 }
 
 createRoot(document.getElementById('app')).render(
-  <VisynAppProvider appName="CIME4R">
+  <VisynAppProvider disableMantine6 appName="CIME4R">
     <ReactionCIMEApp />
   </VisynAppProvider>,
 );