Merge pull request #17 from qlik-oss/tsm/QLIK-94112-promise

Make sure promise resolves properly

.circleci/config.yml

@@ -18,6 +18,14 @@ jobs:
       - run:
           name: Install dependencies
           command: npm install
+      - run:
+          name: BlackDuck scan
+          command: curl -s https://blackducksoftware.github.io/hub-detect/hub-detect.sh | bash -s -- \
+            --blackduck.url="https://qliktech.blackducksoftware.com" \
+            --blackduck.trust.cert=true \
+            --blackduck.username="svc-blackduck" \
+            --blackduck.password=${svc_blackduck} \
+            --detect.project.name="viz-bundle-qlik-network-chart"
       - run:
           name: Run tests
           command: npm run test-once

gulpfile.js

@@ -17,6 +17,10 @@ gulp.task('zip-build', function(){
     .pipe(gulp.dest(settings.buildDestination));
 });
 
+gulp.task('add-assets', function(){
+  return gulp.src("./assets/**/*").pipe(gulp.dest(settings.buildDestination));
+});
+
 gulp.task('webpack-build', done => {
   webpack(webpackConfig, (error, statistics) => {
     const compilationErrors = statistics && statistics.compilation.errors;
@@ -42,7 +46,7 @@ gulp.task('update-qext-version', function () {
 });
 
 gulp.task('build',
-  gulp.series('remove-build-folder', 'webpack-build', 'update-qext-version', 'zip-build')
+  gulp.series('remove-build-folder', 'webpack-build', 'update-qext-version', 'add-assets', 'zip-build')
 );
 
 gulp.task('watch', () => new Promise((resolve, reject) => {

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

@@ -8,9 +8,9 @@ Tested with Qlik Sense 2.2.3.
 ### Dimensions
 4 dimensions are mandatory :
 
-  1. node identifier
-  2. node label
-  3. node parent identifier
+  1. node identifier (consecutive numbers starting at 0)
+  2. node label (Any text)
+  3. node parent identifier (Refers to node indentifier)
   4. node group
 
 ### Measures
@@ -28,9 +28,14 @@ The measures are optional
 * Display Shadow : switch to enable shadow effects behind edge and nodes
 
 ### Sample
+A data sample can be found here: https://github.com/qlik-oss/network-vis-chart/blob/master/resources/Network%20data.xlsx
+
 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
 

scripts/create-release.sh

@@ -3,7 +3,7 @@ set -o errexit
 
 echo "Creating release for version: $VERSION"
 echo "Artifact name: ./build/${3}_${VERSION}.zip"
-$HOME/bin/ghr -t ${ghoauth} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} -delete ${VERSION} "./build/${3}_${4}.zip"
+$HOME/bin/ghr -t ${ghoauth} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} ${VERSION} "./build/${3}_${4}.zip"
 
 
 # Usage

src/index.js

@@ -5,8 +5,36 @@ Tested on Qlik Sense 2.2.3
 Agilos.com takes no responsibility for any code.
 Use at your own risk.
 */
-import "@babel/polyfill";
+if (!window._babelPolyfill) { // eslint-disable-line no-underscore-dangle
+  require('@babel/polyfill'); // eslint-disable-line global-require
+}
+
 import paint from './paint';
+import './styles/main.less';
+
+const dimDesc = [
+  "Node Identifier",
+  "Node Label",
+  "Node Parent",
+  "Node Group"
+];
+
+const dimLongDesc = [
+  "Node Identifier - a field in the dataset which should be presented as a node in the network diagram."
+  + " these control the actual elements presented in the network diagram.",
+  "Node Label - controls what field holds the data that described the nodes in the network"
+  + " diagram. The field content will be presented as label.",
+  "Node Parent - is used to determine the ancestor node for the individual nodes."
+  + " This field will be used for describing the relationships between network elements.",
+  "Node Group - is a field which describes groups of a node in the network."
+  + " This is used to apply the same color to several nodes."
+];
+
+const measureDesc = [
+  "Tooltip",
+  "Node size",
+  "Edge size"
+];
 
 const component = {
   initialProperties: {
@@ -21,30 +49,62 @@ const component = {
     }
   },
   //property panel
+  data: {
+    dimensions: {
+      min: 3,
+      max: 4,
+      description(properties, index) {
+        return dimDesc[index];
+      }
+      /*
+      1. Dimension: Node ID, numeric (Event ID or else) or String
+      2. Dimension: Node Label
+      3. Dimension: Node Parent ID, numeric (Event ID or else) or String
+      4. Dimension: Node Cluster
+      */
+    },
+    measures: {
+      min: 0,
+      max: 3,
+      description(properties, index) {
+        return measureDesc[index];
+      }
+      /*
+      1. Measure: title text for tooltip (optional)
+      2. Measure: node value
+      3. Measure: edge value
+      */
+    }
+  },
   definition: {
     type: "items",
     component: "accordion",
     items: {
-      dimensions: {
-        uses: "dimensions",
-        min: 4,
-        max: 4
-        /*
-        1. Dimension: Node ID, numeric (Event ID or else) or String
-        2. Dimension: Node Label
-        3. Dimension: Node Parent ID, numeric (Event ID or else) or String
-        4. Dimension: Node Cluster
-        */
-      },
-      measures: {
-        uses: "measures",
-        min: 0,
-        max: 3
-        /*
-        1. Measure: title text for tooltip (optional)
-        2. Measure: node value
-        3. Measure: edge value
-        */
+      data: {
+        uses: "data",
+        items:{
+          dimensions:{
+            disabledRef: "",
+            items: {
+              helpDesc: {
+                component: 'text',
+                style: 'qlik-network-chart-italic-property',
+                label: function(properties, handler) {
+                  var index;
+                  handler.getDimensions().forEach((element, i) => {
+                    if(element.qDef.cId === properties.qDef.cId) {
+                      index = i;
+                    }
+                  });
+                  return dimLongDesc[index];
+                }
+              }
+            }
+          },
+          measures: {
+            disabledRef: ""
+          }
+        }
       },
       sorting: {
         uses: "sorting"
@@ -58,13 +118,14 @@ const component = {
         }
       },
       settings: {
-        uses: "settings",
+        type: "items",
+        label: "Settings",
         items: {
           edgeType: {
             ref: "edgeType",
             type: "string",
             component: "dropdown",
-            label: "Egde Type",
+            label: "Edge Type",
             options: [
               { value: 'dynamic' },
               { value: 'continuous' },
@@ -136,11 +197,13 @@ const component = {
       }
     }
   },
-
-  snapshot: {
-    canTakeSnapshot: true
+  support: {
+    export: true,
+    snapshot: false
+  },
+  snapshot: {
+    canTakeSnapshot: false
   },
-
   paint: paint
 };
 

src/paint.js

@@ -1,149 +1,230 @@
 import { Network } from 'vis/index-network';
+import qlik from 'qlik';
+import { createTooltipHTML } from './tooltip';
+import { escapeHTML } from './utilities';
 
 function isTextCellNotEmpty(c) {
   return (c.qText && !(c.qIsNull || c.qText.trim() == ''));
 }
 
-function paint ( $element, layout ) {
-  var _this = this,
-    qData = layout.qHyperCube.qDataPages[0],
-    id = layout.qInfo.qId,
-    containerId = 'network-container_' + id;
+function getColor (index, colors) {
+  return colors[index % colors.length];
+}
 
+function paint ( $element, layout, qTheme, component ) {
 
-  if(qData && qData.qMatrix) {
-    $element.empty().append($('<div />')
-      .attr({ id: containerId })
-      .css({
-        height: $element.height(),
-        width: $element.width(),
-        overflow: 'auto'
-      }));
+  return new qlik.Promise(function(resolve) {
 
-    var dataSet = qData.qMatrix.map(function(e){
-      var dataItem = {
-        id: e[0].qNum,
-        label: e[1].qText,
-        group: e[3].qText,
-        parentid : e[2].qNum
+    const colorScale = qTheme.properties.palettes.data[0];
+    const numDimensions = layout.qHyperCube.qDimensionInfo.length;
+    const numMeasures = layout.qHyperCube.qMeasureInfo.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', component.inEditState())
+        .css({
+          height: $element.height(),
+          width: $element.width(),
+          overflow: 'auto'
+        }));
+
+      var dataSet = qData.qMatrix.map(function(e){
+        const nodeName = e[1].qText;
+        let groupNumber;
+
+        const dataItem = {
+          id: e[0].qText,
+          eNum: e[0].qElemNumber,
+          label: nodeName,
+          parentid : e[2].qText
+        };
+
+        if(numDimensions === 4) {
+          groupNumber = e[3].qText;
+          dataItem.group = groupNumber;
+        }
+
+        // optional measures set
+        if (numMeasures > 0) {
+          const tooltip = e[numDimensions];
+
+          if (isTextCellNotEmpty(tooltip)) {
+            const tooltipText = tooltip.qText;
+            dataItem.title = escapeHTML(tooltipText);
+          } else if(numMeasures > 1) {
+            // This part is a bit fishy and should be tested
+            const nodeMeasure = e[numDimensions+1].qText;
+            dataItem.title = createTooltipHTML({
+              name: nodeName,
+              groupNumber,
+              nodeMeasure
+            });
+          }
+        }
+
+        if (numMeasures > 1) {
+          if (e[numDimensions+1].qNum) {
+            // node value - to scale node shape size
+            dataItem.nodeValue = e[5].qNum;
+          }
+        }
+
+        if (numMeasures > 2) {
+          if (e[numDimensions+2].qNum) {
+            // edge value - to scale edge width
+            dataItem.edgeValue = e[numDimensions+2].qNum;
+          }
+        }
+
+        return dataItem;
+      });
+
+      // Require 2 arrays :  nodes and edges -  nodes array must be unique values of IDs !
+      var uniqueId = [];
+      var nodes = [];
+      var edges = [];
+      const groups = {};
+
+      for(let i = 0; i< dataSet.length; i++){
+        if (layout.displayEdgeLabel && dataSet[i].edgeValue !== undefined) {
+          edges.push({
+            "from":dataSet[i].id,
+            "to":dataSet[i].parentid,
+            "value":dataSet[i].edgeValue,
+            "label": `${dataSet[i].edgeValue}`
+          }); // with labels
+        } else {
+          edges.push({
+            "from":dataSet[i].id,
+            "to":dataSet[i].parentid,
+            "value":dataSet[i].edgeValue
+          }); // create edges
+        }
+
+        // process uniqueness
+        if(uniqueId.indexOf(dataSet[i].id) === -1) {
+          uniqueId.push(dataSet[i].id);
+
+          var nodeItem = {
+            id: dataSet[i].id,
+            eNum: dataSet[i].eNum,
+            label: dataSet[i].label,
+            title: dataSet[i].title,
+            group: dataSet[i].group,
+            value: dataSet[i].nodeValue
+          };
+          nodes.push(nodeItem); // create node
+          groups[nodeItem.group] = {};
+        }
+      }
+      const colors = colorScale.scale[Math.min(Object.keys(groups).length-1, colorScale.scale.length-1)];
+
+      Object.keys(groups).forEach(function(g,i) {
+        groups[g].color = getColor(i, colors);
+      });
+
+      // create dataset for \\
+      var data = {
+        nodes: nodes,
+        edges: edges
       };
 
-      // optional measures set
-      if (e.length > 4) {
-        // tooltip
-        if (isTextCellNotEmpty(e[4])) {
-          dataItem.title = e[4].qText;
-        } else {
-          dataItem.title = "*** Default Tooltip ***" + "<BR/>" + "Name:" + e[1].qText + "<BR/>" + "Group:" + e[3].qText;
+      // create a network
+      var container = document.getElementById(containerId);
+
+      var options = {
+        groups: groups,
+        layout: {
+          randomSeed: 1
+        },
+        nodes: {
+          shape:layout.nodeShape,
+          shadow:layout.shadowMode
+        },
+        edges: {
+          shadow:layout.shadowMode,
+          font: {
+            align: layout.posEdgeLabel
+          },
+          smooth: {
+            type: layout.edgeType
+          }
+        },
+        interaction: {
+          hideEdgesOnDrag: true,
+          tooltipDelay: 100
+        },
+        physics: {
+          forceAtlas2Based: {
+            gravitationalConstant: -100,
+            centralGravity: 0.005,
+            springLength: 230,
+            springConstant: 0.18
+          },
+          maxVelocity: 146,
+          solver: 'forceAtlas2Based',
+          timestep: 0.35,
+          stabilization: { iterations: 150 }
         }
-      }
+      };
+      var network = new Network(container, data, options);
+      network.fit();
 
-      if (e.length > 5) {
-        if (e[5].qNum) {
-          // node value - to scale node shape size
-          dataItem.nodeValue = e[5].qNum;
+      // Handle Selection on 1-node
+      $("#"+containerId).css('cursor','default');
+
+      network.on('select', function (properties) {
+        if (properties.hasOwnProperty("nodes")) {
+          if (properties.nodes.length > 0) {
+            // find connected nodes to selection
+            var connectedNodes = network.getConnectedNodes(properties.nodes[0]);
+            // append node to the array
+            connectedNodes.push(properties.nodes[0]);
+            const toSelect = [];
+            connectedNodes.forEach(function(node) {
+              var id;
+              data.nodes.forEach(function(dataNode) {
+                // Find match, ignore null
+                if(dataNode.id === node && node !== "-") {
+                  id = dataNode.eNum;
+                }
+              });
+              if(id !== undefined) {
+                // Remove duplicates
+                toSelect.indexOf(id) === -1 && toSelect.push(id);
+              }
+            });
+            //Make the selections
+            component.backendApi.selectValues(0,toSelect,false);
+          }
         }
-      }
+      });
 
-      if (e.length > 6) {
-        if (e[6].qNum) {
-          // edge value - to scale edge width
-          dataItem.edgeValue = e[6].qNum;
-        }
-      }
-
-      return dataItem;
-    });
-
-    // Require 2 arrays :  nodes and edges -  nodes array must be unique values of IDs !
-    var uniqueId = [];
-    var nodes = [];
-    var edges = [];
-
-    for(let i = 0; i< dataSet.length; i++){
-      if (layout.displayEdgeLabel) {
-        edges.push( { "from":dataSet[i].id, "to":dataSet[i].parentid, "value":dataSet[i].edgeValue, "label":dataSet[i].edgeValue } ); // with labels
-      } else {
-        edges.push( { "from":dataSet[i].id, "to":dataSet[i].parentid, "value":dataSet[i].edgeValue } ); // create edges
-      }
-
-      // process uniqueness
-      if(uniqueId.indexOf(dataSet[i].id) === -1) {
-        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
-        };
-        nodes.push(nodeItem); // create node
-      }
+      network.on('stabilizationIterationsDone', function() {
+        resolve();
+      });
+    } else {
+      resolve();
     }
+  });
+}
 
-    // create dataset for \\
-    var data = {
-      nodes: nodes,
-      edges: edges
-    };
+function themePaint ($element, layout) {
+  const component = this;
+  try {
+    const app = qlik.currApp(this);
 
-    // create a network
-    var container = document.getElementById(containerId);
-
-    var options = {
-      layout: {
-        randomSeed: 1
-      },
-      nodes: {
-        shape:layout.nodeShape,
-        shadow:layout.shadowMode
-      },
-      edges: {
-        shadow:layout.shadowMode,
-        font: {
-          align: layout.posEdgeLabel
-        },
-        smooth: {
-          type: layout.edgeType
-        }
-      },
-      interaction: {
-        hideEdgesOnDrag: true,
-        tooltipDelay: 100
-      },
-      physics: {
-        forceAtlas2Based: {
-          gravitationalConstant: -100,
-          centralGravity: 0.005,
-          springLength: 230,
-          springConstant: 0.18
-        },
-        maxVelocity: 146,
-        solver: 'forceAtlas2Based',
-        timestep: 0.35,
-        stabilization: { iterations: 150 }
-      }
-    };
-    var network = new Network(container, data, options);
-
-    // Handle Selection on 1-node
-    $("#"+containerId).css('cursor','default');
-
-    network.on('select', function (properties) {
-      if (properties.hasOwnProperty("nodes")) {
-        if (properties.nodes.length > 0) {
-          // find connected nodes to selection
-          var connectedNodes = network.getConnectedNodes(properties.nodes[0]);
-          // append node to the array
-          connectedNodes.push(properties.nodes[0]);
-
-          //Make the selections
-          _this.backendApi.selectValues(0,connectedNodes,false);
-        }
-      }
+    return app.theme.getApplied().then( function( qTheme ) {
+      return paint($element, layout, qTheme, component);
     });
+  } catch (exception) {
+    console.error(exception); // eslint-disable-line no-console
   }
 }
 
-export default paint;
+export default themePaint;

src/qlik-network-chart.qext

@@ -1,7 +1,7 @@
 {
 	"name" : "Network chart",
-	"description" : "Network chart",
-	"icon" : "extension",
+	"description" : "Displays hierarchical or relational dimensions as nodes and edges´, with measures to show the significance of its links.",
+	"icon" : "bubbles",
 	"type" : "visualization",
 	"version": "X.Y.Z",
 	"preview" : "network.png",

src/styles/main.less

@@ -0,0 +1,17 @@
+.is-edit-mode > div {
+  pointer-events: none;
+}
+
+.vis-tooltip {
+  position: absolute;
+  background-color: #333;
+  opacity: 0.95;
+  border-radius: 5px;
+  color: #eee;
+  padding: 10px;
+  max-width: 200px;
+}
+
+.qlik-network-chart-italic-property {
+  font-style: italic;
+}

src/tooltip.js

@@ -0,0 +1,28 @@
+function createEntry(header, value) {
+  const entry = document.createElement('div');
+  const nameHeader = document.createElement('span');
+  const nameHeaderValue = document.createTextNode(header);
+  const nameValueContainer = document.createElement('b');
+  const nameValue = document.createTextNode(value);
+
+  nameHeader.appendChild(nameHeaderValue);
+  nameValueContainer.appendChild(nameValue);
+
+  entry.appendChild(nameHeader);
+  entry.appendChild(nameValueContainer);
+
+  return entry;
+}
+
+export function createTooltipHTML({ name, groupNumber, nodeMeasure }) {
+  const tooltip = document.createElement('div');
+  const nameEntry = createEntry('Name: ', name);
+  const groupNumberEntry = createEntry('Group number: ', groupNumber);
+  const nodeMeasureEntry = createEntry('Node measure: ', nodeMeasure);
+
+  tooltip.appendChild(nameEntry);
+  tooltip.appendChild(groupNumberEntry);
+  tooltip.appendChild(nodeMeasureEntry);
+
+  return tooltip.innerHTML;
+}

src/utilities.js

@@ -0,0 +1,5 @@
+export function escapeHTML(str){
+  var span = document.createElement('span');
+  span.appendChild(document.createTextNode(str));
+  return span.innerHTML;
+}

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: [
       {