From 7c1c87c08a740cc799a5c5245fa7aac3fc3461e7 Mon Sep 17 00:00:00 2001
From: Kevin Jackson <30411845+KevinJJackson@users.noreply.github.com>
Date: Tue, 27 Feb 2024 15:35:47 -0500
Subject: [PATCH] enhancement/adjust-formula-display (#214)

---
 package.json                                          |  2 +-
 .../collectiongroup-timeseries-picker.jsx             |  4 ++--
 src/app-pages/instrument/formula/formula.jsx          | 11 ++++++-----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 2722a42c..41548cd5 100644
--- 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
index 71c1a025..4940204a 100644
--- 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
index b032a62a..7773c099 100644
--- 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>