Merge pull request #336 from EpistasisLab/AddExperimentsFilter_Predic…

…tionType Add dataset prediction type as filter and column on Experiments page Closes issue #244
EpistasisLab · Jul 9, 2021 · e36f4f5 · e36f4f5
2 parents bedf24b + 3e97b41
commit e36f4f5
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 2 deletions.
diff --git a/lab/webapp/src/components/Experiments/components/ExperimentFilters/index.jsx b/lab/webapp/src/components/Experiments/components/ExperimentFilters/index.jsx
@@ -56,6 +56,18 @@ function ExperimentFilters({
             onChange={(e, data) => updateQuery('dataset', data.value)}
             className="filter"
           />
+          {
+            filters.dataset.selected.toLowerCase() === 'all' &&
+            <Form.Field 
+              inline
+              label="Prediction Type:"
+              control={Dropdown} 
+              value={filters.prediction.selected}
+              options={filters.prediction.options}
+              onChange={(e, data) => updateQuery('prediction', data.value)}
+              className="filter"
+            />
+          }
           <Form.Field 
             inline
             label="Algorithm:"

diff --git a/...ponents/Experiments/components/ExperimentsTable/components/ExperimentsTableBody/index.jsx b/...ponents/Experiments/components/ExperimentsTable/components/ExperimentsTableBody/index.jsx
@@ -208,6 +208,11 @@ function ExperimentsTableBody({
                 {formatDataset(experiment.dataset_name)}
               </a>
             </Table.Cell>
+            <Table.Cell selectable>
+              <a href={experimentLink}>
+                {formatDataset(experiment.prediction_type)}
+              </a>
+            </Table.Cell>
             {shouldDisplayErrorMessage &&
               <Table.Cell selectable>
               <a href={experimentLink}>

diff --git a/...nents/Experiments/components/ExperimentsTable/components/ExperimentsTableHeader/index.jsx b/...nents/Experiments/components/ExperimentsTable/components/ExperimentsTableHeader/index.jsx
@@ -90,6 +90,13 @@ function ExperimentsTableHeader({
         >
           {'Dataset'}
         </Table.HeaderCell>
+        <Table.HeaderCell
+          rowSpan={shouldDisplayParams ? 0 : 2}
+          sorted={getIsSorted('dataset_prediction')}
+          onClick={() => onSort('dataset_prediction')}
+        >
+          {'Prediction Type'}
+        </Table.HeaderCell>
         {shouldDisplayErrorMessage &&
           <Table.HeaderCell
             rowSpan={shouldDisplayParams ? 0 : 2}

diff --git a/lab/webapp/src/components/Experiments/index.jsx b/lab/webapp/src/components/Experiments/index.jsx
@@ -61,6 +61,13 @@ class Experiments extends Component {
       Object.assign(nextLocation.query, { [key]: value });
     }
     hashHistory.push(nextLocation);
+    //Special check for Dataset value. If it's not set to show all,
+    // the Prediction Type filter gets hidden in ExperimentFilters,
+    // so we have to force it's value to be 'all' so it doesn't get
+    // stuck on an inappropriate value
+    if(key === 'dataset' && value !== 'all'){
+      this.updateQuery('prediction','all');
+    }
   }
 
   resetQuery() {

diff --git a/lab/webapp/src/data/experiments/index.js b/lab/webapp/src/data/experiments/index.js
@@ -36,6 +36,7 @@ import {
 } from './actions';
 import selected from './selected';
 import { formatDataset, formatAlgorithm } from 'utils/formatter';
+import experiment from './selected';
 
 const list = (state = [], action) => {
   switch(action.type) {
@@ -95,6 +96,7 @@ export const getFilters = createSelector(
     const filterKeys = [
       //{ key: 'status', textPath: ['status'], valuePath: ['status'] },
       { key: 'dataset', textPath: ['dataset_name'], valuePath: ['dataset_id'] },
+      { key: 'prediction', textPath: ['prediction_type'], valuePath: ['prediction_type'] },
       { key: 'algorithm', textPath: ['algorithm'], valuePath: ['algorithm'] } // ['algorithm', '_id']
     ];
 
@@ -178,13 +180,14 @@ export const getVisibleExperiments = createSelector(
 );
 
 const filterBy = (filters) => (experiment) => {
-  const { status, dataset, algorithm } = filters;
+  const { status, dataset, algorithm, prediction } = filters;
 
   // status category 'completed' includes 'success', 'cancelled', and 'fail'
   return (
     (status.selected === 'all' || status.selected === experiment.status || status.selected === 'completed' && ['success', 'cancelled', 'fail'].includes(experiment.status)) &&
     (dataset.selected === 'all' || dataset.selected === experiment.dataset_id) &&
-    (algorithm.selected === 'all' || algorithm.selected === experiment.algorithm)
+    (algorithm.selected === 'all' || algorithm.selected === experiment.algorithm) &&
+    (prediction.selected === 'all' || prediction.selected === experiment.prediction_type)
   );
 };