fix(table): TableVis dynamic height enabled (#229)

* fix(table): table dynamic height enabled

* build(fix storybook): fix storybook lib dep and node version (#233)

* build(xychart): ignore typing of xychart for now

* fix(fix lint): fix lint

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-  - '10.10'
+  - '10.15'
 
 cache:
   - npm: true

package.json

@@ -10,8 +10,8 @@
     "build:assets": "node ./buildAssets.js",
     "commit": "superset-commit",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
-    "type": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-*)\" --noEmit",
-    "type:dts": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-*)\" --emitDeclarationOnly",
+    "type": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-!(chart-xy))\" --noEmit",
+    "type:dts": "NODE_ENV=production beemo typescript --workspaces=\"@superset-ui/((preset|plugin)-!(chart-xy))\" --emitDeclarationOnly",
     "lint": "beemo create-config prettier && beemo eslint \"./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "beemo create-config prettier && beemo eslint --fix \"./packages/*/{src,test,storybook}/**/*.{js,jsx,ts,tsx}\"",
     "jest": "beemo jest --color --coverage --react",

packages/superset-ui-legacy-plugin-chart-paired-t-test/src/TTestTable.jsx

@@ -59,6 +59,7 @@ class TTestTable extends React.Component {
     };
   }
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillMount() {
     const { control } = this.state;
     this.computeTTest(control); // initially populate table

packages/superset-ui-legacy-preset-chart-nvd3/src/LineMulti/LineMulti.jsx

@@ -67,6 +67,7 @@ class LineMulti extends React.Component {
     this.loadData(this.props);
   }
 
+  // eslint-disable-next-line react/no-deprecated
   componentWillReceiveProps(nextProps) {
     this.loadData(nextProps);
   }

packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventChart.tsx

@@ -64,6 +64,8 @@ function defaultContentRenderer(
 }
 
 export default class IcicleEventChart extends Component<Props> {
+  private chartRef = createRef<HTMLDivElement>();
+
   static defaultProps = {
     boxMargin: {
       x: 1,
@@ -73,8 +75,6 @@ export default class IcicleEventChart extends Component<Props> {
     contentRenderer: defaultContentRenderer,
   };
 
-  private chartRef = createRef<HTMLDivElement>();
-
   constructor(props: Props) {
     super(props);
 

packages/superset-ui-plugin-chart-table/package.json

@@ -26,7 +26,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@airbnb/lunar": "^2.16.0",
+    "@airbnb/lunar": "^2.35.0",
     "@airbnb/lunar-icons": "^2.1.4",
     "@types/dompurify": "^0.0.33",
     "dompurify": "^1.0.11"

packages/superset-ui-plugin-chart-table/src/Table.tsx

@@ -5,7 +5,7 @@ import Input from '@airbnb/lunar/lib/components/Input';
 import withStyles, { WithStylesProps } from '@airbnb/lunar/lib/composers/withStyles';
 import { Renderers, ParentRow, ColumnMetadata } from '@airbnb/lunar/lib/components/DataTable/types';
 import dompurify from 'dompurify';
-import { getRenderer, ColumnType, heightType, Cell } from './renderer';
+import { getRenderer, ColumnType, Cell } from './renderer';
 
 type Props = {
   data: ParentRow[];
@@ -40,7 +40,7 @@ const CHAR_WIDTH = 10;
 
 const CELL_PADDING = 32;
 
-const MAX_COLUMN_WIDTH = 500;
+const MAX_COLUMN_WIDTH = 300;
 
 export type TableProps = Props & Readonly<typeof defaultProps>;
 
@@ -59,7 +59,7 @@ function getCellHash(cell: Cell) {
   return `${cell.key}#${cell.value}`;
 }
 
-function getText(value: string | number) {
+function getText(value: unknown) {
   if (typeof value === 'string') {
     const span = document.createElement('span');
     const sanitizedString = dompurify.sanitize(value);
@@ -251,7 +251,7 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
           keys={keys}
           columnMetadata={columnMetadata}
           zebra
-          rowHeight={heightType}
+          dynamicRowHeight
           renderers={renderers}
           height={tableHeight}
           width={Math.max(calculatedWidth, width)}

packages/superset-ui-plugin-chart-table/src/renderer.tsx

@@ -5,7 +5,7 @@
 import React, { CSSProperties } from 'react';
 import { HEIGHT_TO_PX } from '@airbnb/lunar/lib/components/DataTable/constants';
 import { RendererProps } from '@airbnb/lunar/lib/components/DataTable/types';
-import Interweave from '@airbnb/lunar/lib/components/Interweave';
+import dompurify from 'dompurify';
 
 const NEGATIVE_COLOR = '#FFA8A8';
 const POSITIVE_COLOR = '#ced4da';
@@ -49,23 +49,25 @@ export const getRenderer = ({
   handleCellSelected: (cell: Cell) => any;
 }) => (props: RendererProps) => {
   const { keyName } = props;
-  const value = props.row.rowData.data[keyName];
+  let value = props.row.rowData.data[keyName];
+  if (!column.format) {
+    value = dompurify.sanitize(value as string);
+  }
   const isMetric = column.type === 'metric';
   let Parent;
 
   const cursorStyle = enableFilter && !isMetric ? 'pointer' : 'default';
 
   const boxStyle: CSSProperties = {
     backgroundColor:
-      enableFilter && isSelected({ key: keyName, value }) ? SELECTION_COLOR : undefined,
+      enableFilter && isSelected({ key: keyName as string, value }) ? SELECTION_COLOR : undefined,
     cursor: cursorStyle,
-    margin: '0px -16px',
+    margin: '4px -16px',
   };
 
   const boxContainerStyle: CSSProperties = {
     alignItems: 'center',
     display: 'flex',
-    height: HEIGHT_TO_PX[heightType],
     margin: '0px 16px',
     position: 'relative',
     textAlign: isMetric ? 'right' : 'left',
@@ -80,18 +82,19 @@ export const getRenderer = ({
   if (isMetric) {
     let left = 0;
     let width = 0;
+    const numericValue = value as number;
     if (alignPositiveNegative) {
       width = Math.abs(
-        Math.round((value / Math.max(column.maxValue!, Math.abs(column.minValue!))) * 100),
+        Math.round((numericValue / Math.max(column.maxValue!, Math.abs(column.minValue!))) * 100),
       );
     } else {
       const posExtent = Math.abs(Math.max(column.maxValue!, 0));
       const negExtent = Math.abs(Math.min(column.minValue!, 0));
       const tot = posExtent + negExtent;
-      left = Math.round((Math.min(negExtent + value, negExtent) / tot) * 100);
-      width = Math.round((Math.abs(value) / tot) * 100);
+      left = Math.round((Math.min(negExtent + numericValue, negExtent) / tot) * 100);
+      width = Math.round((Math.abs(numericValue) / tot) * 100);
     }
-    const color = colorPositiveNegative && value < 0 ? NEGATIVE_COLOR : POSITIVE_COLOR;
+    const color = colorPositiveNegative && numericValue < 0 ? NEGATIVE_COLOR : POSITIVE_COLOR;
 
     Parent = ({ children }: { children: React.ReactNode }) => {
       const barStyle: CSSProperties = {
@@ -122,12 +125,19 @@ export const getRenderer = ({
         isMetric
           ? null
           : handleCellSelected({
-              key: keyName,
+              key: keyName as string,
               value,
             })
       }
     >
-      <Parent>{column.format ? column.format(value) : <Interweave content={value} />}</Parent>
+      <Parent>
+        {column.format ? (
+          column.format(value)
+        ) : (
+          // eslint-disable-next-line react/no-danger
+          <div dangerouslySetInnerHTML={{ __html: value as string }} />
+        )}
+      </Parent>
     </div>
   );
 };

packages/superset-ui-plugins-demo/package.json

@@ -39,7 +39,6 @@
     "@storybook/react": "^5.0.9",
     "@types/react": "^16.8.8",
     "@types/storybook__react": "3.0.7",
-    "@types/storybook__addon-knobs": "^5.0.0",
     "bootstrap": "^4.3.1",
     "react": "^16.6.0",
     "storybook-addon-jsx": "^7.1.0"

packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js

@@ -17,8 +17,18 @@ keys.forEach((key, i) => {
     .join('');
 });
 item.ds = '2019-09-09';
-item.html = '<a href="www.google.com" target="_blank">Link Test</a>';
+
+const getHTML = () => {
+  const randomText = Array(Math.floor(Math.random() * 20))
+    .fill('very')
+    .join(' ');
+
+  return `<a href="www.google.com" target="_blank">Link Test with a ${randomText} long title</a>`;
+};
 
 export default Array(ROW_COUNT)
   .fill(0)
-  .map(_ => ({ ...item }));
+  .map(_ => ({
+    ...item,
+    html: getHTML(),
+  }));

packages/superset-ui-preset-chart-xy/package.json

@@ -21,6 +21,7 @@
   ],
   "author": "Superset",
   "license": "Apache-2.0",
+  "private": true,
   "bugs": {
     "url": "https://github.com/apache-superset/superset-ui-plugins/issues"
   },

packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx

@@ -46,12 +46,12 @@ type Props = {
   Readonly<typeof defaultProps>;
 
 export default class BoxPlot extends React.PureComponent<Props> {
-  static defaultProps = defaultProps;
-
   private createEncoder = createEncoderSelector(Encoder);
 
   private createMargin = createMarginSelector();
 
+  static defaultProps = defaultProps;
+
   constructor(props: Props) {
     super(props);
 

packages/superset-ui-preset-chart-xy/src/Line/Line.tsx

@@ -80,8 +80,6 @@ export interface SeriesValue {
 const CIRCLE_STYLE = { strokeWidth: 1.5 };
 
 export default class LineChart extends PureComponent<Props> {
-  static defaultProps = defaultProps;
-
   private createEncoder = createEncoderSelector(Encoder);
 
   private createAllSeries = createSelector(
@@ -128,6 +126,7 @@ export default class LineChart extends PureComponent<Props> {
 
   private createMargin = createMarginSelector();
 
+  static defaultProps = defaultProps;
   constructor(props: Props) {
     super(props);
 

packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx

@@ -55,12 +55,12 @@ export interface EncodedPoint {
 }
 
 export default class ScatterPlot extends PureComponent<Props> {
-  static defaultProps = defaultProps;
-
   private createEncoder = createEncoderSelector(Encoder);
 
   private createMargin = createMarginSelector();
 
+  static defaultProps = defaultProps;
+
   constructor(props: Props) {
     super(props);