Merge pull request #3752 from metabase/react-virt-data-table

Table ported to react-virtualized

.flowconfig

 [ignore]
 .*/node_modules/react/node_modules/.*
 .*/node_modules/postcss-import/node_modules/.*
-.*/node_modules/fixed-data-table/.*
 .*/node_modules/@kadira/storybook/node_modules/.*
 .*/node_modules/.*/\(lib\|test\).*\.json$
 

frontend/interfaces/icepick.js

@@ -10,6 +10,8 @@ declare module icepick {
     declare function assocIn<O:Object, K:Key, V:Value>(object: O, path: Array<K>, value: V): O;
     declare function updateIn<O:Object, K:Key, V:Value>(object: O, path: Array<K>, callback: ((value: V) => V)): O;
 
+    declare function merge<O:Object>(object: O, other: O): O;
+
     // TODO: improve this
     declare function chain<O:Object>(object: O): any;
 }

frontend/interfaces/underscore.js

 // type definitions for (some of) underscore
 
 declare module "underscore" {
-  declare function find<T>(list: T[], predicate: (val: T)=>boolean): ?T;
-  declare function findWhere<T>(list: T[], properties: {[key:string]: any}): ?T;
-  declare function findIndex<T>(list: T[], predicate: (val: T)=>boolean): number;
+  declare function find<T>(list: ?T[], predicate: (val: T)=>boolean): ?T;
+  declare function findWhere<T>(list: ?T[], properties: {[key:string]: any}): ?T;
+  declare function findIndex<T>(list: ?T[], predicate: (val: T)=>boolean): number;
 
   declare function clone<T>(obj: T): T;
 

frontend/src/metabase/components/Value.jsx

+import React from "react";
+
+import { formatValue } from "metabase/lib/formatting";
+
+const Value = ({ value, ...options }) => {
+    let formatted = formatValue(value, { ...options, jsx: true });
+    if (React.isValidElement(formatted)) {
+        return formatted;
+    } else {
+        return <span>{formatted}</span>
+    }
+}
+
+export default Value;

frontend/src/metabase/css/components/mb_data_table.css

-
-.MB-DataTable-header:hover {
-    cursor: pointer;
-}
-
-.MB-DataTable-header .Icon       { opacity: 0; }
-.MB-DataTable-header:hover .Icon,
-.MB-DataTable-header--sorted .Icon     {
-    opacity: 1;
-    transition: opacity .3s linear;
-}
-
-.PagingButtons {
-    border: 1px solid #ddd;
-}
-
-/* if the column is the one that is being sorted*/
-.MB-DataTable-header--sorted {
-     color: var(--brand-color);
-}
-
-/* what follows is a war crime but such is the state of FE development */
-.MB-DataTable .public_fixedDataTable_main {
-    border-color: rgb(205, 205, 205);
-}
-
-.MB-DataTable .public_fixedDataTableCell_main {
-    border-right: 1px solid #e8e8e8;
-    border-bottom: 1px solid #e8e8e8;
-    border-top: 1px solid transparent;
-    border-left: 1px solid transparent;
-}
-
-.MB-DataTable .public_fixedDataTableCell_main:hover {
-    border-color: var(--brand-color);
-    color: var(--brand-color);
-}
-
-.MB-DataTable .public_fixedDataTableRow_highlighted,
-.MB-DataTable .public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main {
-    background-color: #fff;
-}
-
-.MB-DataTable .public_fixedDataTable_header,
-.MB-DataTable .public_fixedDataTable_header .public_fixedDataTableCell_main {
-    background-color: #fff;
-    background-image: none;
-}
-
-.MB-DataTable .public_fixedDataTable_header,
-.MB-DataTable .public_fixedDataTable_header .public_fixedDataTableCell_main {
-    background-color: #fff;
-}
-
-.MB-DataTable .public_fixedDataTable_header .public_fixedDataTableCell_main:hover {
-    border-color: #e8e8e8;
-}
-
-/* this is so that our column calculation code works correctly */
-.MB-DataTable .public_fixedDataTableCell_cellContent {
-    display: block;
-}
-
-/* cell overflow ellipsis */
-.MB-DataTable .cellData {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-}
-
-/* needs to be display:block so .cellData doesn't overflow the width and not show ellipsis */
-/* only enable once the contentWidths have been computed (.MB-DataTable--ready) */
-/* only enable for the body rows (.public_fixedDataTable_bodyRow) */
-.MB-DataTable.MB-DataTable--ready .public_fixedDataTable_bodyRow .public_fixedDataTableCell_wrap1,
-.MB-DataTable.MB-DataTable--ready .public_fixedDataTable_bodyRow .public_fixedDataTableCell_wrap2,
-.MB-DataTable.MB-DataTable--ready .public_fixedDataTable_bodyRow .public_fixedDataTableCell_wrap3,
-.MB-DataTable.MB-DataTable--ready .public_fixedDataTable_bodyRow .public_fixedDataTableCell_cellContent,
-.MB-DataTable.MB-DataTable--ready .public_fixedDataTable_bodyRow .cellData {
-    display: block;
-}

frontend/src/metabase/css/core/colors.css

@@ -50,7 +50,8 @@
 }
 
 .bg-brand,
-.bg-brand-hover:hover { background-color: var(--brand-color); }
+.bg-brand-hover:hover,
+.bg-brand-active:active { background-color: var(--brand-color); }
 
 
 /* success */

frontend/src/metabase/css/core/scroll.css

@@ -67,7 +67,7 @@
     display: none; /* Safari and Chrome */
 }
 
-.scroll-hide-all * {
+.scroll-hide-all, .scroll-hide-all * {
     -ms-overflow-style: none;  /* IE 10+ */
     overflow: -moz-scrollbars-none;  /* Firefox */
 }

frontend/src/metabase/css/index.css

@@ -5,7 +5,6 @@
 @import './components/form.css';
 @import './components/header.css';
 @import './components/icons.css';
-@import './components/mb_data_table.css';
 @import './components/modal.css';
 @import './components/popover.css';
 @import './components/select.css';

frontend/src/metabase/css/query_builder.css

@@ -598,11 +598,6 @@
     min-width: 25em;
 }
 
-.MB-DataTable.MB-DataTable--pivot .public_fixedDataTableCell_main:first-child {
-    font-weight: bold;
-    border-right: 1px solid color(var(--base-grey) shade(40%));
-}
-
 .List {
   padding: var(--padding-1);
 }

frontend/src/metabase/css/vendor.css

@@ -3,6 +3,3 @@
 
 /* z-index utils */
 @import 'z-index/z-index.css';
-
-/* react */
-@import 'fixed-data-table/dist/fixed-data-table.css';

frontend/src/metabase/dashboard/components/grid/GridItem.jsx

@@ -16,15 +16,15 @@ export default class GridItem extends Component {
     }
 
     onDragHandler(handlerName) {
-        return (e, {element, position}) => {
+        return (e, { node, x, y }) => {
             // react-draggle seems to return undefined/NaN occasionally, which breaks things
-            if (isNaN(position.clientX) || isNaN(position.clientY)) {
+            if (isNaN(x) || isNaN(y)) {
                 return;
             }
 
             let { dragStartPosition, dragStartScrollTop } = this.state;
             if (handlerName === "onDragStart") {
-                dragStartPosition = position;
+                dragStartPosition = { x, y };
                 dragStartScrollTop = document.body.scrollTop
                 this.setState({ dragStartPosition, dragStartScrollTop });
             }
@@ -33,8 +33,8 @@ export default class GridItem extends Component {
             let scrollTopDelta = document.body.scrollTop - dragStartScrollTop;
             // compute new position
             let pos = {
-                x: position.clientX - dragStartPosition.clientX,
-                y: position.clientY - dragStartPosition.clientY + scrollTopDelta,
+                x: x - dragStartPosition.x,
+                y: y - dragStartPosition.y + scrollTopDelta,
             };
 
             if (handlerName === "onDragStop") {
@@ -43,7 +43,7 @@ export default class GridItem extends Component {
                 this.setState({ dragging: pos });
             }
 
-            this.props[handlerName](this.props.i, {e, element, position: pos });
+            this.props[handlerName](this.props.i, {e, node, position: pos });
         };
     }
 

frontend/src/metabase/lib/redux.js

@@ -63,18 +63,9 @@ export function momentifyObjectsTimestamps(objects, keys) {
     return _.mapObject(objects, o => momentifyTimestamps(o, keys));
 }
 
-//filters out angular cruft in resource list
-export const cleanResources = (resources) => resources
-    .filter(resource => resource.id !== undefined);
-
-//filters out angular cruft and turns into id indexed map
-export const resourceListToMap = (resources) => cleanResources(resources)
-    .reduce((map, resource) => Object.assign({}, map, {[resource.id]: resource}), {});
-
-//filters out angular cruft in resource
-export const cleanResource = (resource) => Object.keys(resource)
-    .filter(key => key.charAt(0) !== "$")
-    .reduce((map, key) => Object.assign({}, map, {[key]: resource[key]}), {});
+// turns into id indexed map
+export const resourceListToMap = (resources) =>
+    resources.reduce((map, resource) => ({ ...map, [resource.id]: resource }), {});
 
 export const fetchData = async ({
     dispatch,

frontend/src/metabase/lib/visualization_settings.js

@@ -549,6 +549,8 @@ const SETTINGS = {
             columnNames: cols.reduce((o, col) => ({ ...o, [col.name]: getFriendlyName(col)}), {})
         })
     },
+    "table.column_widths": {
+    },
     "map.type": {
         title: "Map type",
         widget: ChartSettingSelect,

frontend/src/metabase/meta/types/Dataset.js

 /* @flow */
 
+import type { FieldId } from "./Field";
+import type { DatasetQuery } from "./Card";
+
 export type ColumnName = string;
 
 // TODO: incomplete
 export type Column = {
+    id: ?FieldId,
     name: ColumnName,
     display_name: string,
     base_type: string,
+    special_type: ?string
 }
 
 export type ISO8601Times = string;
@@ -18,5 +23,6 @@ export type Dataset = {
         cols: Column[],
         columns: ColumnName[],
         rows: Row[]
-    }
+    },
+    json_query: DatasetQuery
 }

frontend/src/metabase/meta/types/Query.js

@@ -38,7 +38,8 @@ export type StructuredQuery = {
     filter?:      FilterClause,
     order_by?:    OrderByClause,
     limit?:       LimitClause,
-    expressions?: { [key: ExpressionName]: Expression }
+    expressions?: { [key: ExpressionName]: Expression },
+    fields?:      FieldsClause
 };
 
 export type AggregationClause =
@@ -97,3 +98,5 @@ export type ExpressionOperand = ConcreteField | NumericLiteral | Expression;
 
 export type Expression =
     [ExpressionOperator, ExpressionOperand, ExpressionOperand];
+
+export type FieldsClause = FieldId[];

frontend/src/metabase/redux/metadata.js

@@ -3,7 +3,6 @@ import {
     combineReducers,
     createThunkAction,
     resourceListToMap,
-    cleanResource,
     fetchData,
     updateData,
 } from "metabase/lib/redux";
@@ -60,11 +59,10 @@ export const updateMetric = createThunkAction(UPDATE_METRIC, function(metric) {
         const dependentRequestStatePaths = [['metadata', 'revisions', 'metric', metric.id]];
         const putData = async () => {
             const updatedMetric = await MetricApi.update(metric);
-            const cleanMetric = cleanResource(updatedMetric);
             const existingMetrics = i.getIn(getState(), existingStatePath);
             const existingMetric = existingMetrics[metric.id];
 
-            const mergedMetric = {...existingMetric, ...cleanMetric};
+            const mergedMetric = {...existingMetric, ...updatedMetric};
 
             return i.assoc(existingMetrics, mergedMetric.id, mergedMetric);
         };
@@ -136,11 +134,10 @@ export const updateSegment = createThunkAction(UPDATE_SEGMENT, function(segment)
         const dependentRequestStatePaths = [['metadata', 'revisions', 'segment', segment.id]];
         const putData = async () => {
             const updatedSegment = await SegmentApi.update(segment);
-            const cleanSegment = cleanResource(updatedSegment);
             const existingSegments = i.getIn(getState(), existingStatePath);
             const existingSegment = existingSegments[segment.id];
 
-            const mergedSegment = {...existingSegment, ...cleanSegment};
+            const mergedSegment = {...existingSegment, ...updatedSegment};
 
             return i.assoc(existingSegments, mergedSegment.id, mergedSegment);
         };
@@ -221,11 +218,10 @@ export const updateDatabase = createThunkAction(UPDATE_DATABASE, function(databa
             const slimDatabase = _.omit(database, "tables", "tables_lookup");
             const updatedDatabase = await MetabaseApi.db_update(slimDatabase);
 
-            const cleanDatabase = cleanResource(updatedDatabase);
             const existingDatabases = i.getIn(getState(), existingStatePath);
             const existingDatabase = existingDatabases[database.id];
 
-            const mergedDatabase = {...existingDatabase, ...cleanDatabase};
+            const mergedDatabase = {...existingDatabase, ...updatedDatabase};
 
             return i.assoc(existingDatabases, mergedDatabase.id, mergedDatabase);
         };
@@ -257,11 +253,10 @@ export const updateTable = createThunkAction(UPDATE_TABLE, function(table) {
 
             const updatedTable = await MetabaseApi.table_update(slimTable);
 
-            const cleanTable = cleanResource(updatedTable);
             const existingTables = i.getIn(getState(), existingStatePath);
             const existingTable = existingTables[table.id];
 
-            const mergedTable = {...existingTable, ...cleanTable};
+            const mergedTable = {...existingTable, ...updatedTable};
 
             return i.assoc(existingTables, mergedTable.id, mergedTable);
         };
@@ -342,11 +337,10 @@ export const updateField = createThunkAction(UPDATE_FIELD, function(field) {
             const slimField = _.omit(field, "operators_lookup");
 
             const fieldMetadata = await MetabaseApi.field_update(slimField);
-            const cleanField = cleanResource(fieldMetadata);
             const existingFields = i.getIn(getState(), existingStatePath);
             const existingField = existingFields[field.id];
 
-            const mergedField = {...existingField, ...cleanField};
+            const mergedField = {...existingField, ...fieldMetadata};
 
             return i.assoc(existingFields, mergedField.id, mergedField);
         };

frontend/src/metabase/reference/reference.js

@@ -4,7 +4,6 @@ import {
     handleActions,
     createAction,
     createThunkAction,
-    cleanResource,
     fetchData
 } from 'metabase/lib/redux';
 
@@ -18,8 +17,7 @@ export const fetchGuide = createThunkAction(FETCH_GUIDE, (reload = false) => {
         const requestStatePath = ["reference", 'guide'];
         const existingStatePath = requestStatePath;
         const getData = async () => {
-            const guide = await GettingStartedApi.get();
-            return cleanResource(guide);
+            return await GettingStartedApi.get();
         };
 
         return await fetchData({

frontend/src/metabase/visualizations/PieChart.jsx

@@ -100,7 +100,7 @@ export default class PieChart extends Component {
         }
 
         let legendTitles = slices.map(slice => [
-            slice.key === "Other" ? slice.key : formatDimension(slice.key, false),
+            slice.key === "Other" ? slice.key : formatDimension(slice.key, true),
             settings["pie.show_legend_perecent"] ? formatPercent(slice.percentage) : undefined
         ]);
         let legendColors = slices.map(slice => slice.color);

frontend/src/metabase/visualizations/Table.jsx

@@ -40,6 +40,14 @@ export default class Bar extends Component {
         }
     }
 
+    cellClicked = (rowIndex, columnIndex, ...args) => {
+        this.props.cellClickedFn(rowIndex, this.state.columnIndexes[columnIndex], ...args);
+    }
+
+    cellIsClickable = (rowIndex, columnIndex, ...args) => {
+        return this.props.cellIsClickableFn(rowIndex, this.state.columnIndexes[columnIndex], ...args);
+    }
+
     _updateData({ data, settings }) {
         if (settings["table.pivot"]) {
             this.setState({
@@ -47,23 +55,24 @@ export default class Bar extends Component {
             });
         } else {
             const { cols, rows, columns } = data;
-            const colIndexes = settings["table.columns"]
+            const columnIndexes = settings["table.columns"]
                 .filter(f => f.enabled)
                 .map(f => _.findIndex(cols, (c) => c.name === f.name))
                 .filter(i => i >= 0 && i < cols.length);
 
             this.setState({
                 data: {
-                    cols: colIndexes.map(i => cols[i]),
-                    columns: colIndexes.map(i => columns[i]),
-                    rows: rows.map(row => colIndexes.map(i => row[i]))
+                    cols: columnIndexes.map(i => cols[i]),
+                    columns: columnIndexes.map(i => columns[i]),
+                    rows: rows.map(row => columnIndexes.map(i => row[i]))
                 },
+                columnIndexes
             });
         }
     }
 
     render() {
-        const { card, cellClickedFn, setSortFn, isDashboard, settings } = this.props;
+        const { card, cellClickedFn, cellIsClickableFn, setSortFn, isDashboard, settings } = this.props;
         const { data } = this.state;
         const sort = card.dataset_query.query && card.dataset_query.query.order_by || null;
         const isPivoted = settings["table.pivot"];
@@ -75,7 +84,8 @@ export default class Bar extends Component {
                 isPivoted={isPivoted}
                 sort={sort}
                 setSortFn={isPivoted ? undefined : setSortFn}
-                cellClickedFn={isPivoted ? undefined : cellClickedFn}
+                cellClickedFn={(!cellClickedFn || isPivoted) ? undefined : this.cellClicked}
+                cellIsClickableFn={(!cellIsClickableFn || isPivoted) ? undefined : this.cellIsClickable}
             />
         );
     }

frontend/src/metabase/visualizations/TableInteractive.css

+.PagingButtons {
+    border: 1px solid #ddd;
+}
+
+.TableInteractive-headerCellData {
+  font-weight: 700;
+}
+
+.TableInteractive-headerCellData:hover {
+    cursor: pointer;
+}
+
+.TableInteractive-headerCellData .Icon       { opacity: 0; }
+.TableInteractive-headerCellData:hover .Icon,
+.TableInteractive-headerCellData--sorted .Icon     {
+    opacity: 1;
+    transition: opacity .3s linear;
+}
+
+/* if the column is the one that is being sorted*/
+.TableInteractive-headerCellData--sorted {
+     color: var(--brand-color);
+}
+
+/* what follows is a war crime but such is the state of FE development */
+.TableInteractive {
+    border: 1px solid rgb(205, 205, 205);
+}
+.TableInteractive-header {
+    border-bottom: 1px solid rgb(205, 205, 205);
+    border-right: 1px solid rgb(205, 205, 205);
+    box-sizing: border-box;
+}
+
+.TableInteractive .TableInteractive-cellWrapper {
+    border-right: 1px solid #e8e8e8;
+    border-bottom: 1px solid #e8e8e8;
+    border-top: 1px solid transparent;
+    border-left: 1px solid transparent;
+
+    padding: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.TableInteractive.TableInteractive--pivot .TableInteractive-cellWrapper--firstColumn {
+    border-right: 1px solid rgb(205, 205, 205);
+}
+
+.TableInteractive .TableInteractive-cellWrapper:hover {
+    border-color: var(--brand-color);
+    color: var(--brand-color);
+}
+
+.TableInteractive .TableInteractive-header,
+.TableInteractive .TableInteractive-header .TableInteractive-cellWrapper {
+    background-color: #fff;
+    background-image: none;
+}
+
+.TableInteractive .TableInteractive-header,
+.TableInteractive .TableInteractive-header .TableInteractive-cellWrapper {
+    background-color: #fff;
+}
+
+.TableInteractive .TableInteractive-header .TableInteractive-cellWrapper:hover {
+    border-color: #e8e8e8;
+}
+
+/* cell overflow ellipsis */
+.TableInteractive .cellData {
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+}