feat: add colored text to the ZonesTable (F1 - F2)

cheminfo · Feb 4, 2022 · fbcad47 · fbcad47
1 parent 59df13f
commit fbcad47
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/src/component/panels/ZonesPanel/ZonesPanel.tsx b/src/component/panels/ZonesPanel/ZonesPanel.tsx
@@ -266,6 +266,7 @@ export default function ZonesPanel() {
   const { displayerKey, xDomain, yDomain, activeTab } = useChartData();
   const { zones } = useSpectrum(emptyData) as Datum2D;
   const preferences = usePreferences();
+
   return (
     <MemoizedZonesPanel
       {...{ xDomain, yDomain, activeTab, displayerKey, preferences, zones }}

diff --git a/src/component/panels/ZonesPanel/ZonesTable.tsx b/src/component/panels/ZonesPanel/ZonesTable.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useMemo, useCallback, useRef } from 'react';
+import { useMemo, useCallback, useRef, ReactNode } from 'react';
 import { FaLink } from 'react-icons/fa';
 
 import checkModifierKeyActivated from '../../../data/utilities/checkModifierKeyActivated';
@@ -164,15 +164,29 @@ function ZonesTable({ tableData, onUnlink, context, nuclei }: ZonesTableProps) {
           </tr>
           <tr>
             <th id="tableMetaInfo.signal.x.delta" {...onSort}>
-              {nuclei[0]} {isSortedDesc('tableMetaInfo.signal.x.delta').content}
+              <SurroundedText text="F2">
+                {nuclei[0]}{' '}
+                {isSortedDesc('tableMetaInfo.signal.x.delta').content}
+              </SurroundedText>
             </th>
             <th id="tableMetaInfo.signal.y.delta" {...onSort}>
-              {nuclei[1]} {isSortedDesc('tableMetaInfo.signal.y.delta').content}
+              <SurroundedText text="F1">
+                {nuclei[1]}{' '}
+                {isSortedDesc('tableMetaInfo.signal.y.delta').content}
+              </SurroundedText>
+            </th>
+            <th>
+              <SurroundedText text="F2">{nuclei[0]}</SurroundedText>
+            </th>
+            <th>
+              <SurroundedText text="F1">{nuclei[1]}</SurroundedText>
+            </th>
+            <th>
+              <SurroundedText text="F2">{nuclei[0]}</SurroundedText>
+            </th>
+            <th>
+              <SurroundedText text="F1">{nuclei[1]}</SurroundedText>
             </th>
-            <th>{nuclei[0]}</th>
-            <th>{nuclei[1]}</th>
-            <th>{nuclei[0]}</th>
-            <th>{nuclei[1]}</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>
@@ -182,4 +196,21 @@ function ZonesTable({ tableData, onUnlink, context, nuclei }: ZonesTableProps) {
   );
 }
 
+function SurroundedText(props: { text: 'F1' | 'F2'; children: ReactNode }) {
+  return (
+    <>
+      <div
+        style={{
+          position: 'absolute',
+          fontSize: 8,
+          color: '#3539E6',
+        }}
+      >
+        {props.text}
+      </div>
+      <div style={{ marginLeft: 5 }}>{props.children}</div>
+    </>
+  );
+}
+
 export default ZonesTable;