Help_Button_Style_changed

oceannavigator/frontend/src/components/ComboBox.jsx

@@ -151,7 +151,17 @@ function ComboBox({
 
     return (
       <div className="ComboBox input">
-        <h1 className="combobox-title">{title}</h1>
+         <div className="combobox-title-row">
+          <h1 className="combobox-title">{title}</h1>
+          {hasHelp && <Button
+            variant="link"
+            className="combobox-help-button"
+            onClick={openHelp}
+            aria-label={_("Open help for {{title}}", { title })}
+          >
+            {_("?")}
+          </Button>}
+        </div>
 
         <Modal show={showHelp} onHide={closeHelp} dialogClassName="helpdialog">
           <Modal.Header closeButton>
@@ -177,11 +187,6 @@ function ComboBox({
           {opts}
         </Form.Select>
 
-        {hasHelp && (
-          <Button variant="link" onClick={openHelp}>
-            {_(`Help`)}
-          </Button>
-        )}
       </div>
     );
   }

oceannavigator/frontend/src/components/QuiverSelector.jsx

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import { withTranslation } from "react-i18next";
 
 const QuiverSelector = ({ state, dataset, id, title, children, onUpdate, t: _ }) => {
-  // Mirror your old onUpdate method
   const handleUpdate = (key, value) => {
     const keys = Array.isArray(key) ? key : [key];
     const vals = Array.isArray(value) ? value : [value];

oceannavigator/frontend/src/components/TransectLimiter.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Form } from "react-bootstrap";
+import { Modal, Button, Form } from "react-bootstrap";
+import Icon from "./lib/Icon.jsx";
 import NumberBox from "./NumberBox.jsx";
 import PropTypes from "prop-types";
 import { withTranslation } from "react-i18next";
@@ -11,15 +12,18 @@ const TransectLimiter = ({
   state: propState,
   onUpdate,
   t: _,
+  children,
 }) => {
-  // Determine initial limit and value from propState
+  const [showHelp, setShowHelp] = useState(false);
+  const openHelp = () => setShowHelp(true);
+  const closeHelp = () => setShowHelp(false);
+
   const initialLimit = !(isNaN(propState) || propState === false);
   const initialValue = initialLimit ? parseInt(propState, 10) : 200;
 
   const [limit, setLimit] = useState(initialLimit);
   const [value, setValue] = useState(initialValue);
 
-  // Sync local state when propState changes
   useEffect(() => {
     if (isNaN(propState) || propState === false) {
       setLimit(false);
@@ -33,11 +37,7 @@ const TransectLimiter = ({
   const handleChecked = (e) => {
     const checked = e.target.checked;
     setLimit(checked);
-    if (checked) {
-      onUpdate(id, value);
-    } else {
-      onUpdate(id, false);
-    }
+    onUpdate(id, checked ? value : false);
   };
 
   const handleValueUpdate = (_key, newValue) => {
@@ -52,16 +52,49 @@ const TransectLimiter = ({
         checked={limit}
         onChange={handleChecked}
         label={title}
+        className="transect-title-row"
       />
 
       {limit && (
-        <NumberBox
-          id="depth"
-          state={value}
-          onUpdate={handleValueUpdate}
-          title={parameter}
-        />
+        <div className="threshold-block">
+          <div className="parameter-label-row">
+            <label className="parameter-label">{parameter}</label>
+
+            {children && (
+              <button
+                type="button"
+                className="help-btn"
+                onClick={openHelp}
+                aria-label={_("Open help for {{parameter}}", { parameter })}
+              >
+                ?
+              </button>
+            )}
+          </div>
+
+          <NumberBox
+            id="depth"
+            state={value}
+            onUpdate={handleValueUpdate}
+            title=""
+            inputId={`${id}-depth`}
+          />
+        </div>
       )}
+
+      <Modal show={showHelp} onHide={closeHelp} dialogClassName="helpdialog">
+        <Modal.Header closeButton>
+          <Modal.Title>{_("titlehelp", { title })}</Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body>{children}</Modal.Body>
+
+        <Modal.Footer>
+          <Button onClick={closeHelp}>
+            <Icon icon="close" /> {_(`Close`)}
+          </Button>
+        </Modal.Footer>
+      </Modal>
     </div>
   );
 };

oceannavigator/frontend/src/components/plot-components/AreaWindow.jsx

@@ -170,15 +170,20 @@ const AreaWindow = (props) => {
           onUpdate={handleQuiverUpdate}
           dataset={props.dataset_0.id}
           title={_("Arrows")}
-        />
+        >
+          {_("arrows_help")}
+        </QuiverSelector>
+
         {/* Contour Selector drop down menu */}
         <ContourSelector
           id="contour"
           state={contour}
           onUpdate={handleContourUpdate}
           dataset={props.dataset_0.id}
           title={_("Additional Contours")}
-        />
+        >
+          {_("contour_help")}
+        </ContourSelector>
 
         <Accordion>
           <Accordion.Header>{_("Plot Options")}</Accordion.Header>
@@ -218,6 +223,7 @@ const AreaWindow = (props) => {
           url="/api/v2.0/plot/colormaps"
           title={_("Colourmap")}
         >
+          {_("colourmap_help")}
           <img src="/api/v2.0/plot/colormaps.png/" alt="" />
         </ComboBox>
       </Card.Body>

oceannavigator/frontend/src/components/plot-components/LineWindow.jsx

@@ -213,7 +213,7 @@ const LineWindow = (props) => {
               id="colormap_diff"
               state={diffColormap}
               onUpdate={(_, value) => setDiffColormap(value)}
-              title={_("Diff. Colour Map")}
+              title={_("Diff. Colourmap")}
               url="/api/v2.0/plot/colormaps"
             >
               {_("colourmap_help")}
@@ -245,7 +245,7 @@ const LineWindow = (props) => {
           id="colormap"
           state={mainColormap}
           onUpdate={(_, value) => setMainColormap(value)}
-          title={_("Colour Map")}
+          title={_("Colourmap")}
           url="/api/v2.0/plot/colormaps"
         >
           {_("colourmap_help")}
@@ -274,7 +274,7 @@ const LineWindow = (props) => {
           id="colormap_right"
           state={rightColormap}
           onUpdate={(_, value) => setRightColormap(value)}
-          title={_("Colour Map")}
+          title={_("Colourmap")}
           url="/api/v2.0/plot/colormaps"
         >
           {_("colourmap_help")}

oceannavigator/frontend/src/stylesheets/components/_ComboBox.scss

@@ -3,4 +3,15 @@ div.ComboBox {
     font-size: small;
     font-weight: bold;
   }
+  .combobox-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .combobox-help-button {
+    padding: 0;
+  }
+  .form-select {
+    margin-top: 2px;
+  }
 }

oceannavigator/frontend/src/stylesheets/components/_TransectLimiter.scss

@@ -1,8 +1,37 @@
-div.TransectLimiter{
+div.TransectLimiter {
 
-    .TransectLimiter-title {
-      font-size: small;
-      font-weight: bold;
-    }
+  .threshold-block {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    margin-top: 6px;
+  }
 
-}
+  .parameter-label-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .parameter-label {
+    font-size: small;
+    font-weight: bold;
+    margin: 0;
+  }
+
+  .help-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 15px;
+    width: 21px;      
+  height: 22px;  
+    color: #077da5;
+
+     &:active {
+    background: #008cba; 
+  }
+
+
+  }
+}