fixed a bug where getPlotlyLayout()'s title text was showing task i…

…d values instead of texts by changing `selectedTaskIDs()` to return more info. see: [figure title doesn't match drop-down selector for unit #374]
reichlab · Feb 13, 2024 · 0048fff · 0048fff
1 parent a944977
commit 0048fff
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 11 deletions.
diff --git a/dist/predtimechart.bundle.js b/dist/predtimechart.bundle.js
diff --git a/src/index.html b/src/index.html
@@ -15,7 +15,7 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
 
-    <!-- predtimechart -->
+    <!-- plotly -->
     <script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
 </head>
 <body>

diff --git a/src/predtimechart.js b/src/predtimechart.js
@@ -811,16 +811,31 @@ const App = {
         });
     },
 
-    // returns the value(s) of the task ID <SELECT>(s) as an object similar to format of initial_task_ids, e.g.,
-    // {"scenario_id": 1, "location": "48"}
+    // Returns information about the task ID <SELECT>(s) as an object similar to format of `task_ids` except that each
+    // value is the selected object, rather than a list of all possible task IDs. Example return value:
+    // { "scenario_id": {"value": "2", "text": "scenario 2"},  "location": {"value": "48", "text": "Texas"} }
     selectedTaskIDs() {
         const theSelectedTaskIDs = {};  // return value. filled next
-        Object.keys(this.state.task_ids).forEach(function (taskIdKey) {
+        Object.keys(this.state.task_ids).forEach(taskIdKey => {
             const $taskIdSelect = $(`#${taskIdKey}`);  // created by _createUIElements()
-            theSelectedTaskIDs[taskIdKey] = $taskIdSelect.val();
+            const selectedTaskIdValue = $taskIdSelect.val();
+            const taskIdObj = App.state.task_ids[taskIdKey].find(taskID => taskID['value'] === selectedTaskIdValue);
+            theSelectedTaskIDs[taskIdKey] = taskIdObj;
         });
         return theSelectedTaskIDs;
     },
+    /**
+     * A fetch*() helper that returns a processed version of selectedTaskIDs() in the format of `initial_task_ids`. for
+     * example, if selectedTaskIDs() = {"scenario_id": {"value": "1", "text": "scenario 1"}, "location": {"value": "48", "text": "Texas"}},
+     * then this function returns {"scenario_id": "1", "location": "48"} .
+     */
+    selectedTaskIDValues() {
+        const taskIdVals = {};
+        for (const [taskID, taskIDObj] of Object.entries(this.selectedTaskIDs())) {
+            taskIdVals[taskID] = taskIDObj['value'];
+        }
+        return taskIdVals;
+    },
 
     //
     // date fetch-related functions
@@ -874,7 +889,7 @@ const App = {
     fetchCurrentTruth() {
         this.state.current_truth = [];  // clear in case of error
         return this._fetchData(false,  // Promise
-            this.state.selected_target_var, this.selectedTaskIDs(), this.state.current_date)
+            this.state.selected_target_var, this.selectedTaskIDValues(), this.state.current_date)
             .then(response => response.json())
             .then((data) => {
                 this.state.current_truth = data;
@@ -884,7 +899,7 @@ const App = {
     fetchAsOfTruth() {
         this.state.as_of_truth = [];  // clear in case of error
         return this._fetchData(false,  // Promise
-            this.state.selected_target_var, this.selectedTaskIDs(), this.state.selected_as_of_date)
+            this.state.selected_target_var, this.selectedTaskIDValues(), this.state.selected_as_of_date)
             .then(response => response.json())
             .then((data) => {
                 this.state.as_of_truth = data;
@@ -894,7 +909,7 @@ const App = {
     fetchForecasts() {
         this.state.forecasts = {};  // clear in case of error
         return this._fetchData(true,  // Promise
-            this.state.selected_target_var, this.selectedTaskIDs(), this.state.selected_as_of_date)
+            this.state.selected_target_var, this.selectedTaskIDValues(), this.state.selected_as_of_date)
             .then(response => response.json())  // Promise
             .then((data) => {
                 this.state.forecasts = data;
@@ -1004,12 +1019,12 @@ const App = {
         }
 
         const variable = this.state.target_variables.filter((obj) => obj.value === this.state.selected_target_var)[0].plot_text;
-        const taskIdVals = Object.values(this.selectedTaskIDs());  // e.g., {"scenario_id": 1, "location": "48"} -> [1, "48]
+        const taskIdTexts = Object.values(this.selectedTaskIDs()).map(taskID => taskID['text']);
         return {
             autosize: true,
             showlegend: false,
             title: {
-                text: `Forecasts of ${variable} <br> in ${taskIdVals} as of ${this.state.selected_as_of_date}`,
+                text: `Forecasts of ${variable} <br> in ${taskIdTexts.join(', ')} as of ${this.state.selected_as_of_date}`,
                 x: 0.5,
                 y: 0.90,
                 xanchor: 'center',

diff --git a/test/ui.js b/test/ui.js
@@ -73,3 +73,30 @@ test('initialize() creates SELECTs', assert => {
         assert.true(selectEle !== null);
     });
 });
+
+
+//
+// selectedTaskIDs() tests
+//
+
+QUnit.module('selectedTaskIDs()');
+
+test('selectedTaskIDs() and selectedTaskIDValues() are correct', assert => {
+    // case: two tasks_ids
+    const optionsCopy = structuredClone(covid19ForecastsVizTestOptions);
+    optionsCopy['task_ids'] = {
+        "scenario_id": [{"value": "1", "text": "scenario 1"}, {"value": "2", "text": "scenario 2"}],
+        "location": [{"value": "48", "text": "Texas"}, {"value": "US", "text": "US"}]
+    };
+    optionsCopy['initial_task_ids'] = {"scenario_id": "1", "location": "48"};
+    App.initialize('qunit-fixture', _fetchData, true, optionsCopy, null);
+
+    // test selectedTaskIDs()
+    assert.deepEqual(App.selectedTaskIDs(), {
+        "scenario_id": {"value": "1", "text": "scenario 1"},
+        "location": {"value": "48", "text": "Texas"}
+    });
+
+    // test selectedTaskIDValues()
+    assert.deepEqual(App.selectedTaskIDValues(), {"scenario_id": "1", "location": "48"});
+});