@@ -48,7 +47,7 @@ export default function Field({
{field}
-
+
{' '}
{fieldCounts(layout.qListObject.qDimensionInfo, fieldData)}
diff --git a/src/components/filterbox.jsx b/src/components/filterbox.jsx
index b177ba43..ac60f261 100644
--- a/src/components/filterbox.jsx
+++ b/src/components/filterbox.jsx
@@ -1,7 +1,7 @@
import ReactDOM from 'react-dom';
import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
-import Column from 'react-virtualized/dist/es/Table/Column';
+import { Column } from 'react-virtualized';
import useClickOutside from './use/click-outside';
import VirtualTable from './virtual-table';
@@ -82,6 +82,14 @@ function rowRenderer({
);
}
+rowRenderer.propTypes = {
+ defaultProps: PropTypes.object.isRequired,
+ rowData: PropTypes.object.isRequired,
+ style: PropTypes.object.isRequired,
+ columns: PropTypes.object.isRequired,
+ className: PropTypes.string.isRequired,
+ key: PropTypes.string.isRequired,
+};
function noRowsRenderer() {
return
No values
;
diff --git a/src/components/hypercube-table.jsx b/src/components/hypercube-table.jsx
index 270b8f41..40055dfd 100644
--- a/src/components/hypercube-table.jsx
+++ b/src/components/hypercube-table.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import Column from 'react-virtualized/dist/es/Table/Column';
+import { Column } from 'react-virtualized';
import VirtualTable from './virtual-table';
@@ -56,6 +56,14 @@ function rowRenderer({
);
}
+rowRenderer.propTypes = {
+ defaultProps: PropTypes.object.isRequired,
+ rowData: PropTypes.object.isRequired,
+ style: PropTypes.object.isRequired,
+ columns: PropTypes.object.isRequired,
+ className: PropTypes.string.isRequired,
+ key: PropTypes.string.isRequired,
+};
function headerRowRenderer({
className, columns, style,
diff --git a/src/components/model.jsx b/src/components/model.jsx
index 01ecd6f7..5c7ea165 100644
--- a/src/components/model.jsx
+++ b/src/components/model.jsx
@@ -1,13 +1,17 @@
import React, { useState, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import usePromise from 'react-use-promise';
-
+import ReactFloater from 'react-floater';
import ScrollArea from './scroll-area';
import TableField from './table-field';
import logic from '../logic/logic';
import atplay from '../logic/atplay';
+import { getExtraInfoForField, getAssosicationTooltip, getTableTooltip } from './tooltip';
+
import './model.pcss';
+import './tooltip.pcss';
+
function findAttribute(event, attrName) {
let el = event.target;
@@ -29,6 +33,14 @@ export default function Model({ app, appLayout }) {
const [openBoxes, setOpenBoxes] = useState({});
const [queryModel, setQueryModel] = useState(null);
const [atPlayModel, setAtPlayModel] = useState(null);
+ const [currentDetailsView, setCurrentDetailsView] = useState(null); // The currently open extra info dialog
+
+ let boxIdCounter = 0;
+
+ function getExtraInfoForTableField(tableName, fieldName) {
+ const field = queryModel.getTableField(tableName, fieldName);
+ return getExtraInfoForField(field);
+ }
useEffect(() => {
if (!tablesAndKeys) return;
@@ -40,13 +52,40 @@ export default function Model({ app, appLayout }) {
setAtPlayModel(newAtPlayModel);
}, [tablesAndKeys]);
- const toggleField = (evt) => {
+
+ function showFieldDetails(table, field, boxId) {
+ setCurrentDetailsView({ boxId, content: getExtraInfoForTableField(table, field) });
+ }
+ const onClick = (evt) => {
if (evt.ctrlKey || evt.metaKey) {
return;
}
+
+ // The following attribute is set if the extra-info icon is clicked
+ const extraInfoIcon = findAttribute(evt, 'data-extra-info-icon');
+
+ // The following attribute indicates what div to align the extra info popup with
+ const boxId = findAttribute(evt, 'data-boxid');
+
+ // The following attribute is set if the table header is clicked
+ const dataTableHeader = findAttribute(evt, 'data-tableheader');
+
+ // The field the click is on
const field = findAttribute(evt, 'fieldz');
+
+ // The table the click is on
const table = findAttribute(evt, 'tablez');
- if (field) {
+
+ // Depending on where the click was do different things:
+ if (extraInfoIcon) {
+ // Show field details
+ showFieldDetails(table, field, boxId);
+ } else if (dataTableHeader) {
+ // Re-sort the main data model based on the clicked table
+ const newQueryModel = new logic.QueryModel(tablesAndKeys, table);
+ setQueryModel(newQueryModel);
+ } else if (field) {
+ // Open or close a field
if (openBoxes[field]) {
delete openBoxes[field];
} else {
@@ -54,9 +93,6 @@ export default function Model({ app, appLayout }) {
}
const newAtPlayModel = new atplay.AtPlayModel(queryModel, openBoxes);
setAtPlayModel(newAtPlayModel);
- } else if (table) {
- const newQueryModel = new logic.QueryModel(tablesAndKeys, table);
- setQueryModel(newQueryModel);
}
};
@@ -72,6 +108,13 @@ export default function Model({ app, appLayout }) {
);
}
+ const extraInfoContainer = currentDetailsView ? (
+
+ { if (event === 'close') { setCurrentDetailsView(null); } }} />
+
+ ) : null;
+
+ let odd = false;
const assocationsHighlighted = Object.keys(openBoxes).length > 1;
const gridz = queryModel.resultTableList.map((tableName) => {
let columnClasses = 'column';
@@ -80,10 +123,14 @@ export default function Model({ app, appLayout }) {
} else if (assocationsHighlighted) {
columnClasses += ' notTableAtPlay';
}
+ if (odd) {
+ columnClasses += ' odd';
+ }
+ odd = !odd;
return (
-
-
+
+
{tableName}
{queryModel.tables[tableName].qNoOfRows}
@@ -95,6 +142,7 @@ export default function Model({ app, appLayout }) {
cellContainerStyle.height = '24em';
}
+
const x = queryModel.grid[fieldName][tableName];
if (x && !x.isEmpty) {
let classes = 'vertcell keycell';
@@ -137,21 +185,24 @@ export default function Model({ app, appLayout }) {
};
}
-
+ boxIdCounter += 1;
+ const currentboxid = boxIdCounter;
return (
-
+
+
{x.subsetRatioText ? (
{x.subsetRatioText}
) : null}
{x.hasAssociationToLeft ? (
-
+
@@ -159,7 +210,7 @@ export default function Model({ app, appLayout }) {
) : null}
{x.hasAssociationToRight ? (
-
+
@@ -190,7 +241,7 @@ export default function Model({ app, appLayout }) {
return null;
}
return (
-
+
- {queryModel.tables[tableName].qFields.map((field) => {
- const isFilterboxOpen = openBoxes[field.qName];
- if (field.qKeyType === 'NOT_KEY') {
+ {queryModel.tables[tableName].qFields.map((fieldData) => {
+ const isFilterboxOpen = openBoxes[fieldData.qName];
+ if (fieldData.qKeyType === 'NOT_KEY') {
let classes = 'vertcell';
- if (atPlayModel.keysAtPlay[field.qName]) {
+ if (atPlayModel.keysAtPlay[fieldData.qName]) {
classes += ' keyAtPlay';
} else if (assocationsHighlighted) {
classes += ' notKeyAtPlay';
@@ -217,14 +268,17 @@ export default function Model({ app, appLayout }) {
cellContainerStyle.height = '30em';
}
+ boxIdCounter += 1;
+ const currentboxid = boxIdCounter;
return (
);
}
@@ -236,18 +290,21 @@ export default function Model({ app, appLayout }) {
});
return (
-
-
-
-
+
+ {extraInfoContainer}
+
);
}
diff --git a/src/components/model.pcss b/src/components/model.pcss
index 3557ba2c..6f6f1807 100644
--- a/src/components/model.pcss
+++ b/src/components/model.pcss
@@ -2,6 +2,7 @@
--table-background: #f2f2f2;
--grid-background: #f2f2f2;
--even-column-background: #f6f6f6;
+ --odd-column-background: #e8e8e8;
--association-border: #999;
background-color: var(--grid-background);
@@ -60,7 +61,6 @@
right: -1em;
top: 2.5em;
width: 1em;
- z-index: 0;
}
.association-to-right-a {
@@ -91,7 +91,6 @@
left: 0.5em;
position: absolute;
top: -1em;
- z-index: 0;
}
.subsetratio {
@@ -119,7 +118,6 @@
position: absolute;
top: 2.5em;
width: 1em;
- z-index: 0;
}
.association-to-left-a {
@@ -151,7 +149,6 @@
position: absolute;
right: 0.5em;
top: -1em;
- z-index: 0;
}
.association-to-left:nth-child(0) {
@@ -164,7 +161,6 @@
position: absolute;
right: -3.5em;
top: 3.5em;
- z-index: 3;
}
.betweener.insideTable {
@@ -189,6 +185,12 @@
padding: 3.5em;
}
+ .column.odd {
+ background: linear-gradient(to bottom, var(--odd-column-background) 0%, var(--table-background) 100%);
+ background-repeat: no-repeat;
+ background-size: auto 30rem;
+ }
+
&:nth-child(even) {
background-color: var(--even-column-background);
diff --git a/src/components/scroll-area.jsx b/src/components/scroll-area.jsx
index 9bddb142..fa82b0a2 100644
--- a/src/components/scroll-area.jsx
+++ b/src/components/scroll-area.jsx
@@ -59,4 +59,6 @@ export default function ScrollArea({
ScrollArea.propTypes = {
width: PropTypes.string.isRequired,
height: PropTypes.string.isRequired,
+ className: PropTypes.string.isRequired,
+ children: PropTypes.object.isRequired,
};
diff --git a/src/components/splash.pcss b/src/components/splash.pcss
index 7711d595..385f2c95 100644
--- a/src/components/splash.pcss
+++ b/src/components/splash.pcss
@@ -39,7 +39,7 @@
}
.icon {
- background-image: url("data:image/svg+xml;utf8,
QVF ");
+ background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2057.53%2057.53%27%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%23fff%3Bstroke-miterlimit%3A10%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2728.76%27%20cy%3D%2728.76%27%20r%3D%2728.76%27%20fill%3D%27%23009845%27%2F%3E%3Cpath%20class%3D%27b%27%20d%3D%27M35.08%2011.74c.08%201.48.1%203%20.26%204.44a1.75%201.75%200%200%200%201.9%201.56c1.44.06%202.88.09%204.32.13%27%2F%3E%3Cpath%20class%3D%27b%27%20d%3D%27M15.14%2040.78v2.64a3.13%203.13%200%200%200%203.48%203.48h22.32a3.06%203.06%200%200%200%203.36-3.36V17.86a3.88%203.88%200%200%200-1.21-2.88L37.81%209.7a3.81%203.81%200%200%200-2.88-1.09H18.49a3.18%203.18%200%200%200-3.36%203.36v13.44%27%2F%3E%3Ctext%20transform%3D%27translate%2811.21%2037.06%29%27%20font-size%3D%2714%27%20fill%3D%27%23fff%27%20font-family%3D%27Source%20Sans%20Pro%27%20font-weight%3D%27700%27%3EQ%3Ctspan%20x%3D%279.25%27%20y%3D%270%27%3EVF%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
diff --git a/src/components/table-field.jsx b/src/components/table-field.jsx
index f1bb8dee..467adf5c 100644
--- a/src/components/table-field.jsx
+++ b/src/components/table-field.jsx
@@ -1,35 +1,22 @@
import React from 'react';
import PropTypes from 'prop-types';
+import SVGInline from 'react-svg-inline';
+import moreHorizontalOutline from '../assets/more-horizontal-outline.svg';
import Field from './field';
import Filterbox from './filterbox';
import useModel from './use/model';
import useLayout from './use/layout';
+import { getTooltipForField, getTooltipForSyntheticField } from './tooltip';
import './table-field.pcss';
-
-function firstFewValues(layout) {
- const rowToText = row => `${row[0].qText || '
'}`;
-
- const selected = layout.qListObject.qDataPages[0].qMatrix.filter(row => row[0].qState === 'S' || row[0].qState === 'O');
- const excluded = layout.qListObject.qDataPages[0].qMatrix.filter(row => row[0].qState === 'X');
-
- let result = '';
- if (selected.length > 0) {
- result += `Example values:\n${selected.map(rowToText).join(', ')}\n`;
- }
- if (excluded.length > 0) {
- result += `\nExample of excluded values:\n${excluded.map(rowToText).join(', ')}`;
- }
-
- return result;
-}
+import './tooltip.pcss';
function TableFieldWithoutState({
model, layout, field, fieldData, showFilterbox,
}) {
let classes = `table-field ${fieldData.qKeyType}`;
- if (!layout) {
+ if (!layout || !layout.qListObject || !layout.qListObject.qDataPages || !layout.qListObject.qDataPages[0]) {
return (
{field}
@@ -97,18 +76,20 @@ function TableFieldWithoutState({
border: `2px solid ${fieldData.backgroundColor}`,
};
- const filterBox = showFilterbox ?
: null;
+ const filterBox = showFilterbox ?
: null;
return (
+
{ filterBox }
@@ -163,7 +144,8 @@ export default function TableField({
}) {
const model = useModel(app, createDefinition(field));
const layout = useLayout(model);
-
+ const fieldDataToModify = fieldData;
+ fieldDataToModify.layout = layout;
return TableFieldWithoutState({
model, layout, field, fieldData, showFilterbox,
});
diff --git a/src/components/table-field.pcss b/src/components/table-field.pcss
index 798fffce..7a0b738d 100644
--- a/src/components/table-field.pcss
+++ b/src/components/table-field.pcss
@@ -11,7 +11,6 @@
min-width: 22em;
padding: 1em;
position: relative;
- z-index: 1;
&:hover {
box-shadow: 0 0 2em -0.5em #999;
@@ -41,6 +40,15 @@
}
}
+ .extra-information {
+ border: 1px saddlebrown;
+ height: 1.5rem;
+ position: absolute;
+ right: 0.5rem;
+ top: 0.5rem;
+ width: 1.5rem;
+ }
+
.details {
box-sizing: border-box;
display: flex;
diff --git a/src/components/tooltip.jsx b/src/components/tooltip.jsx
new file mode 100644
index 00000000..f990108f
--- /dev/null
+++ b/src/components/tooltip.jsx
@@ -0,0 +1,235 @@
+import React from 'react';
+/* eslint-disable react/jsx-one-expression-per-line */
+
+export function getTooltipForSubsetRatio(field) {
+ if (!!field.qnPresentDistinctValues && !!field.qnTotalDistinctValues && field.qnPresentDistinctValues < field.qnTotalDistinctValues) {
+ return (
+
+
+ {`${field.subsetRatioText} subset ratio`}
+
+
+ {field.qnPresentDistinctValues}
+ {' out of '}
+ {field.qnTotalDistinctValues}
+ {' '}
+ {field.qName}
+ {' values are present in the '}
+ {field.srcTable.qName}
+ {' table. '}
+
+
+ {'The remaining '}
+ {field.qnTotalDistinctValues - field.qnPresentDistinctValues}
+ {' values only exist in other tables ('}
+ {field.otherTables.join('')}
+ {').'}
+
+
+ {'This means that there are '}
+ rows in associated tables that do not have any matching rows in this table.
+
+
Note that when interacting with a field - all values are shown - not only the ones that are present in the underlying table.
+
+ );
+ }
+ return
;
+}
+
+export function getExtraInfoForField(fieldData) {
+ const { layout } = fieldData;
+ if (!layout) {
+ return null;
+ }
+
+ const nullCount = fieldData.qnRows - fieldData.qnNonNulls;
+ const rowWithValueCount = fieldData.qnNonNulls;
+ const uniqueValueCount = fieldData.qnPresentDistinctValues;
+ const allNonNullValuesAreUnique = (fieldData.qnPresentDistinctValues === fieldData.qnNonNulls);
+ const avgDup = rowWithValueCount > uniqueValueCount ? `~ ${(rowWithValueCount / uniqueValueCount).toFixed(3)}` : '1';
+
+ function keyDescription() {
+ switch (fieldData.qKeyType) {
+ case 'PERFECT_KEY':
+ return (
+
+ Perfect key
+ Each row in the {fieldData.srcTable.qName} table is uniquely identified by its {fieldData.qName} value.
+ All {fieldData.qName} values in the entire data model are present in the {fieldData.srcTable.qName} table.
+
+ );
+ case 'PRIMARY_KEY':
+ return (
+
+ Primary key
+ Each row in the {fieldData.srcTable.qName} table is uniquely identified by its {fieldData.qName} value.
+
+ );
+ case 'ANY_KEY':
+ if (allNonNullValuesAreUnique) {
+ return (
+
+ Foreign key - Contains null rows
+ All present values are unique but there are {nullCount} rows with nulls.
+ A single {fieldData.qName} value identifies at most one row in the {fieldData.srcTable.qName} table.
+
+ );
+ }
+ if (fieldData.qHasNull) {
+ return (
+
+ Foreign Key - Many rows per value + null rows
+ Values are repeated on several rows plus there are {nullCount} rows with nulls.
+ A single {fieldData.qName} value may identify several rows in the {fieldData.srcTable.qName} table.
+
+ );
+ }
+ return (
+
+ Foreign key - Many rows per value
+ Values are repeated on several rows. All rows have values.
+ A single {fieldData.qName} value may identify several rows in the {fieldData.srcTable.qName} table.
+ {/* Average row count per value is {avgDup} times. No nulls. */}
+
+ );
+ default:
+ return null;
+ }
+ }
+
+ return (
+
+
+
Field {fieldData.qName}
+
+
+
+ Total Rows
+ {fieldData.qnRows}
+
+
+ Rows with value
+ {fieldData.qnNonNulls}
+
+
+ Rows with null
+ {nullCount}
+
+ {(fieldData.qnTotalDistinctValues > fieldData.qnPresentDistinctValues)
+ ? (
+
+
+ Unique values (in this table)
+ {fieldData.qnPresentDistinctValues}
+
+
+ Unique values (in all tables)
+ {fieldData.qnTotalDistinctValues}
+
+
+ )
+ : (
+
+ Unique values
+ {fieldData.qnPresentDistinctValues}
+
+ )
+ }
+
+ Rows per unique value
+ {avgDup}
+
+
+
+ {keyDescription()}
+ {getTooltipForSubsetRatio(fieldData)}
+
+
+
+ );
+}
+
+
+function reduceWithAnd(items, maxItems) {
+ let result = '';
+ if (items.length > maxItems) {
+ for (let i = 0; i < maxItems; i += 1) {
+ result += `${items[i]}, `;
+ }
+ result += '...';
+ } else {
+ for (let i = 0; i < items.length - 1; i += 1) {
+ result += `${items[i]}, `;
+ }
+ result = `${result} and ${items[items.length - 1]}`;
+ }
+ return result;
+}
+
+export function getTooltipForSyntheticField(fieldData) {
+ if (fieldData.qOriginalFields.length > 0) {
+ return `Synthetic field\n\nReplaces the fields ${reduceWithAnd(fieldData.qOriginalFields)} with one association field since tables cannot be associated with multiple fields. The original fields have been moved to a synthetic link table.`;
+ }
+ if (fieldData.srcTable.qIsSynthetic) {
+ return 'Synthetic field\n\nLinks the generated association field to the original field values that have been moved into this synthetic link table';
+ }
+ return 'Synthetic field';
+}
+
+
+function firstFewValues(layout) {
+ const rowToText = row => `${row[0].qText || '
'}`;
+
+ const selected = layout.qListObject.qDataPages[0].qMatrix.filter(row => row[0].qState === 'S' || row[0].qState === 'O');
+ const excluded = layout.qListObject.qDataPages[0].qMatrix.filter(row => row[0].qState === 'X');
+
+ let result = '';
+ if (selected.length > 0) {
+ result += `Example values:\n${selected.map(rowToText).join(', ')}\n`;
+ }
+ if (excluded.length > 0) {
+ result += `\nExample of excluded values:\n${excluded.map(rowToText).join(', ')}`;
+ }
+
+ return result;
+}
+
+export function getTooltipForField(fieldData, layout) {
+ let descriptions = '';
+
+ if (fieldData.qHasDuplicates) {
+ descriptions += 'Duplicate values';
+ } else {
+ descriptions += 'Unique values';
+ }
+
+ if (fieldData.qHasNull) {
+ descriptions += ', has nulls';
+ } else {
+ descriptions += ', no nulls.';
+ }
+ return `Field ${fieldData.qName}\n\n${fieldData.qnTotalDistinctValues} unique values (of which only ${fieldData.qnPresentDistinctValues} are present in the ${fieldData.srcTable.qName} table).\n\n${descriptions}\n\n${firstFewValues(layout)}`;
+}
+
+export function getSelectionBarTooltip(fieldData, layout) {
+ const total = layout.qListObject.qDimensionInfo.qCardinal;
+ const states = layout.qListObject.qDimensionInfo.qStateCounts;
+
+ let subsetRatioInfo = '';
+ if (fieldData.qnPresentDistinctValues < fieldData.qnTotalDistinctValues) {
+ subsetRatioInfo = `(of which only ${fieldData.qnPresentDistinctValues} are present in the ${fieldData.srcTable.qName} table)`;
+ }
+
+ return `${states.qSelected} selected, ${states.qOption
+ + states.qAlternative} possible, ${
+ states.qExcluded} excluded, ${total} values in total ${subsetRatioInfo}.`;
+}
+
+export function getAssosicationTooltip(fieldName) {
+ return `Association between tables that share the field ${fieldName}. An association allows a selection in one table to infer what field values are possible in the associated table(s).`;
+}
+
+export function getTableTooltip(table) {
+ return `Table ${table.qName}\n\nRow count: ${table.qNoOfRows}\n\nFields: ${reduceWithAnd(table.qFields.map(item => item.qName), 5)}`;
+}
diff --git a/src/components/tooltip.pcss b/src/components/tooltip.pcss
new file mode 100644
index 00000000..45acf7dd
--- /dev/null
+++ b/src/components/tooltip.pcss
@@ -0,0 +1,8 @@
+.tooltip {
+ font-size: 1.5rem;
+ max-width: 30rem;
+}
+
+.tooltip th {
+ text-align: left;
+}
diff --git a/src/components/use/layout.jsx b/src/components/use/layout.jsx
index 4c638fc9..e0db3ec7 100644
--- a/src/components/use/layout.jsx
+++ b/src/components/use/layout.jsx
@@ -10,13 +10,17 @@ export default function useLayout(model) {
let isKilled = false;
const modelChanged = async () => {
- const newLayout = model.getAppLayout
- ? await model.getAppLayout()
- : await model.getLayout();
- if (!isKilled) {
- debounce(() => {
- setLayout(newLayout);
- });
+ try {
+ const newLayout = model.getAppLayout
+ ? await model.getAppLayout()
+ : await model.getLayout();
+ if (!isKilled) {
+ debounce(() => {
+ setLayout(newLayout);
+ });
+ }
+ } catch (err) {
+ setLayout(null);
}
};
diff --git a/src/components/virtual-table.jsx b/src/components/virtual-table.jsx
index 06069bc6..ce95fddc 100644
--- a/src/components/virtual-table.jsx
+++ b/src/components/virtual-table.jsx
@@ -4,7 +4,7 @@ import React, {
import {
Table, AutoSizer, InfiniteLoader,
} from 'react-virtualized';
-import 'react-virtualized/styles.css';
+import './virtual-table.pcss';
import PropTypes from 'prop-types'; // only needs to be imported once
function extractNode(layout, defPath) {
diff --git a/src/components/virtual-table.pcss b/src/components/virtual-table.pcss
new file mode 100644
index 00000000..a311c8e5
--- /dev/null
+++ b/src/components/virtual-table.pcss
@@ -0,0 +1,73 @@
+.ReactVirtualized__Table__headerRow {
+ align-items: center;
+ -webkit-box-align: center;
+ -webkit-box-direction: normal;
+ -webkit-box-orient: horizontal;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+
+.ReactVirtualized__Table__row {
+ align-items: center;
+ -webkit-box-align: center;
+ -webkit-box-direction: normal;
+ -webkit-box-orient: horizontal;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.ReactVirtualized__Table__headerTruncatedText {
+ display: inline-block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.ReactVirtualized__Table__headerColumn,
+.ReactVirtualized__Table__rowColumn {
+ margin-right: 10px;
+ min-width: 0;
+}
+
+.ReactVirtualized__Table__rowColumn {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.ReactVirtualized__Table__headerColumn:first-of-type,
+.ReactVirtualized__Table__rowColumn:first-of-type {
+ margin-left: 10px;
+}
+
+.ReactVirtualized__Table__sortableHeaderColumn {
+ cursor: pointer;
+}
+
+.ReactVirtualized__Table__sortableHeaderIconContainer {
+ align-items: center;
+ -webkit-box-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+}
+
+.ReactVirtualized__Table__sortableHeaderIcon {
+ -webkit-box-flex: 0;
+ fill: currentColor;
+ -ms-flex: 0 0 24px;
+ flex: 0 0 24px;
+ height: 1em;
+ width: 1em;
+}
diff --git a/src/enigma/config.js b/src/enigma/config.js
index 7493df21..7c4b760a 100644
--- a/src/enigma/config.js
+++ b/src/enigma/config.js
@@ -3,6 +3,7 @@ import schema from 'enigma.js/schemas/12.170.2.json';
import listCache from './list-cache';
import layoutCache from './layout-cache';
import getDoc from './get-doc';
+import { reloadInProgressInterceptor } from './reload-in-progress-interceptor';
const ERR_ABORTED = 15;
@@ -11,7 +12,7 @@ const config = {
url: new URLSearchParams(document.location.search).get('engine_url') || `ws://localhost:9076/app/${+new Date()}`,
createSocket: url => new WebSocket(url),
mixins: [listCache, ...layoutCache, getDoc],
- responseInterceptors: [{
+ responseInterceptors: [reloadInProgressInterceptor, {
onRejected(session, request, error) {
if (error.code === ERR_ABORTED) {
return request.retry();
diff --git a/src/enigma/reload-in-progress-interceptor.js b/src/enigma/reload-in-progress-interceptor.js
new file mode 100644
index 00000000..69486ace
--- /dev/null
+++ b/src/enigma/reload-in-progress-interceptor.js
@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+
+export const ERR_RELOAD_IN_PROGRESS = 11000;
+export const WAIT_FOR_RELOAD_IN_PROGRESS_DELAY = 1000;
+const RETRY_INTERVAL = 500;
+let wasInReloadOnStartup;
+let reloadInProgress;
+let setReloadInProgress;
+
+function sleep(time) {
+ return new Promise(resolve => setTimeout(resolve, time));
+}
+
+export function useReloadInProgress(app) {
+ [reloadInProgress, setReloadInProgress] = useState(wasInReloadOnStartup);
+ useEffect(() => {
+ if (!app) return null;
+
+ const modelChanged = async () => {
+ try {
+ await app.getAppLayout();
+ if (reloadInProgress) {
+ setReloadInProgress(false);
+ }
+ // When a change is triggered by a reload the getAppLayout sometimes resolve quick enough to not throw a reload in progress error, so call it
+ // once more to increase the likelyhood a bit. If this too fails any interaction will immediately pop up the reload in progress dialog
+ await sleep(WAIT_FOR_RELOAD_IN_PROGRESS_DELAY);
+ await app.getAppLayout();
+ } catch (err) {
+ if (err.code === ERR_RELOAD_IN_PROGRESS) {
+ if (!reloadInProgress) {
+ setReloadInProgress(true);
+ }
+ }
+ }
+ };
+
+ app.on('changed', modelChanged);
+ modelChanged();
+
+ return () => {
+ app.removeListener('changed', modelChanged);
+ };
+ }, [app && app.id]);
+
+ return reloadInProgress;
+}
+
+function retryUsingTimeouts(request) {
+ return new Promise(((resolve/* , reject */) => {
+ async function retry() {
+ try {
+ const res = await request.retry();
+ resolve(res);
+ } catch (err) {
+ if (err.code === ERR_RELOAD_IN_PROGRESS) {
+ setTimeout(() => {
+ retry();
+ }, RETRY_INTERVAL);
+ }
+ }
+ }
+
+ setTimeout(() => {
+ retry();
+ }, RETRY_INTERVAL);
+ }));
+}
+export const reloadInProgressInterceptor = {
+ onRejected(session, request, error) {
+ if (error.code === ERR_RELOAD_IN_PROGRESS) {
+ if (!reloadInProgress) {
+ if (setReloadInProgress) {
+ setReloadInProgress(true);
+ } else {
+ wasInReloadOnStartup = true;
+ }
+ }
+ if (request.method === 'GetActiveDoc'
+ || request.method === 'OpenDoc'
+ || request.method === 'CreateSessionObject') {
+ return retryUsingTimeouts(request);
+ }
+ }
+ throw error;
+ },
+};
diff --git a/src/index.pcss b/src/index.pcss
index 18258c9b..0c238e91 100644
--- a/src/index.pcss
+++ b/src/index.pcss
@@ -216,6 +216,7 @@ body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 8px;
margin: 0;
+ overflow: hidden;
padding: 0;
}
diff --git a/src/logic/logic.js b/src/logic/logic.js
index 06909292..8500b84e 100644
--- a/src/logic/logic.js
+++ b/src/logic/logic.js
@@ -39,13 +39,13 @@ function assocSymbol(field) {
}
}
-function toSubsetRatioText(qSubsetratio) {
- if (qSubsetratio === 1) {
+function toSubsetRatioText(qSubsetRatio) {
+ if (qSubsetRatio === 1) {
return '';
- } if (qSubsetratio === 0) {
+ } if (qSubsetRatio === 0) {
return '0%';
}
- const subsetRatioText = `${Math.round(qSubsetratio * 100)}%`;
+ const subsetRatioText = `${Math.round(qSubsetRatio * 100)}%`;
if (subsetRatioText === '100%') {
return '>99%';
} if (subsetRatioText === '0%') {
@@ -55,8 +55,9 @@ function toSubsetRatioText(qSubsetratio) {
}
function toSubsetRatioTitle(field) {
+ const subsetratioText = toSubsetRatioText(field.qSubsetRatio);
if (!!field.qnPresentDistinctValues && !!field.qnTotalDistinctValues && field.qnPresentDistinctValues < field.qnTotalDistinctValues) {
- return `${field.qnPresentDistinctValues} out of ${field.qnTotalDistinctValues} values are present in this table.`;
+ return `${subsetratioText} subset ratio\n\n${field.qnPresentDistinctValues} out of ${field.qnTotalDistinctValues} ${field.qName} values are present in the ${field.srcTable.qName} table.\nThe remaining ${field.qnTotalDistinctValues - field.qnPresentDistinctValues} values only exist in other tables (${field.otherTables.join('')}) \n\nNote that when interacting with a field - all values are shown - not only the ones that are present in the underlying table.`;
}
return '';
}
@@ -95,11 +96,13 @@ class QueryModel {
const fields = {};
const tables = {};
const tablesNamesOfFieldMapMap = {};
- tablesAndKeys.qtr.forEach((table) => {
+ tablesAndKeys.qtr.forEach((originalTable) => {
+ const table = JSON.parse(JSON.stringify(originalTable)); // Clone so we can append information to the structure safely
tables[table.qName] = table;
table.qFields.sort((a, b) => a.qName.localeCompare(b.qName));
table.qFields.forEach((_field) => {
- const field = Object.assign({}, _field);
+ const field = _field;
+ field.srcTable = table;
fields[field.qName] = fields[field.qName] || field;
grid[field.qName] = grid[field.qName] || {};
grid[field.qName][table.qName] = field;
@@ -128,22 +131,27 @@ class QueryModel {
this.analyzeTable(actualStartTable, tablesAlreadyAnalyzed, '');
actualStartTable = biggestTableNotAnalyzed(this.originalTableNamesSortedBySize, tablesAlreadyAnalyzed);
}
-
this.fillInGridInfo(grid);
}
+ getTableField(tableName, fieldName) {
+ return this.grid[fieldName][tableName];
+ }
fillInGridInfo(gridIn) {
// Fill in blanks
+
const grid = gridIn;
for (let f = 0; f < this.resultFieldList.length; f += 1) {
for (let t = 0; t < this.resultTableList.length; t += 1) {
- let cell = grid[this.resultFieldList[f]][this.resultTableList[t]];
+ const tableName = this.resultTableList[t];
+ const fieldName = this.resultFieldList[f];
+ let cell = grid[fieldName][tableName];
if (!cell) {
cell = {
isKey: false, qKeyType: 'NOT_KEY', isEmpty: true, betweenKeys: true, insideTable: true,
}; // The default betweenKeys will be overriden
- grid[this.resultFieldList[f]][this.resultTableList[t]] = cell;
+ grid[fieldName][tableName] = cell;
} else {
cell.betweenKeys = true;
cell.isKey = true;
@@ -151,6 +159,8 @@ class QueryModel {
cell.insideTable = true;
cell.backgroundColor = colorOfField(cell);
cell.assocSymbol = assocSymbol(cell);
+ cell.tables = this.tablesOfField(fieldName);
+ cell.otherTables = this.otherTablesOfField(tableName, fieldName);
cell.subsetRatioText = toSubsetRatioText(cell.qSubsetRatio);
cell.subsetRatioTitle = toSubsetRatioTitle(cell);
}
@@ -365,6 +375,10 @@ class QueryModel {
return Object.keys(this.tablesNamesOfFieldMapMap[fieldName]);
}
+ otherTablesOfField(tableName, fieldName) {
+ return Object.keys(this.tablesNamesOfFieldMapMap[fieldName]).filter(name => name !== tableName);
+ }
+
fieldsOfTable(tableName) {
const keys = this.tables[tableName].qFields.filter(field => field.qKeyType !== 'NOT_KEY');
keys.sort((a, b) => b.qnPresentDistinctValues - a.qnPresentDistinctValues);
diff --git a/test/comp/__snapshots__/error-reporting.spec.jsx.snap b/test/comp/__snapshots__/error-reporting.spec.jsx.snap
new file mode 100644
index 00000000..260bc690
--- /dev/null
+++ b/test/comp/__snapshots__/error-reporting.spec.jsx.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`'should display cookie if not set' 1`] = `
+
+
+ This website uses cookies to ensure you get the best experience on our website.
+
+
+ Learn more
+
+
+
+ Got it!
+
+
+
+
+ Taking your Qlik data models to stage
+
+
+
+ WebSocket connected but no open app, in addition the app list was empty.
+
+
+ Please make sure there are apps accessible on this engine and reload the page, or connect to another one:
+
+
+
+
+
+
+ Taking your Qlik data models to stage
+
+
+
+ WebSocket connected, but no open app. Choose one below:
+
+
+
+
+
+ Consumer_Sales
+
+
+ (
+ See through the eyes of a consumer goods company. Analyze sales data by sales rep, by region, by product, etc.
+ )
+
+
+
+
+
+ FDA - Drug Cases
+
+
+ (
+ This Dashboard is based on the 2015 Q4 data.
+ )
+
+
+
+
+
+ New_QVNCycles_with_measures_dimensions_visualizations_
+
+
+ (
+ An app with some measures and dimensions and master visualizations.
+Texten finns också på skånska.
+ )
+
+
+
+
+