refactor: remove css from more components

cheminfo · Jan 15, 2025 · 12854a1 · 12854a1
1 parent e4cc762
commit 12854a1
Show file tree

Hide file tree

Showing 21 changed files with 275 additions and 377 deletions.
diff --git a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Ranges, Zones } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 import { ResponsiveChart } from 'react-d3-utils';
@@ -32,7 +31,7 @@ interface DraggableStructureProps {
 
 const AUTO_CROP_MARGIN = 30;
 
-const style = css`
+const ReactRnd = styled(Rnd)`
   border: 1px solid transparent;
 
   button {
@@ -100,7 +99,7 @@ export function DraggableStructure(props: DraggableStructureProps) {
   if (!viewerRef) return null;
 
   return (
-    <Rnd
+    <ReactRnd
       default={moleculeView.floating.bounding}
       minWidth={90 + AUTO_CROP_MARGIN * 2}
       minHeight={100 + AUTO_CROP_MARGIN * 2}
@@ -116,7 +115,6 @@ export function DraggableStructure(props: DraggableStructureProps) {
         dragFloatMoleculeHandler({ x, y });
       }}
       resizeHandleWrapperStyle={{ backgroundColor: 'white' }}
-      css={style}
     >
       <div
         className="content"
@@ -167,6 +165,6 @@ export function DraggableStructure(props: DraggableStructureProps) {
         </ResponsiveChart>
       </div>
       {modal}
-    </Rnd>
+    </ReactRnd>
   );
 }
diff --git a/src/component/1d/FooterBanner.tsx b/src/component/1d/FooterBanner.tsx
@@ -10,70 +10,19 @@ import { useBrushTracker } from '../EventsTrackers/BrushTracker.js';
 import { useMouseTracker } from '../EventsTrackers/MouseTracker.js';
 import { useChartData } from '../context/ChartContext.js';
 import { useScaleChecked } from '../context/ScaleContext.js';
+import { FooterContainer, InfoItem } from '../elements/Footer.js';
 import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
 import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus.js';
 import useSpectrum from '../hooks/useSpectrum.js';
 
-const Container = styled.div`
-  display: flex;
+const FlexInfoItem = styled(InfoItem)`
   align-items: center;
-  user-select: none;
-  background-color: #f7f7f7;
-  height: 30px;
-  padding: 6px;
-  color: #8d0018;
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  container-type: inline-size;
-
-  @container (max-width:600px) {
-    .small-width-none {
-      display: none !important;
-    }
-  }
-
-  .flex-row {
-    display: flex;
-    align-items: center;
-  }
-
-  div {
-    margin: 0 10px;
-    display: inline-block;
-
-    .label {
-      font-size: 12px;
-      color: #4d4d4d;
-      font-weight: bold;
-    }
-
-    .value {
-      font-weight: bold;
-      font-size: 14px;
-      display: inline-block;
-    }
-
-    .unit {
-      font-weight: bold;
-      font-size: 10px;
-    }
-
-    .x-value {
-      min-width: 50px;
-    }
-
-    .y-value {
-      min-width: 80px;
-    }
-  }
-
-  .separator {
-    border-left: 2px solid gray;
-    margin: 0 20px;
-    width: 1px;
-    height: 100%;
-  }
+`;
+const Separator = styled.div`
+  border-left: 2px solid gray;
+  margin: 0 20px;
+  width: 1px;
+  height: 100%;
 `;
 
 interface FooterBannerInnerProps {
@@ -111,7 +60,7 @@ function FooterBannerInner({
     position.x > width - margin.right ||
     position.y > height - margin.bottom
   ) {
-    return <Container />;
+    return <FooterContainer />;
   }
 
   function getXIndex(xPosition) {
@@ -134,82 +83,82 @@ function FooterBannerInner({
   const isBrushing = step === 'brushing' && mouseButton === 'main';
 
   return (
-    <Container>
+    <FooterContainer>
       <BsCursor />
       <div>
-        <span className="label"> 𝛅: </span>
-        <span className="value">{format(scaleX().invert(position.x))}</span>
-        <span className="unit">ppm</span>
+        <InfoItem.Label> 𝛅: </InfoItem.Label>
+        <InfoItem.Value>{format(scaleX().invert(position.x))}</InfoItem.Value>
+        <InfoItem.Unit>ppm</InfoItem.Unit>
         {activeSpectrum && spectrum?.info?.originFrequency && (
           <>
-            <span className="value">
+            <InfoItem.Value>
               &nbsp;(
               {format(
                 scaleX().invert(position.x) * spectrum?.info?.originFrequency,
                 'hz',
               )}
-            </span>
-            <span className="unit">Hz</span>
-            <span className="value">) </span>
-            <span className="small-width-none">
+            </InfoItem.Value>
+            <InfoItem.Unit>Hz</InfoItem.Unit>
+            <InfoItem.Value>) </InfoItem.Value>
+            <InfoItem>
               <span>,</span>
-              <span className="label"> Index: </span>
-              <span className="value">{getXIndex(position.x)}</span>
-            </span>
+              <InfoItem.Label> Index: </InfoItem.Label>
+              <InfoItem.Value>{getXIndex(position.x)}</InfoItem.Value>
+            </InfoItem>
           </>
         )}
       </div>
 
       {isBrushing && (
-        <div className="flex-row small-width-none">
-          <span className="label"> Δppm: </span>
-          <span className="value">
+        <FlexInfoItem autoHide>
+          <InfoItem.Label> Δppm: </InfoItem.Label>
+          <InfoItem.Value>
             {(scaleX().invert(startX) - scaleX().invert(endX)).toPrecision(6)}
-          </span>
-        </div>
+          </InfoItem.Value>
+        </FlexInfoItem>
       )}
 
       {activeSpectrum && (
-        <div className=" flex-row small-width-none">
+        <FlexInfoItem autoHide>
           {spectrum?.info?.originFrequency && isBrushing && (
             <div>
-              <span className="label"> ΔHz: </span>
-              <span className="value">
+              <InfoItem.Label> ΔHz: </InfoItem.Label>
+              <InfoItem.Value>
                 {(
                   (scaleX().invert(startX) - scaleX().invert(endX)) *
                   spectrum?.info?.originFrequency
                 ).toPrecision(5)}
-              </span>
+              </InfoItem.Value>
             </div>
           )}
           {isBrushing && (
             <div>
-              <span className="label"> ratio :</span>
-              <span className="value">
+              <InfoItem.Label> ratio :</InfoItem.Label>
+              <InfoItem.Value>
                 {(
                   (getYValue(startX) / (getYValue(endX) || Number.MIN_VALUE)) *
                   100
                 ).toFixed(2)}
                 %
-              </span>
+              </InfoItem.Value>
             </div>
           )}
-        </div>
+        </FlexInfoItem>
       )}
 
       {activeSpectrum && (
-        <div className="flex-row small-width-none">
-          <div className="separator" />
+        <FlexInfoItem>
+          <Separator />
           <IoPulseSharp />
           <div>
-            <span className="label">Intensity: </span>
-            <span className="value y-value">
+            <InfoItem.Label>Intensity: </InfoItem.Label>
+            <InfoItem.Value style={{ minWidth: 80 }}>
               {format(getYValue(position.x))}
-            </span>
+            </InfoItem.Value>
           </div>
-        </div>
+        </FlexInfoItem>
       )}
-    </Container>
+    </FooterContainer>
   );
 }
 

diff --git a/src/component/1d/XAxis.tsx b/src/component/1d/XAxis.tsx
@@ -4,19 +4,7 @@ import { useEffect, useRef } from 'react';
 
 import { useChartData } from '../context/ChartContext.js';
 import { useScale } from '../context/ScaleContext.js';
-
-const AxisGroup = styled.g`
-  user-select: none;
-
-  path,
-  line {
-    fill: none;
-    stroke: black;
-    stroke-width: 1;
-    shape-rendering: crispedges;
-    user-select: none;
-  }
-`;
+import { AxisGroup } from '../elements/AxisGroup.js';
 
 const GridGroup = styled.g`
   user-select: none;

diff --git a/src/component/1d/YAxis.tsx b/src/component/1d/YAxis.tsx
@@ -1,22 +1,9 @@
-import styled from '@emotion/styled';
 import * as d3 from 'd3';
 import { useEffect, useRef } from 'react';
 
 import { useChartData } from '../context/ChartContext.js';
 import { useScale } from '../context/ScaleContext.js';
-
-const AxisGroup = styled.g`
-  user-select: none;
-
-  path,
-  line {
-    fill: none;
-    stroke: black;
-    stroke-width: 1;
-    shape-rendering: crispedges;
-    user-select: none;
-  }
-`;
+import { AxisGroup } from '../elements/AxisGroup.js';
 
 interface YAxisProps {
   show?: boolean;

diff --git a/src/component/1d/multiplicityTree/MultiplicityTree.tsx b/src/component/1d/multiplicityTree/MultiplicityTree.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 import type { Spectrum1D } from 'nmr-load-save';
 import type { Range } from 'nmr-processing';
@@ -20,15 +19,13 @@ import { AssignmentActionsButtons } from '../ranges/AssignmentActionsButtons.js'
 import type { TreeNodes } from './generateTreeNodes.js';
 import { generateTreeNodes } from './generateTreeNodes.js';
 
-const styles = {
-  cursor: 'default',
-  opacity: 0.6,
-  strokeWidth: 1,
-};
+const Group = styled.g<{ isActive: boolean; isHighlighted: boolean }>`
+  cursor: default;
+  opacity: ${({ isHighlighted }) => (isHighlighted ? '1' : '0.6')};
+  stroke-width: ${({ isHighlighted }) => (isHighlighted ? '1.5' : '1')}px;
 
-const cssStyle = css`
   .signal-target {
-    visibility: hidden;
+    visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};
   }
 
   &:hover {
@@ -159,10 +156,9 @@ function Tree(props: TreeProps) {
     treeHeight + headTextMargin + multiplicityTextSize + padding * 2;
 
   return (
-    <g
-      style={
-        isHighlighted ? { ...styles, opacity: 1, strokeWidth: 1.5 } : styles
-      }
+    <Group
+      isActive={assignment.isActive}
+      isHighlighted={isHighlighted}
       onMouseEnter={() => {
         assignment.show('x');
         highlight.show();
@@ -172,7 +168,6 @@ function Tree(props: TreeProps) {
         highlight.hide();
       }}
       pointerEvents="bounding-box"
-      {...(!assignment.isActive && { css: cssStyle })}
     >
       <rect
         x={x}
@@ -254,7 +249,7 @@ function Tree(props: TreeProps) {
         onUnAssign={unAssignHandler}
         borderRadius={16}
       />
-    </g>
+    </Group>
   );
 }
 

diff --git a/src/component/1d/ranges/Range.tsx b/src/component/1d/ranges/Range.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Range as RangeType } from 'nmr-processing';
 import { LuLink, LuUnlink } from 'react-icons/lu';
 import { PiTextTBold, PiTextTSlashBold } from 'react-icons/pi';
@@ -34,9 +33,9 @@ import { useScaleX } from '../utilities/scale.js';
 import { AssignmentLabel } from './AssignmentLabel.js';
 import { Atoms } from './Atoms.js';
 
-const style = css`
+const Group = styled.g<{ isActive: boolean }>`
   .target {
-    visibility: hidden;
+    visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};
   }
 
   &:hover {
@@ -180,13 +179,14 @@ function Range({ range, selectedTool, relativeFormat }: RangeProps) {
     },
   ];
   return (
-    <g
+    <Group
       data-testid="range"
       style={{ outline: 'none' }}
       key={id}
       onMouseEnter={mouseEnterHandler}
       onMouseLeave={mouseLeaveHandler}
-      {...(!assignmentRange.isActive && { css: style })}
+      isActive={assignmentRange.isActive}
+      // {...(!assignmentRange.isActive && { css: style })}
     >
       <ActionsButtonsPopover
         targetTagName="g"
@@ -236,7 +236,7 @@ function Range({ range, selectedTool, relativeFormat }: RangeProps) {
           }}
         </ResizerWithScale>
       </ActionsButtonsPopover>
-    </g>
+    </Group>
   );
 }