[WIP] Add support for Vega and Vega-lite

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+build
+dist
+viz-lib/lib

.gitignore

@@ -25,3 +25,6 @@ npm-debug.log
 
 client/cypress/screenshots
 client/cypress/videos
+
+client/app/assets/less/**/*.css
+client/app/visualizations/vega/vega.css

babel.config.js

@@ -0,0 +1,35 @@
+module.exports = api => {
+  // This caches the Babel config by environment.
+  api.cache.using(() => process.env.NODE_ENV);
+  return {
+    sourceMaps: true,
+    sourceType: "module",
+    retainLines: true,
+    presets: [
+      [
+        "@babel/preset-env",
+        {
+          exclude: [
+            "@babel/plugin-transform-async-to-generator",
+            "@babel/plugin-transform-arrow-functions"
+          ],
+          useBuiltIns: "usage",
+          corejs: { version: 3, proposals: true }
+        }
+      ],
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ],
+    plugins: [
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-transform-object-assign",
+      [
+        "babel-plugin-transform-builtin-extend",
+        {
+          globals: ["Error"]
+        }
+      ],
+      api.env("development") && "react-refresh/babel"
+    ].filter(Boolean)
+  };
+};

client/app/components/DialogWrapper.jsx

@@ -215,10 +215,15 @@ function openDialog(DialogComponent, props) {
 }
 
 export function wrap(DialogComponent) {
-  return {
-    Component: DialogComponent,
-    showModal: props => openDialog(DialogComponent, props),
-  };
+  function WrappedComponent(props) {
+    return <DialogComponent {...props} />;
+  }
+  WrappedComponent.Component = DialogComponent;
+  WrappedComponent.showModal = props => openDialog(DialogComponent, props);
+  // Must return a React component, too, otherwise it will fail `isReactRefreshBoundary`
+  // test, breaking hot refresh for modules that export the wrapped component.
+  // Ref: https://github.com/facebook/react/issues/16604#issuecomment-528663101
+  return WrappedComponent;
 }
 
 export default {

client/app/components/PermissionsEditorDialog/index.jsx

@@ -80,15 +80,15 @@ function UserSelect({ onSelect, shouldShowUser }) {
   const [users, setUsers] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
 
-  const debouncedSearchUsers = useCallback(
-    debounce(
+  const debouncedSearchUsers = debounce(
+    useCallback(
       search =>
         searchUsers(search)
           .then(setUsers)
           .finally(() => setLoadingUsers(false)),
-      DEBOUNCE_SEARCH_DURATION
+      []
     ),
-    []
+    DEBOUNCE_SEARCH_DURATION
   );
 
   useEffect(() => {

client/app/components/dashboards/ExpandedWidgetDialog.jsx

@@ -19,6 +19,7 @@ function ExpandedWidgetDialog({ dialog, widget }) {
       footer={<Button onClick={dialog.dismiss}>Close</Button>}>
       <VisualizationRenderer
         visualization={widget.visualization}
+        query={widget.getQuery()}
         queryResult={widget.getQueryResult()}
         context="widget"
       />

client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx

@@ -25,8 +25,9 @@ function visualizationWidgetMenuOptions({ widget, canEditDashboard, onParameters
   const widgetQueryResult = widget.getQueryResult();
   const isQueryResultEmpty = !widgetQueryResult || !widgetQueryResult.isEmpty || widgetQueryResult.isEmpty();
 
-  const downloadLink = fileType => widgetQueryResult.getLink(widget.getQuery().id, fileType);
-  const downloadName = fileType => widgetQueryResult.getName(widget.getQuery().name, fileType);
+  const query = widget.getQuery();
+  const downloadLink = fileType => query.getDataUrl(fileType);
+  const downloadName = fileType => widgetQueryResult.getName(query.name, fileType);
   return compact([
     <Menu.Item key="download_csv" disabled={isQueryResultEmpty}>
       {!isQueryResultEmpty ? (
@@ -256,6 +257,7 @@ class VisualizationWidget extends React.Component {
         return (
           <div className="body-row-auto scrollbox">
             <VisualizationRenderer
+              query={widget.getQuery()}
               visualization={widget.visualization}
               queryResult={widgetQueryResult}
               filters={filters}

client/app/components/visualizations/EditVisualizationDialog.jsx

@@ -201,6 +201,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
             <Editor
               type={type}
               data={data}
+              query={query}
               options={options}
               visualizationName={name}
               onOptionsChange={onOptionsChanged}
@@ -214,9 +215,11 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
           <Filters filters={filters} onChange={setFilters} />
           <div className="scrollbox" data-test="VisualizationPreview">
             <Renderer
+              context="editor"
               type={type}
-              data={filteredData}
               options={options}
+              data={filteredData}
+              query={query}
               visualizationName={name}
               onOptionsChange={onOptionsChanged}
             />

client/app/components/visualizations/VisualizationRenderer.jsx

@@ -65,6 +65,8 @@ export default function VisualizationRenderer(props) {
       type={visualization.type}
       options={options}
       data={filteredData}
+      query={props.query}
+      context={props.context}
       visualizationName={visualization.name}
       addonBefore={showFilters && <Filters filters={filters} onChange={setFilters} />}
     />
@@ -74,6 +76,7 @@ export default function VisualizationRenderer(props) {
 VisualizationRenderer.propTypes = {
   visualization: VisualizationType.isRequired,
   queryResult: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  query: PropTypes.object,
   filters: FiltersType,
   showFilters: PropTypes.bool,
   context: PropTypes.oneOf(["query", "widget"]).isRequired,

client/app/components/visualizations/visualizationComponents.jsx

@@ -30,6 +30,7 @@ function wrapComponentWithSettings(WrappedComponent) {
         "tableCellMaxJSONSize",
         "allowCustomJSVisualizations",
         "hidePlotlyModeBar",
+        "basePath",
       ]),
     });
 

client/app/pages/admin/Jobs.jsx

@@ -14,7 +14,7 @@ import location from "@/services/location";
 import recordEvent from "@/services/recordEvent";
 import routes from "@/services/routes";
 
-class Jobs extends React.Component {
+export default class Jobs extends React.Component {
   state = {
     activeTab: location.hash,
     isLoading: true,

client/app/pages/admin/OutdatedQueries.jsx

@@ -21,7 +21,7 @@ import { Query } from "@/services/query";
 import recordEvent from "@/services/recordEvent";
 import routes from "@/services/routes";
 
-class OutdatedQueries extends React.Component {
+export default class OutdatedQueries extends React.Component {
   static propTypes = {
     controller: ControllerType.isRequired,
   };

client/app/pages/admin/SystemStatus.jsx

@@ -12,7 +12,7 @@ import routes from "@/services/routes";
 
 import "./system-status.less";
 
-class SystemStatus extends React.Component {
+export default class SystemStatus extends React.Component {
   static propTypes = {
     onError: PropTypes.func,
   };

client/app/pages/alert/AlertView.jsx

@@ -17,7 +17,7 @@ import Rearm from "./components/Rearm";
 import Query from "./components/Query";
 import AlertDestinations from "./components/AlertDestinations";
 import HorizontalFormItem from "./components/HorizontalFormItem";
-import { STATE_CLASS } from "../alerts/AlertsList";
+import { STATE_CLASS } from "../alerts/constants";
 
 function AlertState({ state, lastTriggered }) {
   return (

client/app/pages/alerts/AlertsList.jsx

@@ -15,12 +15,7 @@ import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTab
 import Alert from "@/services/alert";
 import { currentUser } from "@/services/auth";
 import routes from "@/services/routes";
-
-export const STATE_CLASS = {
-  unknown: "label-warning",
-  ok: "label-success",
-  triggered: "label-danger",
-};
+import { STATE_CLASS } from "./constants";
 
 class AlertsList extends React.Component {
   static propTypes = {
@@ -143,3 +138,5 @@ routes.register(
     render: pageProps => <AlertsListPage {...pageProps} currentPage="alerts" />,
   })
 );
+
+export default AlertsListPage;

client/app/pages/alerts/constants.ts

@@ -0,0 +1,5 @@
+export const STATE_CLASS = {
+  unknown: "label-warning",
+  ok: "label-success",
+  triggered: "label-danger",
+};

client/app/pages/dashboards/DashboardList.jsx

@@ -171,3 +171,5 @@ routes.register(
     render: pageProps => <DashboardListPage {...pageProps} currentPage="favorites" />,
   })
 );
+
+export default DashboardListPage;

client/app/pages/dashboards/DashboardPage.jsx

@@ -147,7 +147,7 @@ DashboardComponent.propTypes = {
   dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-function DashboardPage({ dashboardSlug, dashboardId, onError }) {
+export default function DashboardPage({ dashboardSlug, dashboardId, onError }) {
   const [dashboard, setDashboard] = useState(null);
   const handleError = useImmutableCallback(onError);
 

client/app/pages/dashboards/PublicDashboardPage.jsx

@@ -55,7 +55,7 @@ PublicDashboard.propTypes = {
   dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-class PublicDashboardPage extends React.Component {
+export default class PublicDashboardPage extends React.Component {
   static propTypes = {
     token: PropTypes.string.isRequired,
     onError: PropTypes.func,

client/app/pages/data-sources/DataSourcesList.jsx

@@ -174,3 +174,5 @@ routes.register(
     render: pageProps => <DataSourcesListPage {...pageProps} isNewDataSourcePage />,
   })
 );
+
+export default DataSourcesListPage;

client/app/pages/data-sources/EditDataSource.jsx

@@ -150,3 +150,5 @@ routes.register(
     render: pageProps => <EditDataSourcePage {...pageProps} />,
   })
 );
+
+export default EditDataSourcePage;

client/app/pages/destinations/DestinationsList.jsx

@@ -157,3 +157,5 @@ routes.register(
     render: pageProps => <DestinationsListPage {...pageProps} isNewDestinationPage />,
   })
 );
+
+export default DestinationsListPage;

client/app/pages/destinations/EditDestination.jsx

@@ -117,3 +117,5 @@ routes.register(
     render: pageProps => <EditDestinationPage {...pageProps} />,
   })
 );
+
+export default EditDestinationPage;

client/app/pages/groups/GroupDataSources.jsx

@@ -253,3 +253,5 @@ routes.register(
     render: pageProps => <GroupDataSourcesPage {...pageProps} currentPage="datasources" />,
   })
 );
+
+export default GroupDataSourcesPage;

client/app/pages/groups/GroupMembers.jsx

@@ -216,3 +216,5 @@ routes.register(
     render: pageProps => <GroupMembersPage {...pageProps} currentPage="users" />,
   })
 );
+
+export default GroupMembersPage;

client/app/pages/groups/GroupsList.jsx

@@ -158,3 +158,5 @@ routes.register(
     render: pageProps => <GroupsListPage {...pageProps} currentPage="groups" />,
   })
 );
+
+export default GroupsListPage;

client/app/pages/home/Home.jsx

@@ -151,7 +151,7 @@ function DashboardAndQueryFavoritesList() {
   );
 }
 
-function Home() {
+export default function Home() {
   useEffect(() => {
     recordEvent("view", "page", "personal_homepage");
   }, []);

client/app/pages/queries-list/QueriesList.jsx

@@ -218,3 +218,5 @@ routes.register(
     render: pageProps => <QueriesListPage {...pageProps} currentPage="my" />,
   })
 );
+
+export default QueriesListPage;

client/app/pages/queries/QuerySource.jsx

@@ -372,6 +372,7 @@ function QuerySource(props) {
                     <QueryVisualizationTabs
                       queryResult={queryResult}
                       visualizations={query.visualizations}
+                      query={query}
                       showNewVisualizationButton={queryFlags.canEdit && queryResultData.status === ExecutionStatus.DONE}
                       canDeleteVisualizations={queryFlags.canEdit}
                       selectedTab={selectedVisualization}
@@ -434,3 +435,5 @@ routes.register(
     bodyClass: "fixed-layout",
   })
 );
+
+export default QuerySourcePage;

client/app/pages/queries/QueryView.jsx

@@ -155,6 +155,7 @@ function QueryView(props) {
           {loadedInitialResults && (
             <QueryVisualizationTabs
               queryResult={queryResult}
+              query={query}
               visualizations={query.visualizations}
               showNewVisualizationButton={queryFlags.canEdit && queryResultData.status === ExecutionStatus.DONE}
               canDeleteVisualizations={queryFlags.canEdit}
@@ -227,3 +228,5 @@ routes.register(
     render: pageProps => <QueryViewPage {...pageProps} />,
   })
 );
+
+export default QueryViewPage;

client/app/pages/queries/VisualizationEmbed.jsx

@@ -153,7 +153,7 @@ VisualizationEmbedFooter.defaultProps = {
   apiKey: null,
 };
 
-function VisualizationEmbed({ queryId, visualizationId, apiKey, onError }) {
+export default function VisualizationEmbed({ queryId, visualizationId, apiKey, onError }) {
   const [query, setQuery] = useState(null);
   const [error, setError] = useState(null);
   const [refreshStartedAt, setRefreshStartedAt] = useState(null);
@@ -235,7 +235,12 @@ function VisualizationEmbed({ queryId, visualizationId, apiKey, onError }) {
         )}
         {error && <div className="alert alert-danger" data-test="ErrorMessage">{`Error: ${error}`}</div>}
         {!error && queryResults && (
-          <VisualizationRenderer visualization={visualization} queryResult={queryResults} context="widget" />
+          <VisualizationRenderer
+            visualization={visualization}
+            queryResult={queryResults}
+            context="widget"
+            query={query}
+          />
         )}
         {!queryResults && refreshStartedAt && (
           <div className="d-flex justify-content-center">