fix: remove infinite loop

This commit is contained in:
caele
2021-01-13 16:09:38 +01:00
parent d6ae86220e
commit acf6eb7b26
3 changed files with 146 additions and 121 deletions

View File

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

View File

@@ -1,50 +1,55 @@
import { distinctArray } from './utilities'; import { distinctArray } from "./utilities";
export const HEADER_FONT_SIZE = { export const HEADER_FONT_SIZE = {
SMALL: -1, SMALL: -1,
MEDIUM: 1 MEDIUM: 1,
}; };
function getAlignment (option) { function getAlignment(option) {
const alignmentOptions = { 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 = { const fontSizeAdjustmentOptions = {
1: HEADER_FONT_SIZE.SMALL, 1: HEADER_FONT_SIZE.SMALL,
2: HEADER_FONT_SIZE.MEDIUM 2: HEADER_FONT_SIZE.MEDIUM,
}; };
return fontSizeAdjustmentOptions[option] || 0; return fontSizeAdjustmentOptions[option] || 0;
} }
function generateMeasurements (information) { function generateMeasurements(information) {
return information.map(measurement => { return information.map((measurement) => {
const transformedMeasurement = { const transformedMeasurement = {
format: measurement.qNumFormat.qFmt || '#.##0', format: measurement.qNumFormat.qFmt || "#.##0",
name: measurement.qFallbackTitle name: measurement.qFallbackTitle,
}; };
return transformedMeasurement; return transformedMeasurement;
}); });
} }
function generateDimensionEntry (information, data) { function generateDimensionEntry(information, data) {
return { return {
displayValue: data.qText || data.qNum, displayValue: data.qText || data.qNum,
elementNumber: data.qElemNumber, elementNumber: data.qElemNumber,
name: information.qFallbackTitle, name: information.qFallbackTitle,
value: data.qNum value: data.qNum,
}; };
} }
function generateMatrixCell ({ cell, dimension1Information, dimension2Information, measurementInformation }) { function generateMatrixCell({
cell,
dimension1Information,
dimension2Information,
measurementInformation,
}) {
const matrixCell = { const matrixCell = {
displayValue: cell.qText, displayValue: cell.qText,
format: measurementInformation.format, format: measurementInformation.format,
@@ -52,28 +57,32 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
parents: { parents: {
dimension1: { dimension1: {
elementNumber: dimension1Information.qElemNumber, elementNumber: dimension1Information.qElemNumber,
header: dimension1Information.qText header: dimension1Information.qText,
}, },
measurement: { measurement: {
header: measurementInformation.name, header: measurementInformation.name,
index: measurementInformation.index index: measurementInformation.index,
} },
}, },
value: cell.qNum value: cell.qNum,
}; };
if (dimension2Information) { if (dimension2Information) {
matrixCell.parents.dimension2 = { matrixCell.parents.dimension2 = {
elementNumber: dimension2Information.qElemNumber, elementNumber: dimension2Information.qElemNumber,
header: dimension2Information.qText header: dimension2Information.qText,
}; };
} }
return matrixCell; return matrixCell;
} }
function generateDataSet(
function generateDataSet (component, dimensionsInformation, measurementsInformation, dataCube) { component,
dimensionsInformation,
measurementsInformation,
dataCube
) {
const measurements = generateMeasurements(measurementsInformation); const measurements = generateMeasurements(measurementsInformation);
let dimension1 = []; let dimension1 = [];
let dimension2 = []; let dimension2 = [];
@@ -83,13 +92,19 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
// eslint-disable-next-line no-undefined // eslint-disable-next-line no-undefined
for (let index = 0; dataCube[index] !== undefined; index++) { for (let index = 0; dataCube[index] !== undefined; index++) {
// eslint-disable-next-line no-loop-func // 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); dimension1.push(dimension1Entry);
let dimension2Entry; let dimension2Entry;
let firstDataCell = 1; let firstDataCell = 1;
if (hasSecondDimension) { if (hasSecondDimension) {
dimension2Entry = generateDimensionEntry(dimensionsInformation[1], row[1]); dimension2Entry = generateDimensionEntry(
dimensionsInformation[1],
row[1]
);
dimension2.push(dimension2Entry); dimension2.push(dimension2Entry);
firstDataCell = 2; firstDataCell = 2;
} }
@@ -104,16 +119,19 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
cell, cell,
dimension1Information, dimension1Information,
dimension2Information, dimension2Information,
measurementInformation measurementInformation,
}); });
return generatedCell; return generatedCell;
}); });
let appendToRowIndex = matrix.length; let appendToRowIndex = matrix.length;
if (hasSecondDimension) { 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++) { 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; appendToRowIndex = i;
matrixRow = matrix[i].concat(matrixRow); matrixRow = matrix[i].concat(matrixRow);
} }
@@ -131,34 +149,44 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
dimension1: dimension1, dimension1: dimension1,
dimension2: dimension2, dimension2: dimension2,
matrix, matrix,
measurements measurements,
}; };
} }
function initializeTransformed ({ component, dataCube, designList, layout }) { function initializeTransformed({
$element,
component,
dataCube,
designList,
layout,
}) {
const dimensionsInformation = component.backendApi.getDimensionInfos(); const dimensionsInformation = component.backendApi.getDimensionInfos();
const measurementsInformation = component.backendApi.getMeasureInfos(); const measurementsInformation = component.backendApi.getMeasureInfos();
const dimensionCount = layout.qHyperCube.qDimensionInfo.length; 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 customSchemaBasic = [];
const customSchemaFull = []; const customSchemaFull = [];
let customHeadersCount = 0; let customHeadersCount = 0;
if (designList && designList.length > 0) { if (designList && designList.length > 0) {
const headers = designList[0].split(';'); const headers = designList[0].split(";");
customHeadersCount = headers.length; customHeadersCount = headers.length;
for (let lineNumber = 0; lineNumber < designList.length; lineNumber += 1) { for (let lineNumber = 0; lineNumber < designList.length; lineNumber += 1) {
customSchemaFull[lineNumber] = new Array(headers.length); customSchemaFull[lineNumber] = new Array(headers.length);
const data = designList[lineNumber].split(';'); const data = designList[lineNumber].split(";");
if (data.length === headers.length) { 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; [customSchemaBasic[lineNumber]] = data;
customSchemaFull[lineNumber][headerIndex] = data[headerIndex]; customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
} }
@@ -172,25 +200,28 @@ function initializeTransformed ({ component, dataCube, designList, layout }) {
// the widths as percentages of the available width. However, this often results in random // 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. // 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. // This 1px causes missalignment between the data- and header tables.
cellWidth = ''; cellWidth = "";
} else { } else {
// If using the previous solution just set 60px // 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, // 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) // possibly with reselect for some presentational transforms (moving some of the presentational logic like formatting and such)
const transformedProperties = { const transformedProperties = {
element: $element[0],
data: { data: {
headers: { headers: {
dimension1, // column headers dimension1, // column headers
dimension2, // parent row headers if exists 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 matrix, // 2d array of all rows/cells to render in body of datatable
meta: { meta: {
dimensionCount: dimensionsInformation.length dimensionCount: dimensionsInformation.length,
} },
}, },
general: { general: {
allowExcelExport: layout.allowexportxls, allowExcelExport: layout.allowexportxls,
@@ -200,23 +231,25 @@ function initializeTransformed ({ component, dataCube, designList, layout }) {
footnote: layout.footnote, footnote: layout.footnote,
subtitle: layout.subtitle, subtitle: layout.subtitle,
title: layout.title, title: layout.title,
useColumnSeparator: layout.separatorcols && dimensionCount > 1 useColumnSeparator: layout.separatorcols && dimensionCount > 1,
}, },
selection: { selection: {
dimensionSelectionCounts: dimensionsInformation.map(dimensionInfo => dimensionInfo.qStateCounts.qSelected) dimensionSelectionCounts: dimensionsInformation.map(
(dimensionInfo) => dimensionInfo.qStateCounts.qSelected
),
}, },
styling: { styling: {
customCSV: { customCSV: {
basic: customSchemaBasic, basic: customSchemaBasic,
count: customHeadersCount, count: customHeadersCount,
full: customSchemaFull full: customSchemaFull,
}, },
hasCustomFileStyle: Boolean(designList), hasCustomFileStyle: Boolean(designList),
headerOptions: { headerOptions: {
alignment: getAlignment(layout.HeaderAlign), alignment: getAlignment(layout.HeaderAlign),
colorSchema: layout.HeaderColorSchema.color, colorSchema: layout.HeaderColorSchema.color,
fontSizeAdjustment: getFontSizeAdjustment(layout.lettersizeheader), fontSizeAdjustment: getFontSizeAdjustment(layout.lettersizeheader),
textColor: layout.HeaderTextColorSchema.color textColor: layout.HeaderTextColorSchema.color,
}, },
options: { options: {
backgroundColor: layout.rowEvenBGColor, backgroundColor: layout.rowEvenBGColor,
@@ -224,38 +257,42 @@ function initializeTransformed ({ component, dataCube, designList, layout }) {
color: layout.BodyTextColorSchema, color: layout.BodyTextColorSchema,
fontFamily: layout.FontFamily, fontFamily: layout.FontFamily,
fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize), fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
textAlignment: layout.cellTextAlignment textAlignment: layout.cellTextAlignment,
}, },
conditionalColoring: { conditionalColoring: {
enabled: layout.conditionalcoloring.enabled, enabled: layout.conditionalcoloring.enabled,
colorAllRows: layout.conditionalcoloring.colorall, 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 measures: !layout.conditionalcoloring.measures
? [] : layout.conditionalcoloring.measures.split(',').map(index => Number(index)), ? []
: layout.conditionalcoloring.measures
.split(",")
.map((index) => Number(index)),
threshold: { threshold: {
poor: layout.conditionalcoloring.threshold_poor, poor: layout.conditionalcoloring.threshold_poor,
fair: layout.conditionalcoloring.threshold_fair fair: layout.conditionalcoloring.threshold_fair,
}, },
colors: { colors: {
poor: { poor: {
color: layout.conditionalcoloring.color_poor, color: layout.conditionalcoloring.color_poor,
textColor: layout.conditionalcoloring.textcolor_poor textColor: layout.conditionalcoloring.textcolor_poor,
}, },
fair: { fair: {
color: layout.conditionalcoloring.color_fair, color: layout.conditionalcoloring.color_fair,
textColor: layout.conditionalcoloring.textcolor_fair textColor: layout.conditionalcoloring.textcolor_fair,
}, },
good: { good: {
color: layout.conditionalcoloring.color_good, color: layout.conditionalcoloring.color_good,
textColor: layout.conditionalcoloring.textcolor_good textColor: layout.conditionalcoloring.textcolor_good,
} },
} },
}, },
symbolForNulls: layout.symbolfornulls, symbolForNulls: layout.symbolfornulls,
usePadding: layout.indentbool usePadding: layout.indentbool,
} },
}; };
return transformedProperties; return transformedProperties;

View File

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