Suppress missing values and use correct cube size

Issue: DEB-244

src/data-table/data-cell.jsx

@@ -1,3 +1,4 @@
+import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../tooltip/index.jsx';
@@ -11,8 +12,10 @@ class DataCell extends React.PureComponent {
   handleSelect () {
     const {
       data: {
+        headers,
         meta: {
-          dimensionCount
+          dimensionCount,
+          altState
         }
       },
       general: {
@@ -27,9 +30,13 @@ class DataCell extends React.PureComponent {
       return;
     }
 
-    component.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], false);
+    const app = qlik.currApp(component);
+    app.field(headers.dimension1[0].name, altState)
+      .select([measurement.parents.dimension1.elementNumber], false, false);
+
     if (hasSecondDimension) {
-      component.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], false);
+      app.field(headers.dimension2[0].name, altState)
+        .select([measurement.parents.dimension2.elementNumber], false, false);
     }
   }
 
@@ -98,9 +105,11 @@ DataCell.propTypes = {
   cellWidth: PropTypes.string.isRequired,
   data: PropTypes.shape({
     headers: PropTypes.shape({
+      dimension1: PropTypes.array.isRequired,
       measurements: PropTypes.array.isRequired
     }).isRequired,
     meta: PropTypes.shape({
+      altState: PropTypes.string.isRequired,
       dimensionCount: PropTypes.number.isRequired
     }).isRequired
   }).isRequired,
@@ -110,16 +119,7 @@ DataCell.propTypes = {
     name: PropTypes.string,
     value: PropTypes.any
   }).isRequired,
-  component: PropTypes.shape({
-    backendApi: PropTypes.shape({
-      selectValues: function (props, propName) {
-        if (props.isSnapshot || typeof props[propName] === 'function') {
-          return null;
-        }
-        return new Error('Missing implementation of qlik.backendApi.selectValues.');
-      }
-    }).isRequired
-  }).isRequired,
+  component: PropTypes.shape({}).isRequired,
   styleBuilder: PropTypes.shape({
     hasComments: PropTypes.func.isRequired
   }).isRequired,

src/data-table/index.jsx

@@ -58,6 +58,7 @@ class DataTable extends React.PureComponent {
                 <tr key={dimensionEntry.displayValue}>
                   {!renderData ?
                     <RowHeader
+                      altState={data.meta.altState}
                       component={component}
                       entry={dimensionEntry}
                       rowStyle={rowStyle}

src/data-table/row-header.jsx

@@ -1,3 +1,4 @@
+import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import HeaderPadding from './header-padding.jsx';
@@ -11,8 +12,9 @@ class RowHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { component, entry } = this.props;
-    component.backendApi.selectValues(0, [entry.elementNumber], false);
+    const { entry, altState, component } = this.props;
+    const app = qlik.currApp(component);
+    app.field(entry.name, altState).select([entry.elementNumber], false, false);
   }
 
   render () {
@@ -44,18 +46,11 @@ 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) {
-        if (props.isSnapshot || typeof props[propName] === 'function') {
-          return null;
-        }
-        return new Error('Missing implementation of qlik.backendApi.selectValues.');
-      }
-    }).isRequired
+    elementNumber: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired
   }).isRequired,
+  altState: PropTypes.string.isRequired,
+  component: PropTypes.shape({}).isRequired,
   rowStyle: PropTypes.shape({}).isRequired,
   styleBuilder: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({}).isRequired

src/dataset.js

@@ -6,19 +6,19 @@ function createCube (definition, app) {
   });
 }
 
-async function buildDataCube (originCubeDefinition, hasTwoDimensions, app) {
+async function buildDataCube (originCubeDefinition, originCube, app) {
   const cubeDefinition = {
     ...originCubeDefinition,
     qInitialDataFetch: [
       {
-        qHeight: 1000,
-        qWidth: 10
+        qHeight: originCube.qSize.qcy,
+        qWidth: originCube.qSize.qcx
       }
     ],
     qDimensions: [originCubeDefinition.qDimensions[0]],
     qMeasures: originCubeDefinition.qMeasures
   };
-  if (hasTwoDimensions) {
+  if (originCube.qDimensionInfo.length === 2) {
     cubeDefinition.qDimensions.push(originCubeDefinition.qDimensions[1]);
   }
   const cube = await createCube(cubeDefinition, app);
@@ -36,13 +36,12 @@ export async function initializeDataCube (component, layout) {
   const properties = (await component.backendApi.getProperties());
 
   // If this is a master object, fetch the hyperCubeDef of the original object
-  let hyperCubeDef = properties.qExtendsId
+  const hyperCubeDef = properties.qExtendsId
     ? (await app.getObjectProperties(properties.qExtendsId)).properties.qHyperCubeDef
     : properties.qHyperCubeDef;
-  hyperCubeDef = JSON.parse(JSON.stringify(hyperCubeDef));
-  hyperCubeDef.qStateName = layout.qStateName;
+  hyperCubeDef.qStateName = layout.qStateName || "";
 
-  return buildDataCube(hyperCubeDef, layout.qHyperCube.qDimensionInfo.length === 2, app);
+  return buildDataCube(hyperCubeDef, layout.qHyperCube, app);
 }
 
 export function initializeDesignList (component, layout) {

src/headers-table/column-header.jsx

@@ -1,3 +1,4 @@
+import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
@@ -10,8 +11,9 @@ class ColumnHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { component, entry } = this.props;
-    component.backendApi.selectValues(1, [entry.elementNumber], false);
+    const { entry, altState, component } = this.props;
+    const app = qlik.currApp(component);
+    app.field(entry.name, altState).select([entry.elementNumber], false, false);
   }
 
   render () {
@@ -55,20 +57,13 @@ ColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
   cellWidth: PropTypes.string.isRequired,
   colSpan: PropTypes.number,
-  component: PropTypes.shape({
-    backendApi: PropTypes.shape({
-      selectValues: function (props, propName) {
-        if (props.isSnapshot || typeof props[propName] === 'function') {
-          return null;
-        }
-        return new Error('Missing implementation of qlik.backendApi.selectValues.');
-      }
-    }).isRequired
-  }).isRequired,
   entry: PropTypes.shape({
     displayValue: PropTypes.string.isRequired,
-    elementNumber: PropTypes.number.isRequired
+    elementNumber: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired
   }).isRequired,
+  altState: PropTypes.string.isRequired,
+  component: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({
       fontSizeAdjustment: PropTypes.number.isRequired

src/headers-table/index.jsx

@@ -75,6 +75,7 @@ class HeadersTable extends React.PureComponent {
                 }
                 return (
                   <ColumnHeader
+                    altState={data.meta.altState}
                     baseCSS={baseCSS}
                     cellWidth={cellWidth}
                     colSpan={measurements.length}
@@ -127,6 +128,9 @@ HeadersTable.propTypes = {
       dimension1: PropTypes.array,
       dimension2: PropTypes.array,
       measurements: PropTypes.array
+    }),
+    meta: PropTypes.shape({
+      altState: PropTypes.string.isRequired
     })
   }).isRequired,
   general: PropTypes.shape({}).isRequired,

src/index.js

@@ -49,7 +49,9 @@ export default {
           qWidth: 10
         }
       ],
-      qMeasures: []
+      qMeasures: [],
+      qSuppressMissing: true,
+      qSuppressZero: false
     }
   },
   support: {

src/initialize-transformed.js

@@ -250,7 +250,8 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
       },
       matrix, // 2d array of all rows/cells to render in body of datatable
       meta: {
-        dimensionCount: dimensionsInformation.length
+        dimensionCount: dimensionsInformation.length,
+        altState: layout.qStateName || ""
       }
     },
     general: {