Gui issue 731 filter species (#803)

* Metabolic pathways visualisation (#731): species column and filter * Metabolic pathways visualisation (#731): #issuecomment-1082810606 * Metabolic pathways visualisation (#731): get species for filtering from track * GUI Pathways: localStorage key for columns change (migration), force fetching pathways on panel activated Co-authored-by: Mikhail Rodichenko <[email protected]>
epam · Mar 30, 2022 · d5a80a2 · d5a80a2
1 parent b498720
commit d5a80a2
Show file tree

Hide file tree

Showing 23 changed files with 625 additions and 21 deletions.
diff --git a/...sTablePanel/ngbGenesTable/ngbGenesTableContextMenu/ngbGenesTableContextMenu.controller.js b/...sTablePanel/ngbGenesTable/ngbGenesTableContextMenu/ngbGenesTableContextMenu.controller.js
@@ -126,7 +126,9 @@ export default class NgbGenesTableContextMenuController extends BaseController {
         layoutChange.displayed = true;
         this.dispatcher.emitSimpleEvent('layout:item:change', {layoutChange});
         const readInfo = {
-            search: this.entity[`${this.ngbGenesTableService.defaultPrefix}featureName`]
+            search: this.entity[`${this.ngbGenesTableService.defaultPrefix}featureName`],
+            speciesList: [],
+            rewriteSpecies: true
         };
         const data = {
             ...readInfo,

diff --git a/client/client/app/components/ngbPathways/ngbInternalPathwaysTable/index.js b/client/client/app/components/ngbPathways/ngbInternalPathwaysTable/index.js
@@ -3,10 +3,13 @@ import angular from 'angular';
 import component from './ngbInternalPathwaysTable.component';
 import controller from './ngbInternalPathwaysTable.controller';
 import './ngbInternalPathwaysTable.scss';
+
 import service from './ngbInternalPathwaysTable.service';
 
+import ngbInternalPathwaysTableFilter from './ngbInternalPathwaysTableFilter';
+
 export default angular
-    .module('ngbInternalPathwaysTable', [])
+    .module('ngbInternalPathwaysTable', [ngbInternalPathwaysTableFilter])
     .service('ngbInternalPathwaysTableService', service.instance)
     .controller(controller.UID, controller)
     .component('ngbInternalPathwaysTable', component)

diff --git a/...pp/components/ngbPathways/ngbInternalPathwaysTable/ngbInternalPathwaysTable.controller.js b/...pp/components/ngbPathways/ngbInternalPathwaysTable/ngbInternalPathwaysTable.controller.js
@@ -7,6 +7,7 @@ const RESIZE_DELAY = 300;
 export default class ngbInternalPathwaysTableController extends baseController {
     dispatcher;
     isProgressShown = true;
+    displayInternalPathwaysFilter = true;
     errorMessageList = [];
     debounce = (new Debounce()).debounce;
     gridOptions = {
@@ -39,7 +40,9 @@ export default class ngbInternalPathwaysTableController extends baseController {
     events = {
         'pathways:internalPathways:page:change': this.loadData.bind(this),
         'pathways:internalPathways:search': this.initialize.bind(this),
-        'read:show:pathways': this.loadData.bind(this)
+        'pathways:internalPathways:species:loaded': this.initialize.bind(this),
+        'read:show:pathways': this.loadData.bind(this),
+        'pathways:internalPathways:refresh': this.loadData.bind(this),
     };
 
     constructor($scope, $timeout, dispatcher,
@@ -55,6 +58,7 @@ export default class ngbInternalPathwaysTableController extends baseController {
             uiGridConstants,
         });
 
+        this.displayInternalPathwaysFilter = this.ngbInternalPathwaysTableService.displayInternalPathwaysFilter;
         this.initEvents();
     }
 
@@ -85,7 +89,9 @@ export default class ngbInternalPathwaysTableController extends baseController {
                 });
             }
         });
-        await this.loadData();
+        if (this.ngbInternalPathwaysTableService.isInitialized) {
+            await this.loadData();
+        }
         this.isProgressShown = false;
     }
 

diff --git a/...t/app/components/ngbPathways/ngbInternalPathwaysTable/ngbInternalPathwaysTable.service.js b/...t/app/components/ngbPathways/ngbInternalPathwaysTable/ngbInternalPathwaysTable.service.js
@@ -1,17 +1,19 @@
 import ClientPaginationService from '../../../shared/services/clientPaginationService';
 
 const DEFAULT_INTERNAL_PATHWAYS_COLUMNS = [
-    'name', 'description', 'source'
+    'name', 'description', 'source', 'organisms'
 ];
 const DEFAULT_ORDERBY_INTERNAL_PATHWAYS_COLUMNS = {
     'name': 'name',
     'description': 'description',
-    'source': 'source'
+    'source': 'source',
+    'organisms': 'organisms'
 };
 const INTERNAL_PATHWAYS_COLUMN_TITLES = {
     name: 'Map',
     description: 'Description',
-    source: 'Source'
+    source: 'Source',
+    organisms: 'Species'
 };
 const DATABASE_SOURCES = {
     CUSTOM: 'Custom',
@@ -20,12 +22,16 @@ const DATABASE_SOURCES = {
 };
 const FIRST_PAGE = 1;
 const PAGE_SIZE = 11;
+const blockFilterInternalPathwaysTimeout = 500;
 
 export default class ngbInternalPathwaysTableService extends ClientPaginationService {
+    _blockFilterInternalPathways;
+
     constructor(dispatcher, genomeDataService) {
         super(dispatcher, FIRST_PAGE, PAGE_SIZE, 'pathways:internalPathways:page:change');
         this.dispatcher = dispatcher;
         this.genomeDataService = genomeDataService;
+        this.loadSpeciesList();
     }
 
     _internalPathways;
@@ -40,6 +46,12 @@ export default class ngbInternalPathwaysTableService extends ClientPaginationSer
         return this._pageError;
     }
 
+    _isInitialized = false;
+
+    get isInitialized() {
+        return this._isInitialized;
+    }
+
     get columnTitleMap() {
         return INTERNAL_PATHWAYS_COLUMN_TITLES;
     }
@@ -48,35 +60,75 @@ export default class ngbInternalPathwaysTableService extends ClientPaginationSer
         return DEFAULT_ORDERBY_INTERNAL_PATHWAYS_COLUMNS;
     }
 
+    _internalPathwaysFilter = {};
+
+    get internalPathwaysFilter() {
+        return this._internalPathwaysFilter;
+    }
+
     get internalPathwaysColumns() {
-        if (!localStorage.getItem('internalPathwaysColumnNames')) {
-            localStorage.setItem('internalPathwaysColumnNames', JSON.stringify(DEFAULT_INTERNAL_PATHWAYS_COLUMNS));
+        if (!localStorage.getItem('internalPathwaysColumns')) {
+            localStorage.setItem('internalPathwaysColumns', JSON.stringify(DEFAULT_INTERNAL_PATHWAYS_COLUMNS));
         }
-        return JSON.parse(localStorage.getItem('internalPathwaysColumnNames'));
+        return JSON.parse(localStorage.getItem('internalPathwaysColumns'));
     }
 
     set internalPathwaysColumns(columns) {
-        localStorage.setItem('internalPathwaysColumnNames', JSON.stringify(columns || []));
+        localStorage.setItem('internalPathwaysColumns', JSON.stringify(columns || []));
+    }
+
+    _displayInternalPathwaysFilter = true;
+
+    get displayInternalPathwaysFilter() {
+        if (this._displayInternalPathwaysFilter !== undefined) {
+            return this._displayInternalPathwaysFilter;
+        } else {
+            this._displayInternalPathwaysFilter = JSON.parse(localStorage.getItem('displayInternalPathwaysFilter')) || false;
+            return this._displayInternalPathwaysFilter;
+        }
+    }
+
+    _speciesList;
+
+    get speciesList() {
+        return this._speciesList || [];
+    }
+
+    set speciesList(value) {
+        this._speciesList = (value || []);
     }
 
     static instance(dispatcher, genomeDataService) {
         return new ngbInternalPathwaysTableService(dispatcher, genomeDataService);
     }
 
+    async loadSpeciesList() {
+        this.speciesList = await this.genomeDataService.getSpeciesList();
+        this._isInitialized = true;
+        this.dispatcher.emitSimpleEvent('pathways:internalPathways:species:loaded');
+    }
+
     async searchInternalPathways(currentSearch) {
         this._internalPathways = await this.loadInternalPathways(currentSearch);
         this.dispatcher.emitSimpleEvent('internalPathways:result:change');
     }
 
     async loadInternalPathways(currentSearch) {
+        if (currentSearch.rewriteSpecies) {
+            this.internalPathwaysFilter.organisms = currentSearch.speciesList;
+            currentSearch.speciesList = [];
+            currentSearch.rewriteSpecies = false;
+        }
         const filter = {
             pagingInfo: {
                 pageSize: this.pageSize,
                 pageNum: this.currentPage
             },
             sortInfo: this.orderBy ? this.orderBy[0] : null,
-            term: currentSearch
+            term: currentSearch.search || '',
+            taxIds: this.internalPathwaysFilter.organisms || []
         };
+
         const data = await this.genomeDataService.getInternalPathwaysLoad(filter);
         if (data.error) {
             this.totalPages = 0;
@@ -125,6 +177,27 @@ export default class ngbInternalPathwaysTableService extends ClientPaginationSer
                     };
                     break;
                 }
+                case 'organisms': {
+                    columnSettings = {
+                        cellTemplate: `<div class="ui-grid-cell-contents"
+                                       >{{row.entity.organismsViewValue}}</div>`,
+                        enableHiding: false,
+                        enableSorting: true,
+                        enableFiltering: true,
+                        field: 'organisms',
+                        headerCellTemplate: headerCells,
+                        name: this.columnTitleMap[column],
+                        filterApplied: () => this.internalPathwaysFieldIsFiltered(column),
+                        menuItems: [
+                            {
+                                title: 'Clear column filter',
+                                action: () => this.clearInternalPathwaysFieldFilter(column),
+                                shown: () => this.internalPathwaysFieldIsFiltered(column)
+                            }
+                        ],
+                    };
+                    break;
+                }
                 default: {
                     columnSettings = {
                         enableHiding: false,
@@ -150,14 +223,52 @@ export default class ngbInternalPathwaysTableService extends ClientPaginationSer
         return result;
     }
 
+    clearInternalPathwaysFilter() {
+        if (this._blockFilterInternalPathways) {
+            clearTimeout(this._blockFilterInternalPathways);
+            this._blockFilterInternalPathways = null;
+        }
+        this._internalPathwaysFilter = {};
+        this.dispatcher.emit('pathways:internalPathways:refresh');
+        this._blockFilterInternalPathways = setTimeout(() => {
+            this._blockFilterInternalPathways = null;
+        }, blockFilterInternalPathwaysTimeout);
+    }
+
+    internalPathwaysFieldIsFiltered(fieldName) {
+        return this.internalPathwaysFilter[fieldName] !== undefined;
+    }
+
+    clearInternalPathwaysFieldFilter(fieldName) {
+        this.internalPathwaysFilter[fieldName] = undefined;
+        this.dispatcher.emit('pathways:internalPathways:refresh');
+    }
+
+    canScheduleFilterInternalPathways() {
+        return !this._blockFilterInternalPathways;
+    }
+
+    scheduleFilterInternalPathways() {
+        if (this._blockFilterInternalPathways) {
+            return;
+        }
+        this.dispatcher.emit('pathways:internalPathways:refresh');
+    }
+
     _formatServerToClient(internalPathways) {
-        return {
+        const result = {
             id: internalPathways.pathwayId,
             name: internalPathways.prettyName || internalPathways.name,
             description: internalPathways.pathwayDesc,
             databaseSource: internalPathways.databaseSource,
             source: DATABASE_SOURCES[internalPathways.databaseSource] || internalPathways.databaseSource,
             organisms: internalPathways.organisms
         };
+        if (internalPathways.organisms) {
+            result.organismsViewValue = internalPathways.organisms
+                .map(organism => organism.speciesName || organism.taxId)
+                .join(', ');
+        }
+        return result;
     }
 }
diff --git a/...p/components/ngbPathways/ngbInternalPathwaysTable/ngbInternalPathwaysTableFilter/index.js b/...p/components/ngbPathways/ngbInternalPathwaysTable/ngbInternalPathwaysTableFilter/index.js
@@ -0,0 +1,13 @@
+import angular from 'angular';
+import filterList from './ngbInternalPathwaysFilterList';
+
+// Import internal modules
+import component from './ngbInternalPathwaysTableFilter.component';
+import controller from './ngbInternalPathwaysTableFilter.controller';
+import './ngbInternalPathwaysTableFilter.scss';
+
+// Import external modules
+export default angular.module('ngbInternalPathwaysTableFilter', [filterList])
+    .controller(controller.UID, controller)
+    .component('ngbInternalPathwaysTableFilter', component)
+    .name;
diff --git a/...ternalPathwaysTable/ngbInternalPathwaysTableFilter/ngbInternalPathwaysFilterList/index.js b/...ternalPathwaysTable/ngbInternalPathwaysTableFilter/ngbInternalPathwaysFilterList/index.js
@@ -0,0 +1,14 @@
+import angular from 'angular';
+import scroller from '../../../../../shared/filter/filterList/ngbFilterList.scroller';
+
+// Import internal modules
+import component from './ngbInternalPathwaysFilterList.component';
+import controller from './ngbInternalPathwaysFilterList.controller';
+import './ngbInternalPathwaysFilterList.scss';
+
+// Import external modules
+export default angular.module('ngbInternalPathwaysFilterList', [])
+    .directive('preventParentScroll', scroller)
+    .controller(controller.UID, controller)
+    .component('ngbInternalPathwaysFilterList', component)
+    .name;