feat: add info in image list (#100)

* feat: add info in image list * feat: add colorModel icons * chore: update react-science * feat: merge color model, channels and bit depth in one column * fix: rename title to tooltip in toolbar popover item * fix: rename title to tooltip in export tool * chore: update react-science
zakodium-oss · Apr 9, 2024 · 4ccb071 · 4ccb071
1 parent 4157416
commit 4ccb071
Show file tree

Hide file tree

Showing 12 changed files with 415 additions and 263 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "react-map-interaction": "^2.1.0",
     "react-plot": "^1.4.2",
     "react-roi": "^0.14.0",
-    "react-science": "^0.36.0",
+    "react-science": "^3.1.0",
     "react-use": "^17.4.0"
   },
   "volta": {

diff --git a/src/components/images/ImagesPanel.tsx b/src/components/images/ImagesPanel.tsx
@@ -1,6 +1,13 @@
-import styled from '@emotion/styled';
+import { Tooltip } from '@blueprintjs/core';
+import { ImageColorModel } from 'image-js';
 import { useCallback, useMemo } from 'react';
-import { Button } from 'react-science/ui';
+import {
+  TbDroplet,
+  TbDropletFilled,
+  TbDropletHalfFilled,
+  TbNumber16Small,
+} from 'react-icons/tb';
+import { Button, Table, ValueRenderers } from 'react-science/ui';
 
 import useCurrentTab from '../../hooks/useCurrentTab';
 import useData from '../../hooks/useData';
@@ -9,25 +16,6 @@ import useViewDispatch from '../../hooks/useViewDispatch';
 import { CLOSE_IMAGE } from '../../state/data/DataActionTypes';
 import { CLOSE_TAB, OPEN_TAB } from '../../state/view/ViewActionTypes';
 
-const TabTitle = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-`;
-
-const TabItem = styled.div<{ current: boolean }>`
-  cursor: default;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #e0e0e0;
-  &:hover {
-    background-color: #f0f0f0;
-  }
-  background-color: ${(props) => (props.current ? '#f0f0f0' : 'white')};
-`;
-
 export default function ImagesPanel() {
   const { images } = useData();
   const viewDispatch = useViewDispatch();
@@ -37,11 +25,65 @@ export default function ImagesPanel() {
     () =>
       Object.keys(images).map((identifier) => ({
         id: identifier,
-        title: <TabTitle>{images[identifier].metadata.name}</TabTitle>,
+        title: images[identifier].metadata.name,
+        width: images[identifier].image.width,
+        height: images[identifier].image.height,
+        bitDepth: images[identifier].image.bitDepth,
+        channels: images[identifier].image.channels,
+        colorModel: images[identifier].image.colorModel,
       })),
     [images],
   );
 
+  const ColorModelIcon = (colorModelObj: { colorModel: ImageColorModel }) => {
+    const { colorModel } = colorModelObj;
+    switch (colorModel) {
+      case 'RGB':
+        return <TbDropletFilled color="#6495ED" />;
+      case 'RGBA':
+        return <TbDropletHalfFilled color="#6495ED" />;
+      case 'GREY':
+        return <TbDropletFilled color="#5F6B7C" />;
+      case 'GREYA':
+        return <TbDropletHalfFilled color="#5F6B7C" />;
+      case 'BINARY':
+        return <TbDroplet />;
+      default:
+    }
+  };
+
+  const ColorModelTooltip = (item) => {
+    return (
+      <Tooltip
+        position="bottom"
+        content={
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '4px',
+            }}
+          >
+            <div>Channels : {item.channels}</div>
+            <div>Bit depth : {item.bitDepth}</div>
+          </div>
+        }
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <ColorModelIcon colorModel={item.colorModel} />
+          {item.bitDepth === 16 && (
+            <TbNumber16Small size={20} color="#5F6B7C" />
+          )}
+        </div>
+      </Tooltip>
+    );
+  };
+
   const currentTab = useCurrentTab();
 
   const openTab = useCallback(
@@ -68,25 +110,54 @@ export default function ImagesPanel() {
   return (
     <>
       {tabsItems.length > 0 ? (
-        <div>
+        <Table compact bordered>
+          <Table.Header>
+            <ValueRenderers.Header value="Title" />
+            <ValueRenderers.Header value="Width" />
+            <ValueRenderers.Header value="Height" />
+            <ValueRenderers.Header value="Color Model" />
+            <ValueRenderers.Header />
+          </Table.Header>
           {tabsItems.map((item) => (
-            <TabItem
+            <Table.Row
               key={item.id}
-              current={currentTab === item.id}
+              style={{
+                cursor: 'pointer',
+                backgroundColor: currentTab === item.id ? '#f0f0f0' : 'white',
+              }}
               onClick={() => openTab(item.id)}
             >
-              {item.title}
-              <Button
-                minimal
-                icon="cross"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  closeImage(item.id);
+              <ValueRenderers.Text value={item.title} />
+              <ValueRenderers.Number value={item.width} />
+              <ValueRenderers.Number value={item.height} />
+              <ValueRenderers.Component
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  padding: '4px',
+                }}
+              >
+                <ColorModelTooltip {...item} />
+              </ValueRenderers.Component>
+              <ValueRenderers.Component
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
                 }}
-              />
-            </TabItem>
+              >
+                <Button
+                  minimal
+                  small
+                  icon="cross"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    closeImage(item.id);
+                  }}
+                />
+              </ValueRenderers.Component>
+            </Table.Row>
           ))}
-        </div>
+        </Table>
       ) : null}
     </>
   );

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -30,20 +30,20 @@ function PixeliumHeader() {
     <InnerHeader>
       <Toolbar>
         <Toolbar.Item
-          title="About Pixelium"
+          tooltip="About Pixelium"
           icon={<SvgLogoZakodium />}
           onClick={openAbout}
         />
       </Toolbar>
 
       <Toolbar>
         <Toolbar.Item
-          title="User manual"
+          tooltip="User manual"
           icon={<FaQuestionCircle />}
           onClick={() => window.open('https://zakodium.com', '_blank')}
         />
         <Toolbar.Item
-          title="Logs"
+          tooltip="Logs"
           icon={<FaBug />}
           tag={unreadCount > 0 && unreadCount}
           tagProps={{ intent: getNotificationIntent(unreadLevel) }}
@@ -52,10 +52,10 @@ function PixeliumHeader() {
             markAsRead();
           }}
         />
-        <Toolbar.Item title="Settings" icon={<FaWrench />} />
+        <Toolbar.Item tooltip="Settings" icon={<FaWrench />} />
         {!isFullScreen && (
           <Toolbar.Item
-            title="Full Screen"
+            tooltip="Full Screen"
             icon={<FaRegWindowMaximize />}
             onClick={toggleFullscreen}
           />

diff --git a/src/components/roi/ROIToolbar.tsx b/src/components/roi/ROIToolbar.tsx
@@ -67,7 +67,7 @@ function ROIToolbar({ identifier }: ROIToolbarProps) {
       {rois.length > 0 && (
         <Toolbar>
           <Toolbar.Item
-            title={copyToClipBoardText}
+            tooltip={copyToClipBoardText}
             icon={<FaCopy />}
             onClick={handleCopyToClipboard}
           />

diff --git a/src/components/tool/ExportTool.tsx b/src/components/tool/ExportTool.tsx
@@ -25,7 +25,7 @@ function ExportTool() {
   const exportItem: ToolbarItemProps = {
     id: 'export',
     icon: <FaFileExport />,
-    title: 'Export',
+    tooltip: 'Export',
   };
 
   const exportOptions = useMemo(

diff --git a/src/components/tool/FilterTool.tsx b/src/components/tool/FilterTool.tsx
@@ -20,7 +20,7 @@ function FilterTool() {
   const filterItem: ToolbarItemProps = {
     id: 'filter',
     icon: <FaFilter />,
-    title: 'Filters',
+    tooltip: 'Filters',
   };
 
   const filterOptions = useMemo(

diff --git a/src/components/tool/GeometryTool.tsx b/src/components/tool/GeometryTool.tsx
@@ -19,7 +19,7 @@ function GeometryTool() {
   const geometryItem: ToolbarItemProps = {
     id: 'geometry',
     icon: <TbGeometry />,
-    title: 'Geometry',
+    tooltip: 'Geometry',
   };
 
   const geometryOptions = useMemo(

diff --git a/src/components/tool/ImportTool.tsx b/src/components/tool/ImportTool.tsx
@@ -30,7 +30,7 @@ function ImportTool() {
   return (
     <>
       <Toolbar.Item
-        title={'Import file'}
+        tooltip={'Import file'}
         icon={<FaFileImport />}
         onClick={openFileDialog}
       />

diff --git a/src/components/tool/MaskTool.tsx b/src/components/tool/MaskTool.tsx
@@ -17,7 +17,7 @@ function MaskTool() {
   if (pipelined === undefined) return null;
   if (!isGrey(pipelined)) return null;
 
-  return <Toolbar.Item title="Mask" icon={<FaMask />} onClick={open} />;
+  return <Toolbar.Item tooltip="Mask" icon={<FaMask />} onClick={open} />;
 }
 
 export default memo(MaskTool);
diff --git a/src/components/tool/MorphologyTool.tsx b/src/components/tool/MorphologyTool.tsx
@@ -19,7 +19,7 @@ function MorphologyTool() {
   const morphologyItem: ToolbarItemProps = {
     id: 'morphology',
     icon: <FaRecordVinyl />,
-    title: 'Morphology',
+    tooltip: 'Morphology',
   };
 
   const morphOptions = useMemo(

diff --git a/src/components/tool/ROITool.tsx b/src/components/tool/ROITool.tsx
@@ -13,7 +13,9 @@ function ROITool() {
   if (pipelined === undefined) return null;
   if (!isBinary(pipelined)) return null;
 
-  return <Toolbar.Item title="Extract ROI" icon={<LuFocus />} onClick={open} />;
+  return (
+    <Toolbar.Item tooltip="Extract ROI" icon={<LuFocus />} onClick={open} />
+  );
 }
 
 export default memo(ROITool);