From cac1b2109dedadf79e0ab7ac837fa398b9c34a0f Mon Sep 17 00:00:00 2001
From: Daniela <daniela.moitzi@datavisyn.io>
Date: Tue, 16 Jan 2024 13:50:10 +0100
Subject: [PATCH] migrate to mantine7

---
 package.json                        | 3 ++-
 src/Backend/ReactionCIMEBackend.ts  | 5 ++++-
 src/ReactionCIMEApp.tsx             | 9 ++++-----
 src/Utility/HeaderCustomization.tsx | 6 +++---
 src/initialize.tsx                  | 2 +-
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index bdb3c3e..e43f84c 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,8 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vega-lite@4.16.8": "patch:vega-lite@npm:4.16.8#.yarn/patches/vega-lite-npm-4.16.8-2acecf824b.patch"
+    "vega-lite@4.16.8": "patch:vega-lite@npm:4.16.8#.yarn/patches/vega-lite-npm-4.16.8-2acecf824b.patch",
+    "visyn_core": "git+ssh://git@github.com/datavisyn/visyn_core#mantine7"
   },
   "visyn": {
     "entries": {
diff --git a/src/Backend/ReactionCIMEBackend.ts b/src/Backend/ReactionCIMEBackend.ts
index 3708e48..49cbd08 100644
--- a/src/Backend/ReactionCIMEBackend.ts
+++ b/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
diff --git a/src/ReactionCIMEApp.tsx b/src/ReactionCIMEApp.tsx
index 16dc0dc..bfc5524 100644
--- a/src/ReactionCIMEApp.tsx
+++ b/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',
diff --git a/src/Utility/HeaderCustomization.tsx b/src/Utility/HeaderCustomization.tsx
index d5e4f76..92fe9b6 100644
--- a/src/Utility/HeaderCustomization.tsx
+++ b/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">
diff --git a/src/initialize.tsx b/src/initialize.tsx
index dccc854..27a15eb 100644
--- a/src/initialize.tsx
+++ b/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>,
 );