Merge pull request #24 from qlik-oss/QLIK-98564/sourceMaps

Removing source maps from production mode.

.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" \

readme.md

@@ -1,71 +1,20 @@
 # Qlik Network Chart
+This extension is part of the extension bundles for Qlik Sense. The repository is maintained and moderated by Qlik RD.
 
-[![CircleCI](https://circleci.com/gh/qlik-oss/network-vis-chart.svg?style=shield)](https://circleci.com/gh/qlik-oss/network-vis-chart)
-
-Qlik Sense extension to visualize networks data based on library vis.js (http://visjs.org).
-Tested with Qlik Sense 2.2.3.
-
-### Dimensions
-4 dimensions are mandatory :
-
-  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
-The measures are optional
-
-  1. tooltip : expression that will be push in the tooltip when hover on a node
-  2. node value : used to scale the node size
-  3. edge value : used to scale the edge width
-
-### Additional network settings
-* Edge Type : select type of curve between nodes
-* Node Shape : dot, square, diamond, triangle ...
-* Display Edge Value : switch to display the measures on edge curves
-* Position Edge Label : top, bottom, middle, horizontal
-* 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
-
-## Installation
-
-1. Download the extension zip, `qlik-network-chart_<version>.zip`, from the latest release(https://github.com/qlik-oss/network-vis-chart/releases/latest)
-2. Install the extension:
-
-   a. **Qlik Sense Desktop**: unzip to a directory under [My Documents]/Qlik/Sense/Extensions.
-
-   b. **Qlik Sense Server**: import the zip file in the QMC.
+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.
 
+Usage documentation for the extension is available at https://help.qlik.com.
 
 # Developing the extension
-
 If you want to do code changes to the extension follow these simple steps to get going.
 
 1. Get Qlik Sense Desktop
-1. Create a new app and add the extension to a sheet.
+1. Create a new app and add Network chart to a sheet.
 2. Clone the repository
 3. Run `npm install`
-4. Set the environment variable `BUILD_PATH` to your extensions directory. It will be something like `C:/Users/<user>/Documents/Qlik/Sense/Extensions/<extension_name>`.
-5. You now have two options. Either run the watch task or the build task. They are explained below. Both of them default to development mode but can be run in production by setting `NODE_ENV=production` before running the npm task.
-
-   a. **Watch**: `npm run watch`. This will start a watcher which will rebuild the extension and output all needed files to the `buildFolder` for each code change you make. See your changes directly in your Qlik Sense app.
-
-   b. **Build**: `npm run build`. If you want to build the extension package. The output zip-file can be found in the `buildFolder`.
+4. Run `npm run build` - to build a dev-version to the /dist folder.
+5. Move the content of the /dist folder to the extension directory. Usually in `C:/Users/<user>/Documents/Qlik/Sense/Extensions/qlik-network-chart`.
 
 # Original Author
-
 **Michael Laenen**
-
 * [github.com/miclae76](https://github.com/miclae76)

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

@@ -179,7 +179,7 @@ function paint ( $element, layout, qTheme, component ) {
       $("#"+containerId).css('cursor','default');
 
       network.on('select', function (properties) {
-        if (properties.hasOwnProperty("nodes")) {
+        if (properties.hasOwnProperty("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'
   ],