OHDSI · anton-abushkevich · Sep 20, 2022 · Jun 22, 2022 · Jun 23, 2022 · Jul 11, 2022
diff --git a/js/components/circe/components/ConceptSetBrowserTemplate.html b/js/components/circe/components/ConceptSetBrowserTemplate.html
@@ -6,9 +6,9 @@
         <!-- /ko -->
 
         <div data-bind="visible: !loading() && !isProcessing()">
-            <div class="conceptset-browser-panel">
+            <div class="conceptset-browser-panel" data-bind="visible: buttonActionEnabled">
                 <div class="btn btn-sm btn-primary new-concept-set"
-                     data-bind="click: addConceptSet, css: {disabled: disableConceptSetButton}, text: buttonActionText, visible: buttonActionEnabled"></div>
+                     data-bind="click: addConceptSet, css: {disabled: disableConceptSetButton}, text: buttonActionText"></div>
             </div>
             <faceted-datatable params="
                 dataTableId: repositoryConceptSetTableId,

diff --git a/js/components/cohort/linked-cohort-list.js b/js/components/cohort/linked-cohort-list.js
@@ -7,7 +7,7 @@ define([
 	'appConfig',
 	'text!./linked-cohort-list.html',
 	'const',
-	'components/cohort-definition-browser',
+	'components/entityBrowsers/cohort-definition-browser',
 	'less!./linked-cohort-list.less',
 	'components/linked-entity-list',
 	'components/modal',

diff --git a/js/components/entity-browser.js b/js/components/entity-browser.js
@@ -1,21 +1,22 @@
 define([
     'knockout',
-    'text!./cohort-definition-browser.html',
     'components/Component',
     'utils/Renderers',
     'utils/CommonUtils',
     'faceted-datatable',
-], function(ko, view, Component, renderers, commonUtils) {
+], function(ko, Component, renderers, commonUtils) {
     class EntityBrowser extends Component {
         constructor(params) {
             super(params);
             this.onSelect = params.onSelect;
             this.multiChoice = params.multiChoice || false;
+            this.showCheckboxes = params.showCheckboxes || false;
+            this.renderLink = params.renderLink === undefined ? true : params.renderLink;
             this.showModal = params.showModal;
             this.scrollY = this.multiChoice ? (params.scrollY !== undefined ? params.scrollY : '50vh') : params.scrollY;
             this.scrollCollapse = params.scrollCollapse || false;
             this.selectedDataIds =
-                this.multiChoice && params.selectedData
+                (this.showCheckboxes || this.multiChoice) && params.selectedData
                     ? (params.selectedData() || []).map(({ id }) => id)
                     : [];
             this.data = ko.observableArray([]);
@@ -40,11 +41,11 @@ define([
                   ]
                 : null;
 
-            this.columns = !!this.multiChoice
+            this.columns = !!this.multiChoice || this.showCheckboxes
                 ? [
                     {
                         data: 'selected',
-                        class: this.classes({extra: 'text-center'}),
+                        width: '20px',
                         render: () => renderers.renderCheckbox('selected'),
                         searchable: false,
                         orderable: false,

diff --git a/js/components/entityBrowsers/characterization-browser.html b/js/components/entityBrowsers/characterization-browser.html
@@ -0,0 +1,21 @@
+<div data-bind="visible: !isLoading()">
+    <faceted-datatable params="
+        orderColumn: 3,
+        autoWidth: false,
+        reference:data,
+        columns: columns,
+        options: options,
+        buttons: buttons,
+        dom: tableDom,
+        rowClick: !multiChoice ? rowClick : null,
+        scrollY: scrollY,
+        selectedData: filteredData,
+        dtApi: dtApi,
+        pageLength: pageLength,
+        lengthMenu: lengthMenu,
+        language: ko.i18n('datatable.language')
+    ">
+    </faceted-datatable>
+</div>
+
+<loading data-bind="visible: isLoading()" params="status: ko.i18n('cc.loading', 'Loading Cohort Characterization list...')"></loading>
diff --git a/js/components/entityBrowsers/characterization-browser.js b/js/components/entityBrowsers/characterization-browser.js
@@ -0,0 +1,105 @@
+define([
+    'knockout',
+    'text!./characterization-browser.html',
+    'appConfig',
+    'atlas-state',
+    'components/entity-browser',
+    'services/AuthAPI',
+    'utils/CommonUtils',
+    'pages/characterizations/services/CharacterizationService',
+    'utils/DatatableUtils',
+    'faceted-datatable',
+], function (
+    ko,
+    view,
+    config,
+    sharedState,
+    EntityBrowser,
+    authApi,
+    commonUtils,
+    CharacterizationService,
+    datatableUtils,
+) {
+
+    class CharacterizationBrowser extends EntityBrowser {
+        constructor(params) {
+            super(params);
+            this.showModal = params.showModal;
+            this.myDesignsOnly = params.myDesignsOnly || false;
+            this.data = ko.observableArray();
+            const { pageLength, lengthMenu } = commonUtils.getTableOptions('M');
+            this.pageLength = params.pageLength || pageLength;
+            this.lengthMenu = params.lengthMenu || lengthMenu;
+
+            this.options = {
+                Facets: [
+                    {
+                        'caption': ko.i18n('facets.caption.created', 'Created'),
+                        'binding': (o) => datatableUtils.getFacetForDate(o.createdDate)
+                    },
+                    {
+                        'caption': ko.i18n('facets.caption.updated', 'Updated'),
+                        'binding': (o) => datatableUtils.getFacetForDate(o.modifiedDate)
+                    },
+                    {
+                        'caption': ko.i18n('facets.caption.author', 'Author'),
+                        'binding': datatableUtils.getFacetForCreatedBy,
+                    },
+                    {
+                        'caption': ko.i18n('facets.caption.designs', 'Designs'),
+                        'binding': datatableUtils.getFacetForDesign,
+                    },
+                ]
+            };
+
+            this.columns = ko.observableArray([
+                ...this.columns,
+                {
+                    title: ko.i18n('columns.id', 'Id'),
+                    className: 'id-column',
+                    data: 'id'
+                },
+                {
+                    title: ko.i18n('columns.name', 'Name'),
+                    render: this.renderLink ?
+                        datatableUtils.getLinkFormatter(d => ({ label: d['name'], linkish: !this.multiChoice })) :
+                        (s,p,d) => `${d.name}`,
+                },
+                {
+                    title: ko.i18n('columns.created', 'Created'),
+                    className: 'date-column',
+                    render: datatableUtils.getDateFieldFormatter('createdDate'),
+                },
+                {
+                    title: ko.i18n('columns.updated', 'Updated'),
+                    className: 'date-column',
+                    render: datatableUtils.getDateFieldFormatter('modifiedDate'),
+                },
+                {
+                    title: ko.i18n('columns.author', 'Author'),
+                    className: 'author-column',
+                    render: datatableUtils.getCreatedByFormatter(),
+                }
+            ]);
+        }
+
+        async loadData() {
+            this.isLoading(true);
+            CharacterizationService
+                .loadCharacterizationList()
+                .then(res => {
+                    const analysisList = ko.unwrap(this.myDesignsOnly)
+                        ? res.content.filter(a => a.hasWriteAccess || (a.createdBy && authApi.subject() === a.createdBy.login))
+                        : res.content;
+                    datatableUtils.coalesceField(analysisList, 'modifiedDate', 'createdDate');
+                    datatableUtils.addTagGroupsToFacets(analysisList, this.options.Facets);
+                    datatableUtils.addTagGroupsToColumns(analysisList, this.columns);
+                    this.data(analysisList.map(item => ({ selected: ko.observable(this.selectedDataIds.includes(item.id)), ...item })));
+                    this.isLoading(false);
+                });
+        }
+
+    }
+
+    return commonUtils.build('characterization-browser', CharacterizationBrowser, view);
+});
diff --git a/js/components/cohort-definition-browser.html → ...tyBrowsers/cohort-definition-browser.html b/js/components/cohort-definition-browser.html → ...tyBrowsers/cohort-definition-browser.html
diff --git a/js/components/cohort-definition-browser.js → ...tityBrowsers/cohort-definition-browser.js b/js/components/cohort-definition-browser.js → ...tityBrowsers/cohort-definition-browser.js
@@ -6,6 +6,7 @@ define([
 	'components/entity-browser',
 	'utils/CommonUtils',
 	'services/CohortDefinition',
+	'services/AuthAPI',
 	'utils/DatatableUtils',
 	'faceted-datatable',
 ], function (
@@ -16,13 +17,15 @@ define([
 	EntityBrowser,
 	commonUtils,
 	CohortDefinitionService,
+	authApi,
 	datatableUtils,
 ) {
 
 	class CohortDefinitionBrowser extends EntityBrowser {
 		constructor(params) {
 			super(params);
 			this.showModal = params.showModal;
+			this.myDesignsOnly = params.myDesignsOnly || false;
 			this.data = ko.observableArray();
 			const { pageLength, lengthMenu } = commonUtils.getTableOptions('M');
 			this.pageLength = params.pageLength || pageLength;
@@ -58,7 +61,9 @@ define([
 				},
 				{
 					title: ko.i18n('columns.name', 'Name'),
-					render: datatableUtils.getLinkFormatter(d => ({ label: d['name'], linkish: !this.multiChoice })),
+					render: this.renderLink ?
+						datatableUtils.getLinkFormatter(d => ({ label: d['name'], linkish: !this.multiChoice })) :
+						(s,p,d) => `${d.name}`
 				},
 				{
 					title: ko.i18n('columns.created', 'Created'),
@@ -82,10 +87,13 @@ define([
 			try {
 				this.isLoading(true);
 				const data = await CohortDefinitionService.getCohortDefinitionList();
-				datatableUtils.coalesceField(data, 'modifiedDate', 'createdDate');
-				datatableUtils.addTagGroupsToFacets(data, this.options.Facets);
-				datatableUtils.addTagGroupsToColumns(data, this.columns);
-				this.data(data.map(item => ({ selected: ko.observable(this.selectedDataIds.includes(item.id)), ...item })));
+				const cohortList = ko.unwrap(this.myDesignsOnly)
+					? data.filter(c => c.hasWriteAccess || (c.createdBy && authApi.subject() === c.createdBy.login))
+					: data;
+				datatableUtils.coalesceField(cohortList, 'modifiedDate', 'createdDate');
+				datatableUtils.addTagGroupsToFacets(cohortList, this.options.Facets);
+				datatableUtils.addTagGroupsToColumns(cohortList, this.columns);
+				this.data(cohortList.map(item => ({ selected: ko.observable(this.selectedDataIds.includes(item.id)), ...item })));
 			} catch (err) {
 				console.error(err);
 			} finally {

diff --git a/js/components/entityBrowsers/cohort-pathway-browser.html b/js/components/entityBrowsers/cohort-pathway-browser.html
@@ -0,0 +1,21 @@
+<div data-bind="visible: !isLoading()">
+    <faceted-datatable params="
+        orderColumn: 3,
+        autoWidth: false,
+        reference:data,
+        columns: columns,
+        options: options,
+        buttons: buttons,
+        dom: tableDom,
+        rowClick: !multiChoice ? rowClick : null,
+        scrollY: scrollY,
+        selectedData: filteredData,
+        dtApi: dtApi,
+        pageLength: pageLength,
+        lengthMenu: lengthMenu,
+        language: ko.i18n('datatable.language')
+    ">
+    </faceted-datatable>
+</div>
+
+<loading data-bind="visible: isLoading()" params="status: ko.i18n('common.loadingWithDots', 'Loading...')"></loading>
diff --git a/js/components/entityBrowsers/cohort-pathway-browser.js b/js/components/entityBrowsers/cohort-pathway-browser.js
@@ -0,0 +1,102 @@
+define([
+    'knockout',
+    'text!./cohort-pathway-browser.html',
+    'appConfig',
+    'atlas-state',
+    'components/entity-browser',
+    'services/AuthAPI',
+    'utils/CommonUtils',
+    'pages/pathways/PathwayService',
+    'utils/DatatableUtils',
+    'faceted-datatable',
+], function (
+    ko,
+    view,
+    config,
+    sharedState,
+    EntityBrowser,
+    authApi,
+    commonUtils,
+    PathwayService,
+    datatableUtils,
+) {
+
+    class CohortPathwayBrowser extends EntityBrowser {
+        constructor(params) {
+            super(params);
+            this.showModal = params.showModal;
+            this.data = ko.observableArray();
+            this.myDesignsOnly = params.myDesignsOnly || false;
+            const { pageLength, lengthMenu } = commonUtils.getTableOptions('M');
+            this.pageLength = params.pageLength || pageLength;
+            this.lengthMenu = params.lengthMenu || lengthMenu;
+
+            this.options = {
+                Facets: [
+                    {
+                        'caption': ko.i18n('facets.caption.created', 'Created'),
+                        'binding': (o) => datatableUtils.getFacetForDate(o.createdDate)
+                    },
+                    {
+                        'caption': ko.i18n('facets.caption.updated', 'Updated'),
+                        'binding': (o) => datatableUtils.getFacetForDate(o.modifiedDate)
+                    },
+                    {
+                        'caption': ko.i18n('facets.caption.author', 'Author'),
+                        'binding': datatableUtils.getFacetForCreatedBy,
+                    },
+                    {
+                        'caption': ko.i18n('facets.caption.designs', 'Designs'),
+                        'binding': datatableUtils.getFacetForDesign,
+                    },
+                ]
+            };
+
+            this.columns = ko.observableArray([
+                ...this.columns,
+                {
+                    title: ko.i18n('columns.id', 'Id'),
+                    className: 'id-column',
+                    data: 'id'
+                },
+                {
+                    title: ko.i18n('columns.name', 'Name'),
+                    render: this.renderLink ?
+                        datatableUtils.getLinkFormatter(d => ({ label: d['name'], linkish: !this.multiChoice })) :
+                        (s,p,d) => `${d.name}`
+                },
+                {
+                    title: ko.i18n('columns.created', 'Created'),
+                    className: 'date-column',
+                    render: datatableUtils.getDateFieldFormatter('createdDate'),
+                },
+                {
+                    title: ko.i18n('columns.updated', 'Updated'),
+                    className: 'date-column',
+                    render: datatableUtils.getDateFieldFormatter('modifiedDate'),
+                },
+                {
+                    title: ko.i18n('columns.author', 'Author'),
+                    className: 'author-column',
+                    render: datatableUtils.getCreatedByFormatter(),
+                }
+            ]);
+        }
+
+        async loadData() {
+            this.isLoading(true);
+            const analysisListResp = await PathwayService.list();
+            const analysisList = ko.unwrap(this.myDesignsOnly)
+                ? analysisListResp.content.filter(a => a.hasWriteAccess || (a.createdBy && authApi.subject() === a.createdBy.login))
+                : analysisListResp.content;
+            datatableUtils.coalesceField(analysisList, 'modifiedDate', 'createdDate');
+            datatableUtils.addTagGroupsToFacets(analysisList, this.options.Facets);
+            datatableUtils.addTagGroupsToColumns(analysisList, this.columns);
+            this.data(analysisList.map(item => ({ selected: ko.observable(this.selectedDataIds.includes(item.id)), ...item })));
+            this.isLoading(false);
+        }
+
+    }
+
+    return commonUtils.build('cohort-pathway-browser', CohortPathwayBrowser, view);
+});
diff --git a/js/components/entityBrowsers/concept-set-entity-browser.html b/js/components/entityBrowsers/concept-set-entity-browser.html
@@ -0,0 +1,21 @@
+<div data-bind="visible: !isLoading()">
+    <faceted-datatable params="
+        orderColumn: 3,
+        autoWidth: false,
+        reference:data,
+        columns: columns,
+        options: options,
+        buttons: buttons,
+        dom: tableDom,
+        rowClick: !multiChoice ? rowClick : null,
+        scrollY: scrollY,
+        selectedData: filteredData,
+        dtApi: dtApi,
+        pageLength: pageLength,
+        lengthMenu: lengthMenu,
+        language: ko.i18n('datatable.language')
+    ">
+    </faceted-datatable>
+</div>
+
+<loading data-bind="visible: isLoading()" params="status: ko.i18n('common.loadingWithDots', 'Loading...')"></loading>