fix: Environment Setup not needed for deploy

fix: QB-14863-duplicateKeys

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2
 defaults: &defaults
   working_directory: ~/qlik-smart-pivot
   docker:
-    - image: circleci/node:stretch
+    - image: circleci/node:16.13.0
   environment:
     GITHUB_ORG: "qlik-oss"
     GITHUB_REPO: "PLSmartPivot"
@@ -12,20 +12,12 @@ defaults: &defaults
 jobs:
   test:
     docker:
-    - image: circleci/node:stretch-browsers
+    - image: circleci/node:16.13.0-browsers
     steps:
       - checkout
       - run:
           name: Install dependencies
           command: npm install
-      - run:
-          name: BlackDuck scan
-          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" \
-            --blackduck.password=${svc_blackduck} \
-            --detect.project.name="viz-bundle-qlik-smart-pivot"
 
   bump-version:
     <<: *defaults
@@ -43,6 +35,10 @@ jobs:
     <<: *defaults
     steps:
       - checkout
+      - run:
+          name: Setup environment
+          command: |
+           sudo chmod +x ./.circleci/upgrade-node.sh
       - attach_workspace:
           at: ~/qlik-smart-pivot
       - run:

.circleci/upgrade-node.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+set -eo pipefail
+
+NVM_DIR="/opt/circleci/.nvm"
+NODE_VERSION="v16"
+
+curl -o-  https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+
+echo "Installing Node $NODE_VERSION"
+nvm install $NODE_VERSION
+nvm alias default $NODE_VERSION
+
+# Each step uses the same `$BASH_ENV`, so need to modify it
+echo 'export NVM_DIR="/opt/circleci/.nvm"' >> $BASH_ENV
+echo "[ -s \"$NVM_DIR/nvm.sh\" ] && . \"$NVM_DIR/nvm.sh\"" >> $BASH_ENV

.eslintrc.js

@@ -3,15 +3,15 @@ module.exports = {
     ecmaVersion: 6,
     ecmaFeatures: {
       jsx: true,
-      modules: true
+      modules: true,
     },
-    sourceType: "module"
+    sourceType: "module",
   },
   parser: "babel-eslint",
   env: {
     browser: true,
     es6: true,
-    node: true
+    node: true,
   },
   globals: {
     angular: false,
@@ -21,49 +21,63 @@ module.exports = {
     document: false,
     expect: false,
     it: false,
-    require: false
+    require: false,
   },
   rules: {
-    "indent": ["error", 2, { "SwitchCase": 1 }],
+    indent: ["warn", 2, { SwitchCase: 1 }],
     "linebreak-style": ["error", "unix"],
     "object-curly-spacing": ["error", "always"],
     "max-lines": ["warn", 300],
-    "max-len": ["warn", { "code": 120, "ignoreComments": true, "ignoreTrailingComments": false }],
+    "max-len": [
+      "warn",
+      { code: 120, ignoreComments: true, ignoreTrailingComments: false },
+    ],
     "no-console": ["warn"],
-    "no-mixed-operators": ["warn", {
+    "no-mixed-operators": [
-      "groups": [
+      "warn",
-        ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
+      {
-        ["&&", "||"],
+        groups: [
-        ["in", "instanceof"]
+          ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
-      ],
+          ["&&", "||"],
-      "allowSamePrecedence": true
+          ["in", "instanceof"],
-    }],
+        ],
+        allowSamePrecedence: true,
+      },
+    ],
+    "comma-dangle": ["off"],
+    "space-before-function-paren": ["off"],
     "no-multi-spaces": ["error"],
     "no-cond-assign": ["warn"],
     "no-fallthrough": ["warn"],
     "no-undef": ["error"],
     "no-unused-vars": ["error"],
-    "no-use-before-define": ["error", { "functions": false, "classes": false, "variables": false }],
+    "no-use-before-define": [
+      "error",
+      { functions: false, classes: false, variables: false },
+    ],
     "no-useless-escape": ["warn"],
     "no-useless-return": ["warn"],
-    "no-underscore-dangle": ["warn", { "allow": ["_id"] }],
+    "no-underscore-dangle": ["warn", { allow: ["_id"] }],
     "no-redeclare": ["error"],
     "no-restricted-syntax": ["warn"],
     "operator-linebreak": ["warn", "before"],
     "prefer-promise-reject-errors": ["warn"],
-    "padded-blocks": ["warn", { "blocks": "never", "switches": "never", "classes": "never" }],
+    "padded-blocks": [
-    "semi": ["error", "always"],
+      "warn",
+      { blocks: "never", switches: "never", classes: "never" },
+    ],
+    semi: ["error", "always"],
     "valid-typeof": ["warn"],
     "no-eval": ["error"],
     "no-implied-eval": ["error"],
     "no-debugger": ["warn"],
     "no-unreachable": ["warn"],
-    "quotes": ["warn", "single", { "avoidEscape": true }],
+    quotes: ["warn", "single", { avoidEscape: true }],
     "sort-imports": ["off"],
     "max-lines-per-function": ["off"], // marks the entire functions, a bit too noisy
-    "complexity": ["warn"],
+    complexity: ["warn"],
-    "camelcase": ["warn"],
+    camelcase: ["warn"],
-    "max-statements": ["off"],  // marks the entire functions, a bit too noisy
+    "max-statements": ["off"], // marks the entire functions, a bit too noisy
     "sort-vars": ["off"], // not much value for the work
     "init-declarations": ["off"],
     "capitalized-comments": ["off"],
@@ -99,13 +113,13 @@ module.exports = {
     "array-bracket-newline": ["warn"],
     "array-element-newline": ["warn"],
     "object-shorthand": ["warn"],
-    "eqeqeq": ["warn"],
+    eqeqeq: ["warn"],
     "no-empty-function": ["off"],
     "function-paren-newline": ["warn"],
     "no-invalid-this": ["warn"],
     "newline-per-chained-call": ["warn"],
     "no-unused-expressions": ["warn"],
-    "strict": ["warn"],
+    strict: ["warn"],
     "no-ternary": ["off"],
     "multiline-ternary": ["off"],
     "no-param-reassign": ["error"],
@@ -115,9 +129,9 @@ module.exports = {
     "default-case": ["warn"],
     "no-alert": ["warn"],
     "max-params": ["warn"],
-    "brace-style": ["warn", "1tbs", { "allowSingleLine": true }],
+    "brace-style": ["warn", "1tbs", { allowSingleLine: true }],
     "prefer-const": ["warn"],
-    "class-methods-use-this":["warn"],
+    "class-methods-use-this": ["warn"],
     // plugin:react
     "react/jsx-indent": ["warn", 2],
     "react/jsx-indent-props": ["warn", 2],
@@ -131,10 +145,7 @@ module.exports = {
     "react/jsx-max-depth": ["off"], // rule throws exception in single-dimension-measure
     "react/jsx-filename-extension": ["warn"],
     "react/prefer-stateless-function": ["warn"],
-    "react/no-set-state": ["warn"]
+    "react/no-set-state": ["warn"],
   },
-  extends: [
+  extends: ["eslint:all", "plugin:react/all"],
-    "eslint:all",
+};
-    "plugin:react/all"
-  ]
-}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "json.format.enable": false
+}

gulpfile.js

@@ -24,7 +24,8 @@ gulp.task('qext', function () {
 		repository: pkg.repository,
 		dependencies: {
 			'qlik-sense': '>=5.5.x'
-		}
+		},
+		__next: true
 	};
 	if (pkg.contributors) {
 		qext.contributors = pkg.contributors;

src/data-table/data-cell.jsx

@@ -1,14 +1,16 @@
+/* eslint-disable react/sort-prop-types */
+/* eslint-disable space-before-function-paren */
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../tooltip/index.jsx';
 
 class DataCell extends React.PureComponent {
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.handleSelect = this.handleSelect.bind(this);
   }
 
-  handleSelect () {
+  handleSelect() {
     const {
       data: {
         meta: {
@@ -26,14 +28,14 @@ class DataCell extends React.PureComponent {
     if (!allowFilteringByClick) {
       return;
     }
-
+    // fixes the console error on selection made from data cells
-    component.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], false);
+    component.selectValues(0, [measurement.parents.dimension1.elementNumber], false);
     if (hasSecondDimension) {
-      component.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], false);
+      component.selectValues(1, [measurement.parents.dimension2.elementNumber], false);
     }
   }
 
-  render () {
+  render() {
     const {
       cellWidth,
       measurement,
@@ -41,9 +43,9 @@ class DataCell extends React.PureComponent {
       styling
     } = this.props;
 
-    let textAlignment = styling.options.textAlignment || 'Right';
+    const textAlignment = styling.options.textAlignment || 'Right';
 
-    let cellStyle = {
+    const cellStyle = {
       fontFamily: styling.options.fontFamily,
       ...styleBuilder.getStyle(),
       paddingLeft: '5px',
@@ -64,10 +66,10 @@ class DataCell extends React.PureComponent {
     const { conditionalColoring } = styling;
     if (conditionalColoring.enabled) {
       const isValidConditionalColoringValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-      const isSpecifiedRow =
+      const isSpecifiedRow
-        conditionalColoring.rows.indexOf(measurement.parents.dimension1.header) !== -1;
+        = conditionalColoring.rows.indexOf(measurement.parents.dimension1.header) !== -1;
-      const isSpecifiedMeasure =
+      const isSpecifiedMeasure
-        conditionalColoring.measures.indexOf(measurement.parents.measurement.index) !== -1;
+        = conditionalColoring.measures.indexOf(measurement.parents.measurement.index) !== -1;
       const shouldHaveConditionalColoring = (conditionalColoring.colorAllRows || isSpecifiedRow)
         && (conditionalColoring.colorAllMeasures || isSpecifiedMeasure);
       if (isValidConditionalColoringValue && shouldHaveConditionalColoring) {
@@ -112,7 +114,7 @@ DataCell.propTypes = {
   }).isRequired,
   component: PropTypes.shape({
     backendApi: PropTypes.shape({
-      selectValues: function (props, propName) {
+      selectValues (props, propName) {
         if (props.isSnapshot || typeof props[propName] === 'function') {
           return null;
         }
@@ -130,7 +132,7 @@ DataCell.propTypes = {
 
 export default DataCell;
 
-function formatMeasurementValue (measurement, styling) {
+function formatMeasurementValue(measurement, styling) {
   if (isNaN(measurement.value)) {
     return styling.symbolForNulls;
   }
@@ -138,7 +140,7 @@ function formatMeasurementValue (measurement, styling) {
   return measurement.displayValue;
 }
 
-function getConditionalColor (measurement, conditionalColoring) {
+function getConditionalColor(measurement, conditionalColoring) {
   if (measurement.value < conditionalColoring.threshold.poor) {
     return conditionalColoring.colors.poor;
   }

src/data-table/index.jsx

@@ -33,35 +33,69 @@ class DataTable extends React.PureComponent {
     };
 
     const renderMeasurementData = (dimIndex, atEvery) => {
-      const injectSeparatorsArray = injectSeparators(
-        matrix[dimIndex],
-        columnSeparatorWidth,
-        atEvery
-      );
-
       if (dimension2.length <= 0) {
-        return injectSeparatorsArray;
+        return injectSeparators(
+          matrix[dimIndex],
+          columnSeparatorWidth,
+          atEvery
+        );
       }
-
+      const measurementDataRow = [];
-      let measurementDataRow = [],
+      let index = 0,
-        index = 0;
+        match;
-      dimension2.forEach((dim2) => {
+      dimension2.forEach(dim2 => {
-        measurements.forEach((measure) => {
+        measurements.forEach((measure, mesInd) => {
-          for (index = 0; index < injectSeparatorsArray.length; index++) {
+          for (index = 0; index < matrix[dimIndex].length; index++) {
-            if (injectSeparatorsArray[index].parents && dimension1[dimIndex].displayValue === injectSeparatorsArray[index].parents.dimension1.header) {
+            match = false;
-              if (dim2.displayValue === injectSeparatorsArray[index].parents.dimension2.header) {
+            if (
-                if (measure.name === injectSeparatorsArray[index].parents.measurement.header) {
+              matrix[dimIndex][index].parents &&
-                  measurementDataRow.push(injectSeparatorsArray[index]);
+              dimension1[dimIndex].displayValue ===
+                matrix[dimIndex][index].parents.dimension1.header
+            ) {
+              if (
+                dim2.displayValue ===
+                matrix[dimIndex][index].parents.dimension2.header
+              ) {
+                if (
+                  measure.name ===
+                  matrix[dimIndex][index].parents.measurement.header
+                ) {
+                  measurementDataRow.push(matrix[dimIndex][index]);
+                  match = true;
                   break;
                 }
               }
             }
           }
+          if (!match) {
+            measurementDataRow.push({
+              displayValue: "",
+              parents: {
+                dimension1: {
+                  elementNumber: dimension1[dimIndex].elementNumber,
+                  header: dimension1[dimIndex].displayValue
+                },
+                dimension2: {
+                  elementNumber: dim2.elementNumber,
+                  header: dim2.displayValue
+                },
+                measurement: {
+                  header: measure.name,
+                  index: mesInd
+                }
+              }
+            });
+          }
         });
       });
-      return measurementDataRow;
+      return injectSeparators(
+        measurementDataRow,
+        columnSeparatorWidth,
+        atEvery
+      );
     };
 
+
     return (
       <div className="row-wrapper">
         <table>
@@ -87,7 +121,7 @@ class DataTable extends React.PureComponent {
               };
 
               return (
-                <tr key={dimensionEntry.displayValue}>
+                <tr key={`${dimensionEntry.displayValue}-${dimensionIndex}-separator`}>
                   {!renderData ?
                     <RowHeader
                       component={component}
@@ -109,15 +143,13 @@ class DataTable extends React.PureComponent {
                     }
 
                     // eslint-disable-next-line no-shadow
-                    const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
-                    const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}-${measurement.index}`;
                     return (
                       <DataCell
                         cellWidth={cellWidth}
                         component={component}
                         data={data}
                         general={general}
-                        key={`${dimensionEntry.displayValue}-${id}`}
+                        key={`${Math.random()}-${new Date().getTime()}`}
                         measurement={measurementData}
                         styleBuilder={styleBuilder}
                         styling={styling}

src/data-table/row-header.jsx

@@ -10,9 +10,10 @@ class RowHeader extends React.PureComponent {
     this.handleSelect = this.handleSelect.bind(this);
   }
 
+  // fixes the console error on row selected values
   handleSelect () {
     const { component, entry } = this.props;
-    component.backendApi.selectValues(0, [entry.elementNumber], false);
+    component.selectValues(0, [entry.elementNumber], false);
   }
 
   render () {
@@ -42,13 +43,9 @@ class RowHeader extends React.PureComponent {
 }
 
 RowHeader.propTypes = {
-  entry: PropTypes.shape({
-    displayValue: PropTypes.string.isRequired,
-    elementNumber: PropTypes.number.isRequired
-  }).isRequired,
   component: PropTypes.shape({
     backendApi: PropTypes.shape({
-      selectValues: function (props, propName) {
+      selectValues (props, propName) {
         if (props.isSnapshot || typeof props[propName] === 'function') {
           return null;
         }
@@ -56,6 +53,10 @@ RowHeader.propTypes = {
       }
     }).isRequired
   }).isRequired,
+  entry: PropTypes.shape({
+    displayValue: PropTypes.string.isRequired,
+    elementNumber: PropTypes.number.isRequired
+  }).isRequired,
   rowStyle: PropTypes.shape({}).isRequired,
   styleBuilder: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({}).isRequired

src/dataset.js

@@ -86,6 +86,6 @@ export function initializeDesignList (component, layout) {
       resolve(data);
     };
     stylingField.OnData.bind(listener);
-    stylingField.getData();
+    stylingField.getData({ rows: 5000 });
   });
 }

src/headers-table/column-header.jsx

@@ -1,20 +1,23 @@
+/* eslint-disable object-shorthand */
+/* eslint-disable space-before-function-paren */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
 import Tooltip from '../tooltip/index.jsx';
 
 class ColumnHeader extends React.PureComponent {
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.handleSelect = this.handleSelect.bind(this);
   }
 
-  handleSelect () {
+  // fixes console error for column selected values
+  handleSelect() {
     const { component, entry } = this.props;
-    component.backendApi.selectValues(1, [entry.elementNumber], false);
+    component.selectValues(1, [entry.elementNumber], false);
   }
 
-  render () {
+  render() {
     const { baseCSS, cellWidth, colSpan, component, entry, styling } = this.props;
     const inEditState = component.inEditState();
     const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;

src/headers-table/index.jsx

@@ -77,7 +77,7 @@ class HeadersTable extends React.PureComponent {
                     colSpan={measurements.length}
                     component={component}
                     entry={entry}
-                    key={entry.displayValue}
+                    key={`${entry.displayValue}-${index}-separator`}
                     styling={styling}
                   />
                 );

src/index.js

@@ -2,7 +2,6 @@ import definition from "./definition";
 import { exportXLS } from "./excel-export";
 import { initializeDataCube, initializeDesignList } from "./dataset";
 import initializeStore from "./store";
-import qlik from "qlik";
 import React from "react";
 import ReactDOM from "react-dom";
 import Root from "./root.jsx";
@@ -13,7 +12,7 @@ if (!window._babelPolyfill) {
   require("@babel/polyfill"); // eslint-disable-line global-require
 }
 
-export default {
+export default ({ flags }) => ({
   design: {
     dimensions: {
       max: 1,
@@ -106,29 +105,36 @@ export default {
     return snapshotLayout;
   },
   async getContextMenu (obj, menu) {
-    const app = qlik.currApp(this);
+    if (!this.$scope.layout.allowexportxls) {
-    const isPersonalResult = await app.global.isPersonalMode();
-    if (
-      !this.$scope.layout.allowexportxls ||
-      (isPersonalResult && isPersonalResult.qReturn)
-    ) {
       return menu;
     }
 
-    menu.addItem({
+    const app = this.backendApi.model.app;
-      translation: 'Export as XLS',
+    const isPersonalResult = await app.global.isPersonalMode();
-      tid: 'export-excel',
+
-      icon: 'export',
+    // Export as XLS option is removed from desktop because the desktop wrapper blocks downloads.
-      select: () => {
+    // Enabled for windows and QCS
-        exportXLS(
+    // isPersonalMode returns true for both desktop and QCS
-          this.$element,
+    // By checking both if has download dialog and if is QCS can enable Export as XLS option on QCS
-          this.$scope.layout.title,
+    if (
-          this.$scope.layout.subtitle,
+      (this.backendApi.model.layout.qMeta.privileges.includes('exportdata') && !isPersonalResult) ||
-          this.$scope.layout.footnote
+      (flags.isEnabled('DOWNLOAD_USE_REPORTING') && isPersonalResult)
-        );
+    ) {
-      }
+      menu.addItem({
-    });
+        translation: 'Export as XLS',
+        tid: 'export-excel',
+        icon: 'export',
+        select: () => {
+          exportXLS(
+            this.$element,
+            this.$scope.layout.title,
+            this.$scope.layout.subtitle,
+            this.$scope.layout.footnote
+          );
+        }
+      });
+    }
     return menu;
   },
   version: 1.0
-};
+});

src/initialize-transformed.js

@@ -1,50 +1,55 @@
-import { distinctArray } from './utilities';
+import { distinctArray } from "./utilities";
 
 export const HEADER_FONT_SIZE = {
   SMALL: -1,
-  MEDIUM: 1
+  MEDIUM: 1,
 };
 
-function getAlignment (option) {
+function getAlignment(option) {
   const alignmentOptions = {
-    1: 'left',
+    1: "left",
-    2: 'center',
+    2: "center",
-    3: 'right'
+    3: "right",
   };
 
-  return alignmentOptions[option] || 'left';
+  return alignmentOptions[option] || "left";
 }
 
-function getFontSizeAdjustment (option) {
+function getFontSizeAdjustment(option) {
   const fontSizeAdjustmentOptions = {
     1: HEADER_FONT_SIZE.SMALL,
-    2: HEADER_FONT_SIZE.MEDIUM
+    2: HEADER_FONT_SIZE.MEDIUM,
   };
 
   return fontSizeAdjustmentOptions[option] || 0;
 }
 
-function generateMeasurements (information) {
+function generateMeasurements(information) {
-  return information.map(measurement => {
+  return information.map((measurement) => {
     const transformedMeasurement = {
-      format: measurement.qNumFormat.qFmt || '#.##0',
+      format: measurement.qNumFormat.qFmt || "#.##0",
-      name: measurement.qFallbackTitle
+      name: measurement.qFallbackTitle,
     };
 
     return transformedMeasurement;
   });
 }
 
-function generateDimensionEntry (information, data) {
+function generateDimensionEntry(information, data) {
   return {
     displayValue: data.qText || data.qNum,
     elementNumber: data.qElemNumber,
     name: information.qFallbackTitle,
-    value: data.qNum
+    value: data.qNum,
   };
 }
 
-function generateMatrixCell ({ cell, dimension1Information, dimension2Information, measurementInformation }) {
+function generateMatrixCell({
+  cell,
+  dimension1Information,
+  dimension2Information,
+  measurementInformation,
+}) {
   const matrixCell = {
     displayValue: cell.qText,
     format: measurementInformation.format,
@@ -52,28 +57,32 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
     parents: {
       dimension1: {
         elementNumber: dimension1Information.qElemNumber,
-        header: dimension1Information.qText
+        header: dimension1Information.qText,
       },
       measurement: {
         header: measurementInformation.name,
-        index: measurementInformation.index
+        index: measurementInformation.index,
-      }
+      },
     },
-    value: cell.qNum
+    value: cell.qNum,
   };
 
   if (dimension2Information) {
     matrixCell.parents.dimension2 = {
       elementNumber: dimension2Information.qElemNumber,
-      header: dimension2Information.qText
+      header: dimension2Information.qText,
     };
   }
 
   return matrixCell;
 }
 
-
+function generateDataSet(
-function generateDataSet (component, dimensionsInformation, measurementsInformation, dataCube) {
+  component,
+  dimensionsInformation,
+  measurementsInformation,
+  dataCube
+) {
   const measurements = generateMeasurements(measurementsInformation);
   let dimension1 = [];
   let dimension2 = [];
@@ -83,13 +92,19 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
   // eslint-disable-next-line no-undefined
   for (let index = 0; dataCube[index] !== undefined; index++) {
     // eslint-disable-next-line no-loop-func
-    dataCube[index].forEach(row => {
+    dataCube[index].forEach((row) => {
-      const dimension1Entry = generateDimensionEntry(dimensionsInformation[0], row[0]);
+      const dimension1Entry = generateDimensionEntry(
+        dimensionsInformation[0],
+        row[0]
+      );
       dimension1.push(dimension1Entry);
       let dimension2Entry;
       let firstDataCell = 1;
       if (hasSecondDimension) {
-        dimension2Entry = generateDimensionEntry(dimensionsInformation[1], row[1]);
+        dimension2Entry = generateDimensionEntry(
+          dimensionsInformation[1],
+          row[1]
+        );
         dimension2.push(dimension2Entry);
         firstDataCell = 2;
       }
@@ -104,16 +119,19 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
             cell,
             dimension1Information,
             dimension2Information,
-            measurementInformation
+            measurementInformation,
           });
           return generatedCell;
         });
 
       let appendToRowIndex = matrix.length;
       if (hasSecondDimension) {
-      // See if there already is a row for the current dim1
+        // See if there already is a row for the current dim1
         for (let i = 0; i < matrix.length; i++) {
-          if (matrix[i][0].parents.dimension1.header === matrixRow[0].parents.dimension1.header) {
+          if (
+            matrix[i][0].parents.dimension1.header ===
+            matrixRow[0].parents.dimension1.header
+          ) {
             appendToRowIndex = i;
             matrixRow = matrix[i].concat(matrixRow);
           }
@@ -127,101 +145,48 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
   dimension1 = distinctArray(dimension1);
   dimension2 = distinctArray(dimension2);
 
-  // Make sure all rows are saturated, otherwise data risks being displayed in the wrong column
-  matrix = matrix.map((row, rowIndex) => {
-    if ((hasSecondDimension && row.length == (dimension2.length * measurements.length))
-      || (!hasSecondDimension && row.length == measurements.length)) {
-      // Row is saturated
-      return row;
-    }
-
-    // Row is not saturated, so must add empty cells to fill the gaps
-    let newRow = [];
-    if (hasSecondDimension) {
-      // Got a second dimension, so need to add measurements for all values of the second dimension
-      let rowDataIndex = 0;
-      dimension2.forEach(dim => {
-        rowDataIndex = appendMissingCells(
-          row, newRow, rowDataIndex, measurements, rowIndex, dim, dimension1);
-      });
-    } else {
-      appendMissingCells(row, newRow, 0, measurements, rowIndex);
-    }
-
-    return newRow;
-  });
-
   return {
     dimension1: dimension1,
     dimension2: dimension2,
     matrix,
-    measurements
+    measurements,
   };
 }
 
-/*
+function initializeTransformed({
- * Appends the cells of the source row, as well as those missing, to the destination row, starting
+  $element,
- * from the given source index. Returns the source index of the next source cell after this has
+  component,
- * completed. If there is a second dimension the dim2ElementNumber should be set to the current
+  dataCube,
- * index of the dimension2 value being processed.
+  designList,
- */
+  layout,
-function appendMissingCells (
+}) {
-  sourceRow, destRow, sourceIndex, measurements, matrixIndex, dim2, dim1) {
-
-  let index = sourceIndex;
-  measurements.forEach((measurement, measureIndex) => {
-    if (index < sourceRow.length) {
-      // Source contains the expected cell
-      destRow.push(sourceRow[index]);
-      index++;
-    } else {
-      // Source doesn't contain the expected cell, so add empty
-      destRow.push({
-        displayValue: '',
-        parents: {
-          dimension1: {
-            elementNumber: dim1[matrixIndex].elementNumber,
-            header: dim1[matrixIndex].displayValue
-          },
-          dimension2: {
-            elementNumber: dim2.elementNumber,
-            header: dim2.displayValue
-          },
-          measurement: {
-            header: measurement.name,
-            index: measureIndex
-          }
-        }
-      });
-    }
-  });
-  return index;
-}
-
-function initializeTransformed ({ component, dataCube, designList, layout }) {
   const dimensionsInformation = component.backendApi.getDimensionInfos();
   const measurementsInformation = component.backendApi.getMeasureInfos();
   const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
-  const {
+  const { dimension1, dimension2, measurements, matrix } = generateDataSet(
-    dimension1,
+    component,
-    dimension2,
+    dimensionsInformation,
-    measurements,
+    measurementsInformation,
-    matrix
+    dataCube
-  } = generateDataSet(component, dimensionsInformation, measurementsInformation, dataCube);
+  );
 
   const customSchemaBasic = [];
   const customSchemaFull = [];
   let customHeadersCount = 0;
 
   if (designList && designList.length > 0) {
-    const headers = designList[0].split(';');
+    const headers = designList[0].split(";");
     customHeadersCount = headers.length;
     for (let lineNumber = 0; lineNumber < designList.length; lineNumber += 1) {
       customSchemaFull[lineNumber] = new Array(headers.length);
-      const data = designList[lineNumber].split(';');
+      const data = designList[lineNumber].split(";");
 
       if (data.length === headers.length) {
-        for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
+        for (
+          let headerIndex = 0;
+          headerIndex < headers.length;
+          headerIndex += 1
+        ) {
           [customSchemaBasic[lineNumber]] = data;
           customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
         }
@@ -235,25 +200,28 @@ function initializeTransformed ({ component, dataCube, designList, layout }) {
     // the widths as percentages of the available width. However, this often results in random
     // columns getting 1px wider than the others because of rounding necessary to fill the width.
     // This 1px causes missalignment between the data- and header tables.
-    cellWidth = '';
+    cellWidth = "";
   } else {
     // If using the previous solution just set 60px
-    cellWidth = `${layout.columnwidthslider > 10 ? layout.columnwidthslider : 60}px`;
+    cellWidth = `${
+      layout.columnwidthslider > 10 ? layout.columnwidthslider : 60
+    }px`;
   }
 
   // top level properties could be reducers and then components connect to grab what they want,
   // possibly with reselect for some presentational transforms (moving some of the presentational logic like formatting and such)
   const transformedProperties = {
+    element: $element[0],
     data: {
       headers: {
         dimension1, // column headers
         dimension2, // parent row headers if exists
-        measurements // row headers, looped for each dimension2 if exists
+        measurements, // row headers, looped for each dimension2 if exists
       },
       matrix, // 2d array of all rows/cells to render in body of datatable
       meta: {
-        dimensionCount: dimensionsInformation.length
+        dimensionCount: dimensionsInformation.length,
-      }
+      },
     },
     general: {
       allowExcelExport: layout.allowexportxls,
@@ -263,23 +231,25 @@ function initializeTransformed ({ component, dataCube, designList, layout }) {
       footnote: layout.footnote,
       subtitle: layout.subtitle,
       title: layout.title,
-      useColumnSeparator: layout.separatorcols && dimensionCount > 1
+      useColumnSeparator: layout.separatorcols && dimensionCount > 1,
     },
     selection: {
-      dimensionSelectionCounts: dimensionsInformation.map(dimensionInfo => dimensionInfo.qStateCounts.qSelected)
+      dimensionSelectionCounts: dimensionsInformation.map(
+        (dimensionInfo) => dimensionInfo.qStateCounts.qSelected
+      ),
     },
     styling: {
       customCSV: {
         basic: customSchemaBasic,
         count: customHeadersCount,
-        full: customSchemaFull
+        full: customSchemaFull,
       },
       hasCustomFileStyle: Boolean(designList),
       headerOptions: {
         alignment: getAlignment(layout.HeaderAlign),
         colorSchema: layout.HeaderColorSchema.color,
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersizeheader),
-        textColor: layout.HeaderTextColorSchema.color
+        textColor: layout.HeaderTextColorSchema.color,
       },
       options: {
         backgroundColor: layout.rowEvenBGColor,
@@ -287,38 +257,42 @@ function initializeTransformed ({ component, dataCube, designList, layout }) {
         color: layout.BodyTextColorSchema,
         fontFamily: layout.FontFamily,
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
-        textAlignment: layout.cellTextAlignment
+        textAlignment: layout.cellTextAlignment,
       },
       conditionalColoring: {
         enabled: layout.conditionalcoloring.enabled,
         colorAllRows: layout.conditionalcoloring.colorall,
-        rows: layout.conditionalcoloring.rows.map(row => row.rowname),
+        rows: layout.conditionalcoloring.rows.map((row) => row.rowname),
-        colorAllMeasures: typeof layout.conditionalcoloring.colorallmeasures === 'undefined'
+        colorAllMeasures:
-          || layout.conditionalcoloring.colorallmeasures,
+          typeof layout.conditionalcoloring.colorallmeasures === "undefined" ||
+          layout.conditionalcoloring.colorallmeasures,
         measures: !layout.conditionalcoloring.measures
-          ? [] : layout.conditionalcoloring.measures.split(',').map(index => Number(index)),
+          ? []
+          : layout.conditionalcoloring.measures
+              .split(",")
+              .map((index) => Number(index)),
         threshold: {
           poor: layout.conditionalcoloring.threshold_poor,
-          fair: layout.conditionalcoloring.threshold_fair
+          fair: layout.conditionalcoloring.threshold_fair,
         },
         colors: {
           poor: {
             color: layout.conditionalcoloring.color_poor,
-            textColor: layout.conditionalcoloring.textcolor_poor
+            textColor: layout.conditionalcoloring.textcolor_poor,
           },
           fair: {
             color: layout.conditionalcoloring.color_fair,
-            textColor: layout.conditionalcoloring.textcolor_fair
+            textColor: layout.conditionalcoloring.textcolor_fair,
           },
           good: {
             color: layout.conditionalcoloring.color_good,
-            textColor: layout.conditionalcoloring.textcolor_good
+            textColor: layout.conditionalcoloring.textcolor_good,
-          }
+          },
-        }
+        },
       },
       symbolForNulls: layout.symbolfornulls,
-      usePadding: layout.indentbool
+      usePadding: layout.indentbool,
-    }
+    },
   };
 
   return transformedProperties;

src/root.jsx

@@ -5,37 +5,15 @@ import DataTable from "./data-table/index.jsx";
 import { LinkedScrollWrapper, LinkedScrollSection } from "./linked-scroll";
 
 class Root extends React.PureComponent {
-  constructor (props) {
-    super(props);
-    this.onDataTableRefSet = this.onDataTableRefSet.bind(this);
-    this.renderedTableWidth = 0;
-  }
-
-  componentDidUpdate () {
-    let tableWidth;
-    if (this.dataTableRef) {
-      tableWidth = this.dataTableRef.getBoundingClientRect().width;
-      if (this.renderedTableWidth !== tableWidth) {
-        this.forceUpdate();
-      }
-    }
-  }
-
-  onDataTableRefSet (element) {
-    this.dataTableRef = element;
-    this.forceUpdate();
-  }
-
   render () {
     const { editmodeClass, component, state } = this.props;
-    const { data, general, styling, error } = state;
+    const { data, general, styling, error, element } = state;
 
     // Determine cell- and column separator width
     let cellWidth = '0px';
     let columnSeparatorWidth = '';
-    if (this.dataTableRef) {
+    if (!error && element) {
-      const tableWidth = this.dataTableRef.getBoundingClientRect().width;
+      const tableWidth = element.getBoundingClientRect().width;
-      this.renderedTableWidth = tableWidth;
 
       if (general.cellWidth) {
         cellWidth = general.cellWidth;
@@ -43,7 +21,8 @@ class Root extends React.PureComponent {
           columnSeparatorWidth = '8px';
         }
       } else {
-        const headerMarginRight = 8;
+        // 230 is the left "header", rest is magic margins
+        const headerMarginRight = 8 + 230 + 20;
         const borderWidth = 1;
         const rowCellCount = data.matrix[0].length;
 
@@ -99,7 +78,6 @@ class Root extends React.PureComponent {
             <div
               className={`data-table ${editmodeClass}`}
               style={{ width: general.cellWidth ? 'auto' : '100%' }}
-              ref={this.onDataTableRefSet}
             >
               <LinkedScrollSection linkHorizontal>
                 <HeadersTable

webpack.config.js

@@ -3,12 +3,15 @@ const packageJSON = require('./package.json');
 const path = require('path');
 
 const DIST = path.resolve("./dist");
+// eslint-disable-next-line no-process-env
 const MODE = process.env.NODE_ENV || 'development';
+const SOURCE_MAP = 'source-map';
+const DEVTOOL = MODE === 'development' ? SOURCE_MAP : false;
 
 console.log('Webpack mode:', MODE); // eslint-disable-line no-console
 
 const config = {
-  devtool: 'source-map',
+  devtool: DEVTOOL,
   entry: ['./src/index.js'],
   externals: {
     jquery: {