Optimize pulse formatting

frontend/src/metabase-shared/color_selector.js

@@ -1,4 +1,8 @@
-import "babel-polyfill";
+// This runs in the Nashorn JavaScript engine and there are some limitations
+//
+// 1. This is not currently automatically built with the rest of the application, please run `yarn build-shared` after modifying
+// 2. Avoid including unecessary libraries as the JS engine takes a long time to parse and execute them
+// 3. Related to #2, we aren't currently including `babel-polyfill` so don't use features that require it, e.x. iterables / for-of
 
 import { makeCellBackgroundGetter } from "metabase/visualizations/lib/table_format";
 

frontend/src/metabase-shared/dependencies/d3.js

@@ -0,0 +1,9 @@
+// minimal set of d3 functions needed for color_selector.js
+
+import { scaleLinear } from "d3-scale";
+
+export default {
+  scale: {
+    linear: scaleLinear,
+  },
+};

frontend/src/metabase/visualizations/lib/table_format.js

@@ -1,5 +1,7 @@
+// NOTE: this file is used on the frontend and backend and there are some
+// limitations. See frontend/src/metabase-shared/color_selector for details
+
 import { alpha, getColorScale } from "metabase/lib/colors";
-import _ from "underscore";
 
 const CELL_ALPHA = 0.65;
 const ROW_ALPHA = 0.2;
@@ -10,21 +12,22 @@ export function makeCellBackgroundGetter(rows, cols, settings) {
   const pivot = settings["table.pivot"];
   let formatters = {};
   let rowFormatters = [];
+  const colIndexes = getColumnIndexesByName(cols);
   try {
-    const columnExtents = computeColumnExtents(formats, rows, cols);
+    const columnExtents = computeColumnExtents(formats, rows, colIndexes);
     formatters = compileFormatters(formats, columnExtents);
     rowFormatters = compileRowFormatters(formats, columnExtents);
   } catch (e) {
     console.error(e);
   }
-  const colIndexes = _.object(cols.map((col, index) => [col.name, index]));
-  if (Object.values(formatters).length === 0 && rowFormatters.length === 0) {
+  if (Object.keys(formatters).length === 0 && rowFormatters.length === 0) {
     return () => null;
   } else {
     return function(value, rowIndex, colName) {
       if (formatters[colName]) {
         // const value = rows[rowIndex][colIndexes[colName]];
-        for (const formatter of formatters[colName]) {
+        for (let i = 0; i < formatters[colName].length; i++) {
+          const formatter = formatters[colName][i];
           const color = formatter(value);
           if (color != null) {
             return color;
@@ -33,7 +36,8 @@ export function makeCellBackgroundGetter(rows, cols, settings) {
       }
       // don't highlight row for pivoted tables
       if (!pivot) {
-        for (const rowFormatter of rowFormatters) {
+        for (let i = 0; i < rowFormatters.length; i++) {
+          const rowFormatter = rowFormatters[i];
           const color = rowFormatter(rows[rowIndex], colIndexes);
           if (color != null) {
             return color;
@@ -44,6 +48,14 @@ export function makeCellBackgroundGetter(rows, cols, settings) {
   }
 }
 
+function getColumnIndexesByName(cols) {
+  const colIndexes = {};
+  for (let i = 0; i < cols.length; i++) {
+    colIndexes[cols[i].name] = i;
+  }
+  return colIndexes;
+}
+
 function compileFormatter(
   format,
   columnName,
@@ -123,45 +135,45 @@ function extent(rows, colIndex) {
   return [min, max];
 }
 
-function computeColumnExtents(formats, rows, cols) {
-  return _.chain(formats)
-    .map(format => format.columns)
-    .flatten()
-    .uniq()
-    .map(columnName => {
-      const colIndex = _.findIndex(cols, col => col.name === columnName);
-      return [columnName, extent(rows, colIndex)];
-    })
-    .object()
-    .value();
+function computeColumnExtents(formats, rows, colIndexes) {
+  const columnExtents = {};
+  formats.forEach(format => {
+    format.columns.forEach(columnName => {
+      if (!columnExtents[columnName]) {
+        const colIndex = colIndexes[columnName];
+        columnExtents[columnName] = extent(rows, colIndex);
+      }
+    });
+  });
+  return columnExtents;
 }
 
 function compileFormatters(formats, columnExtents) {
   const formatters = {};
-  for (const format of formats) {
-    for (const columnName of format.columns) {
+  formats.forEach(format => {
+    format.columns.forEach(columnName => {
       formatters[columnName] = formatters[columnName] || [];
       formatters[columnName].push(
         compileFormatter(format, columnName, columnExtents, false),
       );
-    }
-  }
+    });
+  });
   return formatters;
 }
 
 function compileRowFormatters(formats) {
   const rowFormatters = [];
-  for (const format of formats.filter(
-    format => format.type === "single" && format.highlight_row,
-  )) {
-    const formatter = compileFormatter(format, null, null, true);
-    if (formatter) {
-      for (const colName of format.columns) {
-        rowFormatters.push((row, colIndexes) =>
-          formatter(row[colIndexes[colName]]),
-        );
+  formats
+    .filter(format => format.type === "single" && format.highlight_row)
+    .forEach(format => {
+      const formatter = compileFormatter(format, null, null, true);
+      if (formatter) {
+        format.columns.forEach(columnName => {
+          rowFormatters.push((row, colIndexes) =>
+            formatter(row[colIndexes[columnName]]),
+          );
+        });
       }
-    }
-  }
+    });
   return rowFormatters;
 }

package.json

@@ -20,6 +20,7 @@
     "crossfilter": "^1.3.12",
     "cxs": "^5.0.0",
     "d3": "^3.5.17",
+    "d3-scale": "^2.1.0",
     "dc": "^2.0.0",
     "diff": "^3.2.0",
     "grid-styled": "^4.1.0",
@@ -159,44 +160,38 @@
     "webpack-postcss-tools": "^1.1.2"
   },
   "scripts": {
-    "dev":
-      "concurrently --kill-others -p name -n 'backend,frontend' -c 'blue,green' 'lein ring server' 'yarn build-hot'",
+    "dev": "concurrently --kill-others -p name -n 'backend,frontend' -c 'blue,green' 'lein ring server' 'yarn build-hot'",
     "lint": "yarn lint-eslint && yarn lint-prettier",
-    "lint-eslint":
-      "yarn && eslint --ext .js --ext .jsx --rulesdir frontend/lint/eslint-rules --max-warnings 0 frontend/src frontend/test",
-    "lint-prettier":
-      "yarn && prettier -l 'frontend/**/*.{js,jsx,css}' || (echo '\nThese files are not formatted correctly. Did you forget to \"yarn prettier\"?' && false)",
+    "lint-eslint": "yarn && eslint --ext .js --ext .jsx --rulesdir frontend/lint/eslint-rules --max-warnings 0 frontend/src frontend/test",
+    "lint-prettier": "yarn && prettier -l 'frontend/**/*.{js,jsx,css}' || (echo '\nThese files are not formatted correctly. Did you forget to \"yarn prettier\"?' && false)",
     "flow": "yarn && flow check",
     "test": "yarn test-unit && yarn test-integrated && yarn test-karma",
     "test-integrated": "./bin/build-for-test && yarn test-integrated-no-build",
     "test-integrated-watch": "yarn test-integrated --watch",
-    "test-integrated-no-build":
-      "yarn && babel-node ./frontend/test/__runner__/run_integrated_tests.js",
+    "test-integrated-no-build": "yarn && babel-node ./frontend/test/__runner__/run_integrated_tests.js",
     "test-unit": "yarn && jest --maxWorkers=8 --config jest.unit.conf.json",
     "test-unit-watch": "yarn test-unit --watch",
     "test-unit-update-snapshot": "yarn test-unit --updateSnapshot",
-    "test-karma":
-      "yarn && karma start frontend/test/karma.conf.js --single-run",
-    "test-karma-watch":
-      "yarn && karma start frontend/test/karma.conf.js --auto-watch --reporters nyan",
+    "test-karma": "yarn && karma start frontend/test/karma.conf.js --single-run",
+    "test-karma-watch": "yarn && karma start frontend/test/karma.conf.js --auto-watch --reporters nyan",
     "build": "yarn && webpack --bail",
     "build-watch": "yarn && webpack --watch",
     "build-hot": "yarn && NODE_ENV=hot webpack-dev-server --progress",
     "build-stats": "yarn && webpack --json > stats.json",
     "build-shared": "yarn && webpack --config webpack.shared.config.js",
     "start": "yarn build && lein ring server",
     "precommit": "lint-staged",
-    "preinstall":
-      "echo $npm_execpath | grep -q yarn || echo '\\033[0;33mSorry, npm is not supported. Please use Yarn (https://yarnpkg.com/).\\033[0m'",
+    "preinstall": "echo $npm_execpath | grep -q yarn || echo '\\033[0;33mSorry, npm is not supported. Please use Yarn (https://yarnpkg.com/).\\033[0m'",
     "prettier": "prettier --write 'frontend/**/*.{js,jsx,css}'",
-    "docs":
-      "documentation build -f html -o frontend/docs frontend/src/metabase-lib/lib/**",
+    "docs": "documentation build -f html -o frontend/docs frontend/src/metabase-lib/lib/**",
     "ci": "yarn ci-frontend && yarn ci-backend",
     "ci-frontend": "yarn lint && yarn flow && yarn test",
-    "ci-backend":
-      "lein docstring-checker && lein bikeshed && lein eastwood && lein test"
+    "ci-backend": "lein docstring-checker && lein bikeshed && lein eastwood && lein test"
   },
   "lint-staged": {
-    "frontend/**/*.{js,jsx,css}": ["prettier --write", "git add"]
+    "frontend/**/*.{js,jsx,css}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }