Merge pull request #10 from qlik-oss/revert-the-reverted

Revert

karma.conf.js

@@ -19,6 +19,14 @@ module.exports = (config) => {
     webpack: {
       devtool: 'source-map',
       mode: settings.mode,
+      externals: {
+        qlik: {
+          amd: 'qlik',
+          commonjs: 'qlik',
+          commonjs2: 'qlik',
+          root: '_'
+        }
+      },
       module: {
         rules: [
           {

readme.md

@@ -31,6 +31,9 @@ The measures are optional
 QVF based on characters from Victor Hugo's novel , Les Misérables.
 ![Network chart](resources/network_chart_v1.png)
 
+### Data Limit
+Starts having issues stabilizing(transforming into untangled view) at around 100-200 nodes depending on dataset.
+
 
 # Getting Started
 

src/index.js

@@ -7,6 +7,7 @@ Use at your own risk.
 */
 import "@babel/polyfill";
 import paint from './paint';
+import './styles/main.less';
 
 const component = {
   initialProperties: {
@@ -136,11 +137,12 @@ const component = {
       }
     }
   },
-
+  support: {
+    export: true
+  },
   snapshot: {
     canTakeSnapshot: true
   },
-
   paint: paint
 };
 

src/paint.js

@@ -1,19 +1,29 @@
 import { Network } from 'vis/index-network';
+import qlik from 'qlik';
+
+const colorScheme = 'Diverging Classes';
 
 function isTextCellNotEmpty(c) {
   return (c.qText && !(c.qIsNull || c.qText.trim() == ''));
 }
 
-function paint ( $element, layout ) {
-  var _this = this,
-    qData = layout.qHyperCube.qDataPages[0],
+function paint ( $element, layout, qTheme, component ) {
+  const colorScale = qTheme.properties.scales
+    .find(scale => scale.name === colorScheme).scale;
+  const colors = colorScale[colorScale.length - 1];
+
+  function getColor (number) {
+    return colors[number % colors.length];
+  }
+
+  var qData = layout.qHyperCube.qDataPages[0],
     id = layout.qInfo.qId,
     containerId = 'network-container_' + id;
 
-
   if(qData && qData.qMatrix) {
     $element.empty().append($('<div />')
       .attr({ id: containerId })
+      .toggleClass('is-edit-mode', _this.inEditState())
       .css({
         height: $element.height(),
         width: $element.width(),
@@ -59,6 +69,7 @@ function paint ( $element, layout ) {
     var uniqueId = [];
     var nodes = [];
     var edges = [];
+    const groups = {};
 
     for(let i = 0; i< dataSet.length; i++){
       if (layout.displayEdgeLabel) {
@@ -72,13 +83,16 @@ function paint ( $element, layout ) {
         uniqueId.push(dataSet[i].id);
 
         var nodeItem = {
-          "id": dataSet[i].id,
-          "label": dataSet[i].label,
-          "title": dataSet[i].title,
-          "group": dataSet[i].group,
-          "value": dataSet[i].nodeValue
+          id: dataSet[i].id,
+          label: dataSet[i].label,
+          title: dataSet[i].title,
+          group: dataSet[i].group,
+          value: dataSet[i].nodeValue
         };
         nodes.push(nodeItem); // create node
+        groups[nodeItem.group] = {
+          color: getColor(nodeItem.group)
+        };
       }
     }
 
@@ -92,6 +106,7 @@ function paint ( $element, layout ) {
     var container = document.getElementById(containerId);
 
     var options = {
+      groups: groups,
       layout: {
         randomSeed: 1
       },
@@ -139,11 +154,24 @@ function paint ( $element, layout ) {
           connectedNodes.push(properties.nodes[0]);
 
           //Make the selections
-          _this.backendApi.selectValues(0,connectedNodes,false);
+          component.backendApi.selectValues(0,connectedNodes,false);
         }
       }
     });
   }
 }
 
-export default paint;
+function themePaint ($element, layout) {
+  const component = this;
+  try {
+    const app = qlik.currApp(this);
+
+    app.theme.getApplied().then( function( qTheme ) {
+      paint($element, layout, qTheme, component);
+    });
+  } catch (exception) {
+    console.error(exception); // eslint-disable-line no-console
+  }
+}
+
+export default themePaint;

src/styles/main.less

@@ -0,0 +1,3 @@
+.is-edit-mode > div {
+  pointer-events: none;
+}

webpack.config.js

@@ -16,6 +16,14 @@ const config = {
     filename: settings.name + '.js',
     libraryTarget: 'umd'
   },
+  externals: {
+    qlik: {
+      amd: 'qlik',
+      commonjs: 'qlik',
+      commonjs2: 'qlik',
+      root: '_'
+    }
+  },
   module: {
     rules: [
       {