migrate to 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 @@ export class ReactionCIMEBackend {
 
   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

src/ReactionCIMEApp.tsx

@@ -16,10 +16,9 @@ import { connect, ConnectedProps, useDispatch } from 'react-redux';
 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';
@@ -269,7 +268,7 @@ export function ReactionCIMEApp() {
             <></>
           ) : (
             <VisynHeader
-              backgroundColor={theme.colors.dark[theme.fn.primaryShade()]}
+              backgroundColor={theme.colors.dark[theme.primaryShade as MantineColorShade]}
               components={{
                 aboutAppModal: {
                   content: <BuildInfoContent />,
@@ -286,7 +285,7 @@ export function ReactionCIMEApp() {
                       href="https://www.bayer.com/"
                       rel="noreferrer"
                       target="_blank"
-                      sx={{
+                      style={{
                         // Center the image
                         display: 'flex',
                         alignItems: 'center',
@@ -298,7 +297,7 @@ export function ReactionCIMEApp() {
                       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

@@ -13,7 +13,7 @@ declare module 'visyn_core/base' {
 }
 
 createRoot(document.getElementById('app')).render(
-  <VisynAppProvider appName="CIME4R">
+  <VisynAppProvider disableMantine6 appName="CIME4R">
     <ReactionCIMEApp />
   </VisynAppProvider>,
 );