chore: add network-next

Updated dependencies

.circleci/config.yml

@@ -20,7 +20,7 @@ jobs:
           command: npm install
       - run:
           name: BlackDuck scan
-          command: curl -s https://blackducksoftware.github.io/hub-detect/hub-detect.sh | bash -s -- \
+          command: curl -s https://detect.synopsys.com/detect.sh | bash -s -- \
             --blackduck.url="https://qliktech.blackducksoftware.com" \
             --blackduck.trust.cert=true \
             --blackduck.username="svc-blackduck" \

package.json

@@ -12,25 +12,25 @@
     "eslint": "eslint src"
   },
   "devDependencies": {
-    "@babel/core": "7.1.5",
-    "@babel/polyfill": "7.0.0",
-    "@babel/preset-env": "7.1.5",
-    "babel-eslint": "10.0.1",
-    "babel-loader": "8.0.4",
-    "css-loader": "1.0.1",
-    "del": "3.0.0",
-    "eslint": "5.8.0",
-    "eslint-loader": "2.1.1",
-    "file-loader": "2.0.0",
-    "gulp": "4.0.0",
+    "@babel/core": "7.15.0",
+    "@babel/polyfill": "7.12.1",
+    "@babel/preset-env": "7.15.0",
+    "babel-eslint": "10.1.0",
+    "babel-loader": "8.2.2",
+    "css-loader": "6.2.0",
+    "del": "6.0.0",
+    "eslint": "7.32.0",
+    "eslint-loader": "4.0.2",
+    "file-loader": "6.2.0",
+    "gulp": "4.0.2",
     "gulp-util": "^3.0.7",
-    "gulp-zip": "4.2.0",
-    "less": "3.8.1",
-    "less-loader": "4.1.0",
-    "style-loader": "0.23.1",
-    "stylelint": "9.7.1",
-    "stylelint-webpack-plugin": "0.10.5",
-    "webpack": "4.25.1"
+    "gulp-zip": "5.1.0",
+    "less": "4.1.1",
+    "less-loader": "10.0.1",
+    "style-loader": "3.2.1",
+    "stylelint": "13.13.1",
+    "stylelint-webpack-plugin": "3.0.1",
+    "webpack": "5.51.1"
   },
   "dependencies": {
     "vis": "4.21.0"

readme.md

@@ -1,4 +1,7 @@
 # Qlik Network Chart
+
+### **_The network chart is getting an overhaul with a conversion to Nebula and updated dependencies: see branch [network-next](https://github.com/qlik-oss/network-vis-chart/tree/network-next)_**
+
 This extension is part of the extension bundles for Qlik Sense. The repository is maintained and moderated by Qlik RD.
 
 Feel free to fork and suggest pull requests for improvements and bug fixes. Changes will be moderated and reviewed before inclusion in future bundle versions. Please note that emphasis is on backward compatibility, i.e. breaking changes will most likely not be approved.
@@ -18,3 +21,7 @@ If you want to do code changes to the extension follow these simple steps to get
 # Original Author
 **Michael Laenen**
 * [github.com/miclae76](https://github.com/miclae76)
+
+# Contributors
+**Göran Sander**
+* [github.com/mountaindude](https://github.com/mountaindude)

src/index.js

@@ -194,15 +194,35 @@ const component = {
             defaultValue: false
           }
         }
+      },
+      about: {
+        component: 'items',
+        label: 'About',
+        items: {
+          header: {
+            label: 'Network chart',
+            style: 'header',
+            component: 'text'
+          },
+          paragraph1: {
+            label: `Network chart is Qlik Sense chart which allows you to draw a network of connected nodes and edges from a data set to a sheet.`,
+            component: 'text'
+          },
+          paragraph2: {
+            label: 'Network chart is based upon an extension created by Michael Laenen.',
+            component: 'text'
+          }
+        }
       }
     }
   },
   support: {
     export: true,
-    snapshot: false
+    snapshot: true,
+    exportData: true
   },
   snapshot: {
-    canTakeSnapshot: false
+    canTakeSnapshot: true
   },
   paint: paint
 };

src/paint.js

@@ -12,9 +12,7 @@ function getColor (index, colors) {
 }
 
 function paint ( $element, layout, qTheme, component ) {
-
   return new qlik.Promise(function(resolve) {
-
     const colorScale = qTheme.properties.palettes.data[0];
     const numDimensions = layout.qHyperCube.qDimensionInfo.length;
     const numMeasures = layout.qHyperCube.qMeasureInfo.length;
@@ -179,7 +177,7 @@ function paint ( $element, layout, qTheme, component ) {
       $("#"+containerId).css('cursor','default');
 
       network.on('select', function (properties) {
-        if (properties.hasOwnProperty("nodes")) {
+        if (Object.prototype.hasOwnProperty.call(properties, "nodes") && component.options.noInteraction !== true) { 
           if (properties.nodes.length > 0) {
             // find connected nodes to selection
             var connectedNodes = network.getConnectedNodes(properties.nodes[0]);

webpack.config.js

@@ -2,6 +2,8 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
 const packageJSON = require('./package.json');
 const path = require('path');
 const webpack = require('webpack');
+const SOURCE_MAP = 'sourec-map';
+const DEVTOOL = (process.env.NODE_ENV === 'development') ? SOURCE_MAP : false;
 
 const DIST = path.resolve("./dist");
 const MODE = process.env.NODE_ENV || 'development';
@@ -9,7 +11,7 @@ const MODE = process.env.NODE_ENV || 'development';
 console.log('Webpack mode:', MODE); // eslint-disable-line no-console
 
 const config = {
-  devtool: 'source-map',
+  devtool: DEVTOOL,
   entry: [
     './src/index.js'
   ],