enhancement/adjust-formula-display (#214)

USACE · Feb 27, 2024 · 7c1c87c · 7c1c87c
1 parent 4b09e8e
commit 7c1c87c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hhd-ui",
-  "version": "0.15.4",
+  "version": "0.15.5",
   "private": true,
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "^30.0.3",

diff --git a/src/app-pages/collection-group/collectiongroup-timeseries-picker.jsx b/src/app-pages/collection-group/collectiongroup-timeseries-picker.jsx
@@ -42,12 +42,12 @@ export default connect(
               timeseriesSelected &&
               timeseriesSelected.name &&
               timeseriesSelected.instrument &&
-              `${timeseriesSelected.instrument}  |  ${timeseriesSelected.name}`
+              `${timeseriesSelected.instrument} | ${timeseriesSelected.name}`
             ) || 'Select a Timeseries'}
           >
             {timeseries.map((t, idx) => (
               <Dropdown.Item key={idx} onClick={() => setTimeseriesSelected(t)}>
-                {`${t.instrument}  |  ${t.name}`}
+                {`${t.instrument} | ${t.name}`}
               </Dropdown.Item>
 
             ))}

diff --git a/src/app-pages/instrument/formula/formula.jsx b/src/app-pages/instrument/formula/formula.jsx
@@ -19,6 +19,7 @@ export default connect(
     nonComputedTimeseriesItemsByRoute: timeseries,
   }) => {
     const [activeFormula, setActiveFormula] = useState(null);
+    const sortedTimeseries = timeseries.sort((a, b) =>  String(a.variable).localeCompare(b.variable));
 
     const createNewFormula = () => {
       doInstrumentFormulasSave({
@@ -47,17 +48,17 @@ export default connect(
           visualized, you can choose a single data series, or alter the values
           using a combination of series and constants.
         </p>
-        Available parameters
-        <div className='row'>
+        <i className='ml-3'>Available parameters</i>
+        <div className='row mt-2'>
           <div className='col-3'>
-            <ul className='list-group'>
-              {timeseries.map((ts, i) => (
+            <ul className='list-group limit-item-list'>
+              {sortedTimeseries.map((ts, i) => (
                 <li
                   key={i}
                   className='list-group-item list-group-item-action noselect'
                   onDoubleClick={() => insertParam(`[${ts.variable}]`)}
                 >
-                  {ts.slug}
+                  {ts.variable}
                 </li>
               ))}
             </ul>