diff --git a/oceannavigator/frontend/src/components/ComboBox.jsx b/oceannavigator/frontend/src/components/ComboBox.jsx index 0f9946f96..087449ee5 100644 --- a/oceannavigator/frontend/src/components/ComboBox.jsx +++ b/oceannavigator/frontend/src/components/ComboBox.jsx @@ -151,7 +151,17 @@ function ComboBox({ return (
-

{title}

+
+

{title}

+ {hasHelp && } +
@@ -177,11 +187,6 @@ function ComboBox({ {opts} - {hasHelp && ( - - )}
); } diff --git a/oceannavigator/frontend/src/components/QuiverSelector.jsx b/oceannavigator/frontend/src/components/QuiverSelector.jsx index 67a20c22c..9c7c613b6 100644 --- a/oceannavigator/frontend/src/components/QuiverSelector.jsx +++ b/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]; diff --git a/oceannavigator/frontend/src/components/TransectLimiter.jsx b/oceannavigator/frontend/src/components/TransectLimiter.jsx index 4e9b95e51..9a2d920b4 100644 --- a/oceannavigator/frontend/src/components/TransectLimiter.jsx +++ b/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 && ( - +
+
+ + + {children && ( + + )} +
+ + +
)} + + + + {_("titlehelp", { title })} + + + {children} + + + + + ); }; diff --git a/oceannavigator/frontend/src/components/plot-components/AreaWindow.jsx b/oceannavigator/frontend/src/components/plot-components/AreaWindow.jsx index 8a0abb507..7c2986d84 100644 --- a/oceannavigator/frontend/src/components/plot-components/AreaWindow.jsx +++ b/oceannavigator/frontend/src/components/plot-components/AreaWindow.jsx @@ -170,7 +170,10 @@ const AreaWindow = (props) => { onUpdate={handleQuiverUpdate} dataset={props.dataset_0.id} title={_("Arrows")} - /> + > + {_("arrows_help")} + + {/* Contour Selector drop down menu */} { onUpdate={handleContourUpdate} dataset={props.dataset_0.id} title={_("Additional Contours")} - /> + > + {_("contour_help")} + {_("Plot Options")} @@ -218,6 +223,7 @@ const AreaWindow = (props) => { url="/api/v2.0/plot/colormaps" title={_("Colourmap")} > + {_("colourmap_help")} diff --git a/oceannavigator/frontend/src/components/plot-components/LineWindow.jsx b/oceannavigator/frontend/src/components/plot-components/LineWindow.jsx index a0143be04..f71dbe190 100644 --- a/oceannavigator/frontend/src/components/plot-components/LineWindow.jsx +++ b/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")} diff --git a/oceannavigator/frontend/src/stylesheets/components/_ComboBox.scss b/oceannavigator/frontend/src/stylesheets/components/_ComboBox.scss index cf3c44692..eb0af2ac3 100644 --- a/oceannavigator/frontend/src/stylesheets/components/_ComboBox.scss +++ b/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; + } } diff --git a/oceannavigator/frontend/src/stylesheets/components/_TransectLimiter.scss b/oceannavigator/frontend/src/stylesheets/components/_TransectLimiter.scss index 04646b097..5ef0a4461 100644 --- a/oceannavigator/frontend/src/stylesheets/components/_TransectLimiter.scss +++ b/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; + } -} \ No newline at end of file + .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; + } + + + } +}