chore: update react science dependency (#81)

zakodium-oss · Mar 1, 2024 · 9605353 · 9605353
1 parent 63f4cab
commit 9605353
Show file tree

Hide file tree

Showing 40 changed files with 1,509 additions and 1,618 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,6 +58,8 @@
     "vite": "^4.3.2"
   },
   "dependencies": {
+    "@blueprintjs/core": "^5.9.1",
+    "@blueprintjs/select": "^5.1.1",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@lukeed/uuid": "^2.0.1",
@@ -71,9 +73,10 @@
     "react-d3-utils": "^1.0.0",
     "react-icons": "^4.10.1",
     "react-kbs": "^2.1.1",
+    "react-map-interaction": "^2.1.0",
     "react-plot": "^1.4.2",
     "react-roi": "^0.14.0",
-    "react-science": "^0.26.2",
+    "react-science": "^0.36.0",
     "react-use": "^17.4.0"
   },
   "volta": {

diff --git a/src/components/Pixelium.tsx b/src/components/Pixelium.tsx
@@ -105,7 +105,7 @@ function Pixelium({ data, preferences, view, webSource }: PixeliumProps) {
                           <PixeliumStyle ref={rootRef}>
                             <Header />
                             <PixeliumMainStyle>
-                              <Toolbar orientation="vertical">
+                              <Toolbar vertical>
                                 <ImportTool />
                                 <ExportTool />
                                 <GreyTool />

diff --git a/src/components/layout/CenterPanel.tsx b/src/components/layout/CenterPanel.tsx
@@ -1,6 +1,9 @@
+/** @jsxImportSource @emotion/react */
+import { Tabs, Tab } from '@blueprintjs/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import React, { memo, useCallback, useEffect, useMemo } from 'react';
-import { DropZoneContainer, Tabs } from 'react-science/ui';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import { DropZoneContainer } from 'react-science/ui';
 
 import useCurrentTab from '../../hooks/useCurrentTab';
 import useData from '../../hooks/useData';
@@ -57,16 +60,34 @@ function CenterPanel() {
   return (
     <StyledCenterPanel>
       <DropZoneContainer
-        emptyText="Drag and drop here either an image or a Pixelium file."
+        emptyDescription="Drag and drop here either an image or a Pixelium file."
         onDrop={handleOnDrop}
       >
         {tabsItems.length > 0 ? (
           <Tabs
-            orientation="horizontal"
-            items={tabsItems}
-            opened={currentTab}
-            onClick={openTab}
-          />
+            selectedTabId={currentTab}
+            onChange={openTab}
+            css={css`
+              height: 100%;
+              div[role='tablist'] {
+                overflow-x: auto;
+                overflow-y: hidden;
+              }
+              div[role='tabpanel'] {
+                height: calc(100% - 30px);
+                margin-top: 0;
+              }
+            `}
+          >
+            {tabsItems.map((item) => (
+              <Tab
+                id={item.id}
+                key={item.id}
+                title={item.title}
+                panel={item.content}
+              />
+            ))}
+          </Tabs>
         ) : null}
       </DropZoneContainer>
     </StyledCenterPanel>

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import { SvgLogoZakodium } from 'cheminfo-font';
 import { memo } from 'react';
 import {
@@ -13,18 +12,7 @@ import { useFullscreen, useToggle } from 'react-use';
 import useGlobal from '../../hooks/useGlobal';
 import useLog from '../../hooks/useLog';
 import useModal from '../../hooks/useModal';
-import { getNotificationColor } from '../../utils/colors';
-
-const UnreadChip = styled.span<{ unreadLevel: number }>`
-  position: absolute;
-  top: 0.5em;
-  left: 0.5em;
-  background-color: ${({ unreadLevel }) => getNotificationColor(unreadLevel)};
-  border-radius: 50%;
-  min-width: 14px;
-  font-size: 0.75em;
-  color: white;
-`;
+import { getNotificationIntent } from '../../utils/colors';
 
 function PixeliumHeader() {
   const { rootRef } = useGlobal();
@@ -40,43 +28,37 @@ function PixeliumHeader() {
 
   return (
     <InnerHeader>
-      <Toolbar orientation="horizontal">
+      <Toolbar>
         <Toolbar.Item
           title="About Pixelium"
-          titleOrientation="horizontal"
+          icon={<SvgLogoZakodium />}
           onClick={openAbout}
-        >
-          <SvgLogoZakodium />
-        </Toolbar.Item>
+        />
       </Toolbar>
 
-      <Toolbar orientation="horizontal">
+      <Toolbar>
         <Toolbar.Item
           title="User manual"
+          icon={<FaQuestionCircle />}
           onClick={() => window.open('https://zakodium.com', '_blank')}
-        >
-          <FaQuestionCircle />
-        </Toolbar.Item>
+        />
         <Toolbar.Item
           title="Logs"
-          titleOrientation="vertical"
+          icon={<FaBug />}
+          tag={unreadCount > 0 && unreadCount}
+          tagProps={{ intent: getNotificationIntent(unreadLevel) }}
           onClick={() => {
             openLogs();
             markAsRead();
           }}
-        >
-          <FaBug />
-          {unreadCount > 0 && (
-            <UnreadChip unreadLevel={unreadLevel}>{unreadCount}</UnreadChip>
-          )}
-        </Toolbar.Item>
-        <Toolbar.Item title="Settings">
-          <FaWrench />
-        </Toolbar.Item>
+        />
+        <Toolbar.Item title="Settings" icon={<FaWrench />} />
         {!isFullScreen && (
-          <Toolbar.Item title="Full Screen" onClick={toggleFullscreen}>
-            <FaRegWindowMaximize />
-          </Toolbar.Item>
+          <Toolbar.Item
+            title="Full Screen"
+            icon={<FaRegWindowMaximize />}
+            onClick={toggleFullscreen}
+          />
         )}
       </Toolbar>
     </InnerHeader>

diff --git a/src/components/modal/AboutModal.tsx b/src/components/modal/AboutModal.tsx
@@ -1,14 +1,13 @@
+import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { memo } from 'react';
 import { FaFileSignature, FaGithub } from 'react-icons/fa';
-import { Modal } from 'react-science/ui';
 
 import hearcLogo from '../../assets/hearc-logo.png';
 import zakodiumLogo from '../../assets/zakodium-logo.png';
 import useModal from '../../hooks/useModal';
 
 import StyledModalBody from './utils/StyledModalBody';
-import StyledModalHeader from './utils/StyledModalHeader';
 
 const AboutModalStyle = styled.div`
   display: flex;
@@ -80,13 +79,10 @@ function AboutModal() {
   const { isOpen, close } = useModal('about');
 
   return (
-    <Modal isOpen={isOpen} onRequestClose={close} hasCloseButton>
+    <Dialog title="About Pixelium" isOpen={isOpen} onClose={close}>
       <AboutModalStyle>
-        <StyledModalHeader>
-          <Modal.Header>About Pixelium</Modal.Header>
-        </StyledModalHeader>
         <StyledModalBody>
-          <Modal.Body>
+          <DialogBody>
             <AboutContent>
               <h2>Pixelium</h2>
               <p>
@@ -116,9 +112,9 @@ function AboutModal() {
               </p>
               <p>All rights reserved. Released under MIT license.</p>
             </AboutContent>
-          </Modal.Body>
+          </DialogBody>
         </StyledModalBody>
-        <Modal.Footer>
+        <DialogFooter>
           <LinksContainer>
             <a
               href="https://github.com/zakodium-oss/pixelium"
@@ -135,9 +131,9 @@ function AboutModal() {
               <FaFileSignature /> License
             </a>
           </LinksContainer>
-        </Modal.Footer>
+        </DialogFooter>
       </AboutModalStyle>
-    </Modal>
+    </Dialog>
   );
 }
 

diff --git a/src/components/modal/ExportModal.tsx b/src/components/modal/ExportModal.tsx
@@ -1,17 +1,23 @@
+import {
+  Checkbox,
+  InputGroup,
+  FormGroup,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+} from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { memo, useCallback, useMemo, useState } from 'react';
-import { Button, Checkbox, Field, Input, Modal } from 'react-science/ui';
+import { Button } from 'react-science/ui';
 
 import useData from '../../hooks/useData';
 import useLog from '../../hooks/useLog';
 import useModal from '../../hooks/useModal';
 import usePreferences from '../../hooks/usePreferences';
 import useView from '../../hooks/useView';
-import { buttons } from '../../utils/colors';
 import { savePixeliumBundle } from '../../utils/export';
 
 import StyledModalBody from './utils/StyledModalBody';
-import StyledModalHeader from './utils/StyledModalHeader';
 
 const ExportStyle = styled.div`
   display: flex;
@@ -83,18 +89,18 @@ function ExportModal() {
   ]);
 
   return (
-    <Modal isOpen={isOpen} onRequestClose={close} hasCloseButton>
+    <Dialog
+      title="Export Pixelium file"
+      isOpen={isOpen}
+      onClose={close}
+      style={{ width: 'fit-content' }}
+    >
       <ExportStyle>
-        <StyledModalHeader>
-          <Modal.Header>
-            <div className="header">Export Pixelium file</div>
-          </Modal.Header>
-        </StyledModalHeader>
-        <Modal.Body>
+        <DialogBody>
           <StyledModalBody>
             <div>
-              <Field name="name" label="Name">
-                <Input
+              <FormGroup label="Name">
+                <InputGroup
                   type="text"
                   placeholder="Untitled"
                   value={formState.name}
@@ -105,47 +111,50 @@ function ExportModal() {
                     })
                   }
                 />
-              </Field>
-              <Field name="view" label="Include view">
-                <Checkbox
-                  checked={formState.view}
-                  onChange={(checked) =>
-                    setFormState({ ...formState, view: checked as boolean })
-                  }
-                />
-              </Field>
-              <Field name="preferences" label="Include preferences">
-                <Checkbox
-                  checked={formState.preferences}
-                  onChange={(checked) =>
-                    setFormState({
-                      ...formState,
-                      preferences: checked as boolean,
-                    })
-                  }
-                />
-              </Field>
-              <Field name="data" label="Include data">
-                <Checkbox
-                  checked={formState.data}
-                  onChange={(checked) =>
-                    setFormState({
-                      ...formState,
-                      data: checked as boolean,
-                    })
-                  }
-                />
-              </Field>
+              </FormGroup>
+              <Checkbox
+                label="Include view"
+                alignIndicator="right"
+                checked={formState.view}
+                onChange={(e) =>
+                  setFormState({ ...formState, view: e.target.checked })
+                }
+              />
+              <Checkbox
+                label="Include preferences"
+                alignIndicator="right"
+                checked={formState.preferences}
+                onChange={(e) =>
+                  setFormState({
+                    ...formState,
+                    preferences: e.target.checked,
+                  })
+                }
+              />
+              <Checkbox
+                label="Include data"
+                alignIndicator="right"
+                checked={formState.data}
+                onChange={(e) =>
+                  setFormState({
+                    ...formState,
+                    data: e.target.checked,
+                  })
+                }
+              />
             </div>
           </StyledModalBody>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button backgroundColor={buttons.info} onClick={save}>
-            <SaveButtonInner>Save</SaveButtonInner>
-          </Button>
-        </Modal.Footer>
+        </DialogBody>
+        <DialogFooter
+          minimal
+          actions={
+            <Button intent="primary" onClick={save}>
+              <SaveButtonInner>Save</SaveButtonInner>
+            </Button>
+          }
+        />
       </ExportStyle>
-    </Modal>
+    </Dialog>
   );
 }