Temporal annual distribution functionality and temporal FeatureExtraction capability enablement (#2950)

---------

Co-authored-by: wivern <[email protected]>
Co-authored-by: git <[email protected]>
Co-authored-by: Oleg Kuzik <[email protected]>
Co-authored-by: Oleg Kuzik <[email protected]>
Co-authored-by: Chris Knoll <[email protected]>
Co-authored-by: oleg-odysseus <[email protected]>

Author: 7 people

js/const.js

@@ -83,6 +83,17 @@ define([
 					data: 'description',
 					className: context.classes('col-feature-descr'),
 				},
+				{
+					title: ko.i18n('columns.supportsAnnual', 'Supports annual'),
+					// data: 'supportsAnnual',
+					render: context.renderSupportsAnnual(),
+					className: context.classes('col-supports-annual'),
+				},
+				{
+					title: ko.i18n('columns.supportsTemporal', 'Supports temporal'),
+					render: context.renderSupportsTemporal(),
+					className: context.classes('col-supports-temporal'),
+				},
 				... context.isEditPermitted() ? [{
 					title: ko.i18n('columns.actions', 'Actions'),
 					render: context.getRemoveCell('removeFeature'),

js/pages/characterizations/components/characterizations/CharacterizationAnalysis.js

@@ -13,7 +13,11 @@ define(function(require, exports){
 			this.defaultName = ko.unwrap(constants.newEntityNames.characterization);
 			this.name = ko.observable(data.name || this.defaultName);
 			this.cohorts = ko.observableArray(data.cohorts);
-			this.featureAnalyses = ko.observableArray(data.featureAnalyses);
+			this.featureAnalyses = ko.observableArray(data.featureAnalyses || []);
+			data.featureAnalyses && data.featureAnalyses.forEach(fa => {
+				fa["includeAnnual"] = ko.observable(fa.includeAnnual);
+				fa['includeTemporal'] = ko.observable(fa.includeTemporal);
+			});
 			this.parameters = ko.observableArray(data.parameters);
 			this.strataConceptSets = ko.observableArray((data.strataConceptSets && data.strataConceptSets.map(cs => new ConceptSet(cs))) || []);
 			this.strataOnly = ko.observable(data.strataOnly);

js/pages/characterizations/components/characterizations/characterization-view-edit/characterization-design.html

@@ -17,6 +17,8 @@
             removeFeature: $component.removeFeature,
             isEditPermitted: $component.isEditPermitted
         "></linked-entity-list>
+        <div><input type="checkbox" data-bind="enable: $component.isEditPermitted, checked: $component.includeAnnual"><span data-bind="css: classes('include-annual-option')">Include Prevalence Annual Distribution</span></div>
+        <div><input type="checkbox" data-bind="enable: $component.isEditPermitted, checked: $component.includeTemporal"><span data-bind="css: classes('include-temporal-option')">Include Temporal Distribution</span></div>
     </div>
     <div data-bind="css: {'linked-entities':true, 'edit-disabled': !$component.isEditPermitted()}, eventListener: [
                                 { event: 'click', selector: '.conceptset_import', callback:$component.handleConceptSetImport},

js/pages/characterizations/components/characterizations/characterization-view-edit/characterization-design.js

@@ -81,12 +81,18 @@ define([
                 data: ko.pureComputed(() => params.design() && params.design().parameters() || [])
             };
 
+            this.includeAnnual = ko.observable(this.featureAnalyses.data().reduce((a, b) => a || !!ko.unwrap(b.includeAnnual), false));
+            this.includeAnnual.subscribe((newVal) => this.featureAnalyses.data().forEach(fa => fa.supportsAnnual && fa.includeAnnual(newVal)));
+            this.includeTemporal = ko.observable(this.featureAnalyses.data().reduce((a, b) => a || !!ko.unwrap(b.includeTemporal), false));
+            this.includeTemporal.subscribe((newVal) => this.featureAnalyses.data().forEach(fa => fa.supportsTemporal && fa.includeTemporal(newVal)));
+
             this.showFeatureAnalysesBrowser = ko.observable(false);
 
             this.isParameterCreateModalShown = ko.observable(false);
             this.showConceptSetBrowser = ko.observable(false);
             this.criteriaContext = ko.observable();
             this.tableOptions = commonUtils.getTableOptions('M');
+
         }
 
         checkStrataNames(data, event) {
@@ -110,6 +116,14 @@ define([
             }
         }
 
+        renderSupportsAnnual() {
+            return (s, p, d) => ko.unwrap(d.supportsAnnual ? ko.i18n('options.yes', 'Yes') : ko.i18n('options.no', 'No'));
+        }
+
+        renderSupportsTemporal() {
+            return (s, p, d) => ko.unwrap(d.supportsTemporal ? ko.i18n('options.yes', 'Yes') : ko.i18n('options.no', 'No'));
+        }
+
         showFeatureBrowser() {
             this.showFeatureAnalysesBrowser(true);
         }
@@ -121,7 +135,8 @@ define([
         onSelect(data = []) {
             this.closeFeatureBrowser();
             const ccDesign = this.design();
-            const featureAnalyses = data.map(item => lodash.pick(item, ['id', 'name', 'description']));
+            const featureAnalyses = data.map(item => lodash.pick(item, ['id', 'name', 'description', 'supportsAnnual', 'supportsTemporal']))
+                .map(item => { return { ...item, includeAnnual: ko.observable(ko.unwrap(this.includeAnnual)), includeTemporal: ko.observable(ko.unwrap(this.includeTemporal)) }});
             ccDesign.featureAnalyses(featureAnalyses);
         }
 

js/pages/characterizations/components/characterizations/characterization-view-edit/characterization-design.less

@@ -132,4 +132,12 @@
     }
   }
 
+  &__include-annual-option {
+    margin-left: 0.5rem;
+  }
+
+  &__include-temporal-option {
+    margin-left: 0.5rem;
+  }
+
 }

js/pages/characterizations/components/characterizations/characterization-view-edit/characterization-results.html

@@ -212,4 +212,13 @@ <h4 class="legend-header">Cohort Legend</h4>
         ">
         <explore-prevalence params="explore: explore"></explore-prevalence>
     </atlas-modal>
+    <atlas-modal params="
+        showModal: $component.isTemporalShown,
+        title: $component.exploreTemporalTitle,
+        data: {
+            temporalData: $component.exploreTemporalData(),
+        }
+        ">
+        <explore-temporal-cohort params="temporal: temporalData"></explore-temporal-cohort>
+    </atlas-modal>
 </div>

js/pages/characterizations/components/characterizations/characterization-view-edit/characterization-results.js

@@ -27,6 +27,7 @@ define([
     'utils/ExceptionUtils',
     'services/file',
     './explore-prevalence',
+    './explore-temporal-cohort',
     'less!./characterization-results.less',
     'components/visualizations/filter-panel/filter-panel',
     'components/visualizations/line-chart',
@@ -84,6 +85,7 @@ define([
             this.executionId = params.executionId;
             this.loadedExecutionId = null;
             this.data = ko.observable([]);
+            this.temporal = [];
             this.domains = ko.observableArray();
             this.filterList = ko.observableArray([]);
             this.selectedItems = ko.pureComputed(() => filterUtils.getSelectedFilterValues(this.filterList()));
@@ -112,6 +114,10 @@ define([
             this.tableOptions = commonUtils.getTableOptions('M');
             this.datatableLanguage = ko.i18n('datatable.language');
 
+            this.isTemporalShown = ko.observable(false);
+            this.exploreTemporalTitle = ko.observable();
+            this.exploreTemporalData = ko.observable();
+
             this.subscriptions.push(this.executionId.subscribe(id => id && this.loadData()));
             this.loadData();
         }
@@ -187,6 +193,12 @@ define([
           this.isExplorePrevalenceShown(true);
         }
 
+        exploreTemporal({temporal, temporalAnnual, temporalDataByCohort}, title) {
+            this.exploreTemporalTitle(title);
+            this.exploreTemporalData({temporal, temporalAnnual, temporalDataByCohort});
+            this.isTemporalShown(true);
+        }
+
         async createNewSet(analysis) {
             this.loading(true);
             const conceptIds = this.extractConceptIds(analysis);

js/pages/characterizations/components/characterizations/characterization-view-edit/explore-temporal-cohort.html

@@ -0,0 +1,11 @@
+<div class="explore-temporal-cohort">
+    <div class="upper-tabs" data-bind="foreach: tabs">
+        <div data-bind="css: { active: $component.selectedTabKey() === key },
+                      click: $component.selectedTabKey.bind($component, key)">
+            <span data-bind="text: title"></span>
+        </div>
+    </div>
+    <div data-bind="with: $component.tabs.find(t => t.key === $component.selectedTabKey())">
+        <div data-bind="component: { name: 'explore-temporal', params: componentParams }"></div>
+    </div>
+</div>

js/pages/characterizations/components/characterizations/characterization-view-edit/explore-temporal-cohort.js

@@ -0,0 +1,28 @@
+define([
+    "knockout",
+    "utils/CommonUtils",
+    "components/Component",
+    "utils/AutoBind",
+    "text!./explore-temporal-cohort.html",
+    "less!./explore-temporal-cohort.less",
+    'components/tabs',
+    './explore-temporal',
+], function (ko, commonUtils, Component, AutoBind, view, tabs) {
+
+    class ExploreTemporalCohort extends AutoBind(Component) {
+        constructor(params) {
+            super(params);
+            const temporal = params.temporal || {};
+            this.temporalDataByCohort = temporal.temporalDataByCohort || {};
+
+            this.tabs = this.temporalDataByCohort.map(cohort => ({
+                title: cohort.cohortName,
+                key: cohort.cohortName,
+                componentParams: { data: cohort.temporalInfo },
+            }));
+            this.selectedTabKey = ko.observable(this.tabs.length > 0 ? this.tabs[0].key : null);
+        }
+    }
+
+    commonUtils.build('explore-temporal-cohort', ExploreTemporalCohort, view);
+});

js/pages/characterizations/components/characterizations/characterization-view-edit/explore-temporal-cohort.less

@@ -0,0 +1,17 @@
+.explore-temporal-cohort {
+    .upper-tabs {
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            flex: 1;
+            border: 1px solid grey;
+            padding: 5px;
+            cursor: pointer;
+
+            &.active {
+                background-color: lightgrey;
+            }
+        }
+    }
+}