commit 520a8a1552f07c169b0f120976955e9b7ac9e69a
author Matteo Scandolo <matteo.scandolo@gmail.com> Fri Mar 10 17:31:37 2017 -0800
committer Matteo Scandolo <matteo.scandolo@gmail.com> Fri Mar 10 18:37:23 2017 -0800
tree 62346c493d366607c337551488ee895f3564236a
parent 6d3e80eca88cc4ce354083b80a84a6d921e24ad4

[CORD-1043] Adding click handler to display models

Change-Id: I331a193afed8e3d4f1bc5699dcb4d91a7404fa07

src/app/service-graph/components/fine-grained/fine-grained.component.scss

diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.scss b/src/app/service-graph/components/fine-grained/fine-grained.component.scss
index 56abd53..5f330ca 100644
--- a/src/app/service-graph/components/fine-grained/fine-grained.component.scss
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.scss
@@ -7,7 +7,7 @@
   // background: $color-accent;
 
   svg {
-    height: 100%;
+    height: 90%;
     width: 100%;
     background-color: $panel-filled-bg;
     border-radius: 3px;

src/app/service-graph/components/fine-grained/fine-grained.component.ts

diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.ts b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
index b0f71a6..474120f 100644
--- a/src/app/service-graph/components/fine-grained/fine-grained.component.ts
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
@@ -6,12 +6,16 @@
 import {XosServiceGraphConfig as config} from '../../graph.config';
 import {IXosDebouncer} from '../../../core/services/helpers/debounce.helper';
 import {IXosServiceGraph, IXosServiceGraphLink, IXosServiceGraphNode} from '../../interfaces';
+import {IXosModelDiscovererService} from '../../../datasources/helpers/model-discoverer.service';
+import {IXosSidePanelService} from '../../../core/side-panel/side-panel.service';
 
 class XosFineGrainedTenancyGraphCtrl {
   static $inject = [
     '$log',
     'XosServiceGraphStore',
-    'XosDebouncer'
+    'XosDebouncer',
+    'XosModelDiscoverer',
+    'XosSidePanel'
   ];
 
   public graph: IXosServiceGraph;
@@ -28,7 +32,9 @@
   constructor(
     private $log: ng.ILogService,
     private XosServiceGraphStore: IXosServiceGraphStore,
-    private XosDebouncer: IXosDebouncer
+    private XosDebouncer: IXosDebouncer,
+    private XosModelDiscoverer: IXosModelDiscovererService,
+    private XosSidePanel: IXosSidePanelService
   ) {
     this.handleSvg();
     this.setupForceLayout();
@@ -225,6 +231,7 @@
       .selectAll('g.node')
       .data(nodes, n => n.id);
 
+    let mouseEventsTimer, selectedModel;
     const svgDim = this.getSvgDimensions();
     const hStep = svgDim.width / (nodes.length - 1);
     const vStep = svgDim.heigth / (nodes.length - 1);
@@ -236,10 +243,30 @@
       })
       .call(this.forceLayout.drag)
       .on('mousedown', () => {
+        mouseEventsTimer = new Date().getTime();
         d3.event.stopPropagation();
       })
-      .on('mouseup', (d) => {
-        d.fixed = true;
+      .on('mouseup', (n) => {
+        mouseEventsTimer = new Date().getTime() - mouseEventsTimer;
+        n.fixed = true;
+      })
+      .on('click', (n: IXosServiceGraphNode) => {
+        if (mouseEventsTimer > 100) {
+          // it is a drag
+          return;
+        }
+        if (selectedModel === n.id) {
+          // this model is already selected, so close the panel
+          this.XosSidePanel.removeInjectedComponents();
+          selectedModel = null;
+          return;
+        }
+        selectedModel = n.id;
+        const modelName = n.model['class_names'].split(',')[0];
+        const formConfig = this.XosModelDiscoverer.get(modelName).formCfg;
+        const model = angular.copy(n.model);
+        delete model.d3Id;
+        this.XosSidePanel.injectComponent('xosForm', {config: formConfig, ngModel: model});
       });
 
     this.renderServiceNodes(entering.filter('.service'));