Temporal annual distribution functionality and temporal FeatureExtraction capability enablement

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;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+<div class="explore-temporal">
+    <div data-bind="foreach: tabs">
+        <div data-bind="css: { active: $component.selectedTabKey() === key }">
+            <div data-bind="component: { name: componentName, params: componentParams }"></div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,46 @@
+define([
+  "knockout",
+  "text!./explore-temporal.html",
+  'components/Component',
+  'utils/CommonUtils',
+  'utils/AutoBind',
+  'components/tabs',
+  './temporal/annual',
+  './temporal/temporal',
+  "less!./explore-temporal.less",
+],
+function (
+  ko,
+  view,
+  Component,
+  commonUtils,
+  AutoBind,
+  tabs,
+) {
+
+  class ExploreTemporal extends AutoBind(Component) {
+    constructor(params) {
+      super(params);
+      this.tabs = [
+        {
+          title: 'Annual',
+          key: 'annual',
+          componentName: 'explore-temporal-annual',
+          componentParams: { data: params.data.temporalAnnual },
+          visible: () => params.data.temporalAnnual && params.data.temporalAnnual.length > 0
+        },{
+          title: 'Daily',
+          key: 'daily',
+          componentName: 'explore-temporal-daily',
+          componentParams: { data: params.data.temporalDaily },
+          visible: () => params.data.temporalDaily && params.data.temporalDaily.length > 0
+        },
+      ].filter(v => v.visible());
+      console.log(this.tabs);
+      this.selectedTabKey = ko.observable(this.tabs.length > 0 ? this.tabs[0].key : null);
+    }
+  }
+
+  commonUtils.build('explore-temporal', ExploreTemporal, view);
+}
+);

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

@@ -0,0 +1,10 @@
+.explore-temporal {
+  div.tabs__header {
+    background: #fff;
+    border-bottom: solid 1px #ccc;
+  }
+  span.tabs__header-title {
+    background: #999;
+    color: #ffe;
+  }
+}

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

@@ -0,0 +1,22 @@
+<div data-bind="css: classes()">
+    <table data-bind="
+            dataTable: {
+                data: $component.data(),
+                options: {
+                    columns: $component.tableColumns,
+                    dom: 'Blftipr',
+                    pageLength: $component.tableOptions.pageLength,
+                    lengthMenu: $component.tableOptions.lengthMenu,
+                    language: ko.i18n('datatable.language')
+                }
+            }
+        ">
+        <thead>
+        <tr>
+            <th>Count</th>
+            <th>Avg</th>
+            <th>Year</th>
+        </tr>
+        </thead>
+    </table>
+</div>

js/pages/characterizations/components/characterizations/characterization-view-edit/temporal/annual.js

@@ -0,0 +1,61 @@
+define([
+    "knockout",
+    "text!./annual.html",
+    'components/Component',
+    'utils/CommonUtils',
+    'utils/AutoBind',
+    'numeral',
+    '../utils',
+    'utils/ChartUtils',
+    'd3',
+    'atlascharts',
+    'components/charts/histogram',
+    "less!./annual.less",
+  ],
+  function (
+    ko,
+    view,
+    Component,
+    commonUtils,
+    AutoBind,
+    numeral,
+    utils,
+    ChartUtils,
+    d3,
+    atlascharts,
+  ) {
+
+    class ExploreTemporalAnnual extends AutoBind(Component) {
+      constructor(params) {
+        super(params);
+        this.tableColumns = [
+          {
+            title: 'Year',
+            data: 'year',
+            class: this.classes('col-year'),
+          },
+          {
+            title: 'Count',
+            class: this.classes('col-count'),
+            render: (s, p, d) => numeral(d.count || 0).format(),
+          },
+          {
+            title: 'Pct',
+            class: this.classes('col-pct'),
+            render: (s, p, d) => {
+              const pct = utils.formatPct((d.avg * 100) || 0);
+              return `<div class="pct-fill" style="width: ${pct}"><div>${pct}</div></div>`;
+            },
+          },
+        ];
+        this.tableOptions = {...commonUtils.getTableOptions('M'), pageLength: 10};
+
+        this.temporal = params.data || [];
+        this.data = ko.observableArray(this.temporal);
+      }
+
+    }
+
+    commonUtils.build('explore-temporal-annual', ExploreTemporalAnnual, view);
+  }
+);