fix: improve consistency of labels (#2970)

- Do not use uppercase in wrong places. - Remove unnecessary whitespaces. - Refactor Label component to wrap the form element with `<label>` to remove the need for `htmlFor` and automatically bind it to the element. - Drive-by: correct spelling error (spectrums instead of spectra).
cheminfo · Mar 19, 2024 · 92fd75d · 92fd75d
1 parent 544c2cc
commit 92fd75d
Show file tree

Hide file tree

Showing 74 changed files with 195 additions and 248 deletions.
diff --git a/src/component/1d/LinesSeries.tsx b/src/component/1d/LinesSeries.tsx
@@ -44,7 +44,7 @@ function LinesSeries() {
 
   const { setActiveSpectrum } = useSetActiveSpectrumAction();
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-1d)`} className="spectrums">
+    <g clipPath={`url(#${displayerKey}clip-chart-1d)`} className="spectra">
       {spectra.map((d, i) => (
         <g key={d.id}>
           <Line display={d.display} id={d.id} data={get1DDataXY(d)} index={i} />

diff --git a/src/component/EventsTrackers/KeysListenerTracker.tsx b/src/component/EventsTrackers/KeysListenerTracker.tsx
@@ -42,7 +42,7 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
   const {
     handleChangeOption,
     handleFullZoomOut,
-    alignSpectrumsVerticallyHandler,
+    alignSpectraVerticallyHandler,
     changeDisplayViewModeHandler,
   } = useToolsFunctions();
 
@@ -398,7 +398,7 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
             }
             case 'c': {
               if (allow1DTool && isToolVisible('spectraCenterAlignments')) {
-                alignSpectrumsVerticallyHandler();
+                alignSpectraVerticallyHandler();
               }
               break;
             }
@@ -455,7 +455,7 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
       }
     },
     [
-      alignSpectrumsVerticallyHandler,
+      alignSpectraVerticallyHandler,
       allow1DTool,
       changeDisplayViewModeHandler,
       dispatch,

diff --git a/src/component/context/DispatchContext.tsx b/src/component/context/DispatchContext.tsx
@@ -12,8 +12,8 @@ import { MoleculeActions } from '../reducer/actions/MoleculeActions';
 import { PeaksActions } from '../reducer/actions/PeaksActions';
 import { PreferencesActions } from '../reducer/actions/PreferencesActions';
 import { RangesActions } from '../reducer/actions/RangesActions';
+import { SpectrumActions } from '../reducer/actions/SpectraActions';
 import { SpectraAnalysisActions } from '../reducer/actions/SpectraAnalysisAction';
-import { SpectrumActions } from '../reducer/actions/SpectrumsActions';
 import { ToolsActions } from '../reducer/actions/ToolsActions';
 import { ZonesActions } from '../reducer/actions/ZonesActions';
 import { ActionType } from '../reducer/types/ActionType';

diff --git a/src/component/elements/Label.tsx b/src/component/elements/Label.tsx
@@ -32,8 +32,11 @@ export default function Label(props: LabelProps) {
     ...otherProps
   } = props;
   return (
-    <div style={{ display: 'flex', alignItems: 'center', ...style?.container }}>
-      <label
+    <label
+      style={{ display: 'flex', alignItems: 'center', ...style?.container }}
+      {...otherProps}
+    >
+      <span
         className={className}
         style={{
           fontSize: '12px',
@@ -63,8 +66,8 @@ export default function Label(props: LabelProps) {
             color={{ base: 'gray', hover: 'black' }}
           />
         )}
-      </label>
+      </span>
       <div style={style?.wrapper}>{children}</div>
-    </div>
+    </label>
   );
 }
diff --git a/src/component/header/ApodizationOptionsPanel.tsx b/src/component/header/ApodizationOptionsPanel.tsx
@@ -93,8 +93,8 @@ function ApodizationOptionsInnerPanel(
         {({ submitForm }) => (
           <>
             <Label
-              title="Line broadening : "
-              shortTitle="LB :"
+              title="Line broadening:"
+              shortTitle="LB:"
               style={headerLabelStyle}
             >
               <FormikInput
@@ -108,8 +108,8 @@ function ApodizationOptionsInnerPanel(
               />
             </Label>
             <Label
-              title="Gauss broadening :"
-              shortTitle="GB :"
+              title="Gauss broadening:"
+              shortTitle="GB:"
               style={headerLabelStyle}
             >
               <FormikInput
@@ -123,8 +123,8 @@ function ApodizationOptionsInnerPanel(
               />
             </Label>
             <Label
-              title="lineBroadeningCenter [0 - 1] : "
-              shortTitle="LB Center :"
+              title="Line broadening center [0 - 1]:"
+              shortTitle="LB center:"
               style={headerLabelStyle}
             >
               <FormikInput
@@ -137,11 +137,7 @@ function ApodizationOptionsInnerPanel(
                 debounceTime={250}
               />
             </Label>
-            <Label
-              title="Live preview "
-              htmlFor="livePreview"
-              style={{ label: { padding: '0 5px' } }}
-            >
+            <Label title="Live preview" style={{ label: { padding: '0 5px' } }}>
               <FormikCheckBox name="livePreview" />
             </Label>
 

diff --git a/src/component/header/AutoPeakPickingOptionPanel.tsx b/src/component/header/AutoPeakPickingOptionPanel.tsx
@@ -80,16 +80,16 @@ function AutoPeakPickingOptionPanel() {
       >
         {({ handleSubmit, isValid }) => (
           <>
-            <Label title="Direction : " shortTitle="" style={headerLabelStyle}>
+            <Label title="Direction:" shortTitle="" style={headerLabelStyle}>
               <FormikSelect
                 name="direction"
                 items={LookFor}
                 style={{ width: '85px' }}
               />
             </Label>
             <Label
-              title="Max Number Of Peaks :"
-              shortTitle="Peaks number :"
+              title="Max number of peaks:"
+              shortTitle="Max peaks:"
               style={headerLabelStyle}
             >
               <FormikInput
@@ -101,8 +101,8 @@ function AutoPeakPickingOptionPanel() {
               />
             </Label>
             <Label
-              title="Noise factor :"
-              shortTitle="Noise :"
+              title="Noise factor:"
+              shortTitle="Noise:"
               style={headerLabelStyle}
             >
               <FormikInput
@@ -113,8 +113,8 @@ function AutoPeakPickingOptionPanel() {
               />
             </Label>
             <Label
-              title="Min Max Ratio :"
-              shortTitle="Ratio :"
+              title="Min/max Ratio:"
+              shortTitle="Ratio:"
               style={headerLabelStyle}
             >
               <FormikInput

diff --git a/src/component/header/BaseLineCorrectionPanel.tsx b/src/component/header/BaseLineCorrectionPanel.tsx
@@ -151,15 +151,15 @@ function BaseLineCorrectionInnerPanel(
           <>
             {algorithm && algorithm === 'airpls' && (
               <div style={{ display: 'flex' }}>
-                <Label title="maxIterations:" style={headerLabelStyle}>
+                <Label title="Max iterations:" style={headerLabelStyle}>
                   <FormikInput
                     type="number"
                     name="maxIterations"
                     debounceTime={250}
                     style={inputStyle}
                   />
                 </Label>
-                <Label title="tolerance:" style={headerLabelStyle}>
+                <Label title="Tolerance:" style={headerLabelStyle}>
                   <FormikInput
                     type="number"
                     name="tolerance"
@@ -173,8 +173,8 @@ function BaseLineCorrectionInnerPanel(
             {algorithm &&
               ['autoPolynomial', 'polynomial'].includes(algorithm) && (
                 <Label
-                  title="degree [ 1 - 6 ]:"
-                  shortTitle="degree :"
+                  title="Degree [1 - 6]:"
+                  shortTitle="Degree:"
                   style={headerLabelStyle}
                 >
                   <FormikInput
@@ -188,11 +188,7 @@ function BaseLineCorrectionInnerPanel(
                 </Label>
               )}
 
-            <Label
-              title="live preview "
-              htmlFor="livePreview"
-              style={headerLabelStyle}
-            >
+            <Label title="Live preview" style={headerLabelStyle}>
               <FormikCheckBox name="livePreview" />
             </Label>
 

diff --git a/src/component/header/Header.tsx b/src/component/header/Header.tsx
@@ -201,7 +201,7 @@ function HeaderInner(props: HeaderInnerProps) {
                 <Toolbar.Item
                   id="full-screen"
                   onClick={fullscreen.toggle}
-                  title="Full Screen"
+                  title="Full screen"
                   className="windowButton"
                   icon={<FaRegWindowMaximize />}
                 />

diff --git a/src/component/header/PhaseCorrectionPanel.tsx b/src/component/header/PhaseCorrectionPanel.tsx
@@ -191,7 +191,7 @@ export default function PhaseCorrectionPanel() {
       </div>
       {phaseCorrectionTypeItem?.value === 'manual' && (
         <>
-          <Label title="PH0 :" style={headerLabelStyle}>
+          <Label title="PH0:" style={headerLabelStyle}>
             <Input
               name="ph0"
               style={inputStyle}
@@ -201,7 +201,7 @@ export default function PhaseCorrectionPanel() {
               debounceTime={250}
             />
           </Label>
-          <Label title="PH1 :" style={headerLabelStyle}>
+          <Label title="PH1:" style={headerLabelStyle}>
             <Input
               name="ph1"
               style={inputStyle}

diff --git a/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx b/src/component/header/PhaseCorrectionTwoDimensionsPanel.tsx
@@ -193,7 +193,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
 
   return (
     <HeaderContainer style={{ padding: '0 5px' }}>
-      <Label title="Direction :" style={headerLabelStyle}>
+      <Label title="Direction:" style={headerLabelStyle}>
         <Toolbar>
           <Toolbar.Item
             css={css`
@@ -226,7 +226,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
         </Toolbar>
       </div>
 
-      <Label title="PH0 :" style={headerLabelStyle}>
+      <Label title="PH0:" style={headerLabelStyle}>
         <Input
           name="ph0"
           style={inputStyle}
@@ -236,7 +236,7 @@ export default function PhaseCorrectionTwoDimensionsPanel() {
           debounceTime={250}
         />
       </Label>
-      <Label title="PH1 :" style={headerLabelStyle}>
+      <Label title="PH1:" style={headerLabelStyle}>
         <Input
           name="ph1"
           style={inputStyle}

diff --git a/src/component/header/RangesPickingOptionPanel.tsx b/src/component/header/RangesPickingOptionPanel.tsx
@@ -52,14 +52,10 @@ function RangesPickingOptionPanel() {
       >
         {({ handleSubmit, isValid }) => (
           <>
-            <Label
-              title="Detect negative:"
-              htmlFor="lookNegative"
-              style={headerLabelStyle}
-            >
+            <Label title="Detect negative" style={headerLabelStyle}>
               <FormikCheckBox name="lookNegative" />
             </Label>
-            <Label title="Min Max Ratio:" style={headerLabelStyle}>
+            <Label title="Min/max ratio:" style={headerLabelStyle}>
               <FormikInput
                 type="number"
                 name="minMaxRatio"

diff --git a/src/component/header/ZeroFillingOptionsPanel.tsx b/src/component/header/ZeroFillingOptionsPanel.tsx
@@ -82,18 +82,14 @@ function ZeroFillingOptionsInnerPanel(props: { size: number }) {
       >
         {({ submitForm }) => (
           <>
-            <Label title="Size:  " style={headerLabelStyle}>
+            <Label title="Size:" style={headerLabelStyle}>
               <FormikSelect
                 items={Sizes}
                 style={{ marginLeft: 10, marginRight: 10 }}
                 name="nbPoints"
               />
             </Label>
-            <Label
-              title="Live preview "
-              htmlFor="livePreview"
-              style={{ label: { padding: '0 5px' } }}
-            >
+            <Label title="Live preview" style={{ label: { padding: '0 5px' } }}>
               <FormikCheckBox name="livePreview" />
             </Label>
             <FormikOnChange

diff --git a/src/component/header/Zones2DOptionPanel.tsx b/src/component/header/Zones2DOptionPanel.tsx
@@ -49,11 +49,7 @@ function Zones2DOptionPanel() {
       >
         {({ handleSubmit, isValid }) => (
           <>
-            <Label
-              title="Noise factor :"
-              htmlFor="livePreview"
-              style={headerLabelStyle}
-            >
+            <Label title="Noise factor:" style={headerLabelStyle}>
               <FormikInput
                 type="number"
                 name="zonesNoiseFactor"
@@ -65,11 +61,7 @@ function Zones2DOptionPanel() {
                 step={1}
               />
             </Label>
-            <Label
-              title="MinMaxRatio :"
-              htmlFor="livePreview"
-              style={headerLabelStyle}
-            >
+            <Label title="Min/max ratio:" style={headerLabelStyle}>
               <FormikInput
                 type="number"
                 name="zonesMinMaxRatio"

diff --git a/src/component/hooks/useToolsFunctions.ts b/src/component/hooks/useToolsFunctions.ts
@@ -89,9 +89,9 @@ export default function useToolsFunctions() {
     setIsRealSpectrumShown(!isRealSpectrumShown);
   }, [dispatch, isRealSpectrumShown]);
 
-  const alignSpectrumsVerticallyHandler = useCallback(() => {
+  const alignSpectraVerticallyHandler = useCallback(() => {
     dispatch({
-      type: 'SET_SPECTRUMS_VERTICAL_ALIGN',
+      type: 'SET_SPECTRA_VERTICAL_ALIGN',
     });
   }, [dispatch]);
 
@@ -100,7 +100,7 @@ export default function useToolsFunctions() {
     handleFullZoomOut,
     changeDisplayViewModeHandler,
     changeSpectrumViewHandler,
-    alignSpectrumsVerticallyHandler,
+    alignSpectraVerticallyHandler,
     isRealSpectrumShown,
   };
 }
diff --git a/src/component/modal/AboutPredictionModal.tsx b/src/component/modal/AboutPredictionModal.tsx
@@ -46,12 +46,12 @@ function AboutPredictionModal() {
       <Toolbar.Item
         icon={<FaInfo />}
         onClick={openDialog}
-        title="About Prediction"
+        title="About prediction"
       />
       <Dialog
         isOpen={isOpenDialog}
         onClose={closeDialog}
-        title="About Prediction"
+        title="About prediction"
         style={{ width: '600px' }}
       >
         <DialogBody css={styles}>

diff --git a/src/component/modal/AboutSpectrumSimulationModal.tsx b/src/component/modal/AboutSpectrumSimulationModal.tsx
@@ -46,7 +46,7 @@ function AboutSpectrumSimulationModal() {
       <Toolbar>
         <Toolbar.Item
           onClick={openDialog}
-          title="About Prediction"
+          title="About prediction"
           icon={<FaInfo />}
         />
       </Toolbar>

diff --git a/src/component/modal/EditPeakShapeModal.tsx b/src/component/modal/EditPeakShapeModal.tsx
@@ -127,7 +127,7 @@ function EditPeakShapeModal({
           onSubmit={changePeakShapeHandler}
         >
           <>
-            <Label title="kind : " style={labelStyle}>
+            <Label title="Kind:" style={labelStyle}>
               <Select
                 items={KINDS}
                 style={{ margin: 0, height: 30 }}
@@ -136,12 +136,12 @@ function EditPeakShapeModal({
               />
             </Label>
 
-            <Label title="fwhm: " style={labelStyle}>
+            <Label title="FWHM:" style={labelStyle}>
               <FormikInput name="fwhm" style={inputStyle} />
             </Label>
 
             {kind === 'pseudoVoigt' && (
-              <Label title="mu: " style={labelStyle}>
+              <Label title="Mu:" style={labelStyle}>
                 <FormikInput name="mu" style={inputStyle} />
               </Label>
             )}

diff --git a/src/component/modal/LoadJCAMPModal.tsx b/src/component/modal/LoadJCAMPModal.tsx
@@ -78,7 +78,7 @@ export function LoadJCAMPModal({ onCloseDialog, isOpen }: LoadJCAMPModalProps) {
     <Dialog
       isOpen
       onClose={onCloseDialog}
-      title="Load JCAMP Dialog"
+      title="Load JCAMP"
       style={{ minWidth: '400px' }}
     >
       <DialogBody