Gui issue 731 pathways (#750)

* Metabolic pathways visualisation (#731): internal pathways skeleton

* Metabolic pathways visualisation (#731): internal pathways api integration + layout fixes

* Metabolic pathways visualisation (#731): context menu navigation

* Metabolic pathways visualisation (#731): pathway tree search

* Metabolic pathways visualisation (#731): xml loader remove

client/client/app/app.layout.constant.js

@@ -86,6 +86,14 @@ export default {
             title: 'Lineage',
             name: 'layout>strainLineage'
         },
+        pathways: {
+            displayed: false,
+            icon: 'device_hub',
+            panel: 'ngbPathwaysPanel',
+            position: 'right',
+            title: 'Pathways',
+            name: 'layout>pathways'
+        },
         homologs: {
             isHidden: true,
             displayed: false,

client/client/app/components/index.js

@@ -12,6 +12,7 @@ import ngbHomologsPanel from './ngbHomologsPanel';
 import ngbLogModule from './ngbLog';
 import ngbMolecularViewer from './ngbMolecularViewer';
 import ngbOrganizeTracks from './ngbOrganizeTracks';
+import ngbPathways from './ngbPathways';
 import ngbProjectInfoPanel from './ngbProjectInfoPanel';
 import ngbSashimiPlot from './ngbSashimiPlot';
 import ngbStrainLineage from './ngbStrainLineage';
@@ -40,5 +41,6 @@ export default angular.module('NGB_Panels', [
     ngbGenesTablePanel,
     ngbHomologsPanel,
     ngbHeatmapPanel,
-    ngbStrainLineage
+    ngbStrainLineage,
+    ngbPathways
 ]).name;

client/client/app/components/ngbGenesTablePanel/ngbGenesTable/ngbGenesTableContextMenu/ngbGenesTableContextMenu.controller.js

@@ -119,4 +119,20 @@ export default class NgbGenesTableContextMenuController extends BaseController {
         this.dispatcher.emitSimpleEvent('read:show:homologs', data);
         event.stopImmediatePropagation();
     }
+
+    pathwaysSearch() {
+        this.close();
+        const layoutChange = this.appLayout.Panels.pathways;
+        layoutChange.displayed = true;
+        this.dispatcher.emitSimpleEvent('layout:item:change', {layoutChange});
+        const readInfo = {
+            search: this.entity[`${this.ngbGenesTableService.defaultPrefix}featureName`]
+        };
+        const data = {
+            ...readInfo,
+            source: 'gene'
+        };
+        this.dispatcher.emitSimpleEvent('read:show:pathways', data);
+        event.stopImmediatePropagation();
+    }
 }

client/client/app/components/ngbGenesTablePanel/ngbGenesTable/ngbGenesTableContextMenu/ngbGenesTableContextMenu.template.html

@@ -30,5 +30,15 @@
                 </span>
             </md-button>
         </md-menu-item>
+        <md-menu-item>
+            <md-button ng-click="ctrl.isGene && ctrl.pathwaysSearch($event)"
+                       ng-disabled="!ctrl.isGene">
+                <span>Show pathways</span>
+                <span class="ngb-context-menu-warning" ng-if="!ctrl.isGene">
+                    <ng-md-icon class="ngb-context-menu-warning-icon" icon="warning" size="15"></ng-md-icon>
+                    Feature type is not Gene or Name is missing
+                </span>
+            </md-button>
+        </md-menu-item>
     </md-menu-content>
 </div>

client/client/app/components/ngbPathways/index.js

@@ -0,0 +1,29 @@
+import angular from 'angular';
+import cytoscapePathwayComponent from './ngbCytoscapePathway';
+
+
+// Import components
+import ngbInternalPathwaysResult from './ngbInternalPathwaysResult';
+import ngbInternalPathwaysTable from './ngbInternalPathwaysTable';
+import service from './ngbPathways.service';
+
+// Import internal modules
+import ngbPathwaysPanel from './ngbPathwaysPanel.component';
+import controller from './ngbPathwaysPanel.controller';
+
+// Import Style
+import './ngbPathwaysPanel.scss';
+import ngbPathwaysPanelPaginate from './ngbPathwaysPanelPaginate';
+
+// Import external modules
+export default angular
+    .module('ngbPathwaysPanel', [
+        cytoscapePathwayComponent,
+        ngbInternalPathwaysTable,
+        ngbInternalPathwaysResult,
+        ngbPathwaysPanelPaginate
+    ])
+    .service('ngbPathwaysService', service.instance)
+    .component('ngbPathwaysPanel', ngbPathwaysPanel)
+    .controller(controller.UID, controller)
+    .name;

client/client/app/components/ngbPathways/ngbCytoscapePathway/index.js

@@ -0,0 +1,15 @@
+import angular from 'angular';
+
+// Import internal modules
+import cytoscapeComponent from './ngbCytoscapePathway.component';
+import cytoscapeController from './ngbCytoscapePathway.controller';
+
+// Import Style
+import './ngbCytoscapePathway.scss';
+import cytoscapeSettings from './ngbCytoscapePathway.settings';
+
+export default angular.module('ngbCytoscapePathway', [])
+    .constant('cytoscapeSettings', cytoscapeSettings)
+    .controller(cytoscapeController.UID, cytoscapeController)
+    .component('ngbCytoscapePathway', cytoscapeComponent)
+    .name;

client/client/app/components/ngbPathways/ngbCytoscapePathway/ngbCytoscapePathway.component.js

@@ -0,0 +1,13 @@
+import ngbCytoscapePathwayController from './ngbCytoscapePathway.controller';
+
+export default  {
+    template: require('./ngbCytoscapePathway.tpl.html'),
+    bindings: {
+        elements: '<',
+        tag: '@',
+        onElementClick: '&',
+        storageName: '@',
+        searchParams: '<'
+    },
+    controller: ngbCytoscapePathwayController
+};