Superset ObservableHQ Plugin

plugins/plugin-chart-observable/README.md

@@ -0,0 +1,33 @@
+## @superset-ui/plugin-chart-observable
+
+[![Version](https://img.shields.io/npm/v/@superset-ui/plugin-chart-observable.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/plugin-chart-observable.svg?style=flat-square)
+[![David (path)](https://img.shields.io/david/apache-superset/superset-ui-plugins.svg?path=packages%2Fsuperset-ui-plugin-chart-observable&style=flat-square)](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-plugin-chart-observable)
+
+This plugin provides Word Cloud for Superset.
+
+### Usage
+
+Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
+lookup this chart throughout the app.
+
+```js
+import ObservableChartPlugin from '@superset-ui/legacy-plugin-chart-observable';
+
+new ObservableChartPlugin().configure({ key: 'observable' }).register();
+```
+
+Then use it via `SuperChart`. See
+[storybook](https://apache-superset.github.io/superset-ui-plugins/?selectedKind=plugin-chart-observable)
+for more details.
+
+```js
+<SuperChart
+  chartType="observable"
+  width={600}
+  height={600}
+  formData={...}
+  queryData={{
+    data: {...},
+  }}
+/>
+```

plugins/plugin-chart-observable/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@superset-ui/plugin-chart-observable",
+  "version": "0.13.21",
+  "description": "Superset Chart Plugin - Observable",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui.git"
+  },
+  "keywords": [
+    "superset"
+  ],
+  "author": "Superset",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui/issues"
+  },
+  "homepage": "https://github.com/apache-superset/superset-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@observablehq/runtime": "^4.7.0",
+    "@types/d3-cloud": "^1.2.1",
+    "@types/d3-scale": "^2.0.2",
+    "@types/react": "^16.3.0",
+    "@types/react-redux": "^7.1.9",
+    "d3-cloud": "^1.2.5",
+    "d3-scale": "^3.0.1",
+    "emotion-theming": "^10.0.27",
+    "encodable": "^0.3.3",
+    "redux-test-utils": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@superset-ui/chart": "^0.13.0",
+    "@superset-ui/color": "^0.13.0",
+    "@superset-ui/query": "^0.13.0",
+    "@superset-ui/style": "^0.13.11",
+    "@superset-ui/translation": "^0.13.0",
+    "@superset-ui/validator": "^0.13.0",
+    "react": "^16.3.0",
+    "react-redux": "^5.0.2"
+  }
+}

plugins/plugin-chart-observable/src/buildQuery.ts

@@ -0,0 +1,11 @@
+import { buildQueryContext } from '@superset-ui/query';
+import { ObservableFormData } from './types';
+
+export default function buildQuery(formData: ObservableFormData) {
+  // Set the single QueryObject's groupby field with series in formData
+  return buildQueryContext(formData, baseQueryObject => [
+    {
+      ...baseQueryObject,
+    },
+  ]);
+}

plugins/plugin-chart-observable/src/chart/Observable.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { PlainObject } from 'encodable';
+import { SupersetThemeProps } from '@superset-ui/style';
+import ObservableLoader from './ObservableLoader';
+
+/**
+ * These props should be stored when saving the chart.
+ */
+export interface ObservableVisualProps {
+  observableUrl: string;
+  displayedCells: string[];
+  dataInjectionCell: string;
+  showDebug: boolean;
+}
+
+export interface ObservableProps extends ObservableVisualProps {
+  data: PlainObject[];
+  height: number;
+  width: number;
+}
+
+class Observable extends React.PureComponent<ObservableProps & SupersetThemeProps> {
+  render() {
+    const {
+      width,
+      height,
+      data,
+      observableUrl,
+      displayedCells,
+      dataInjectionCell,
+      showDebug,
+    } = this.props;
+
+    return (
+      <div>
+        <ObservableLoader
+          observableUrl={observableUrl}
+          data={data}
+          displayedCells={displayedCells}
+          dataInjectionCell={dataInjectionCell}
+          width={width}
+          height={height}
+        >
+          {showDebug && (
+            <div>
+              <h2>Data</h2>
+              <pre>{JSON.stringify(data, undefined, 2)}</pre>
+            </div>
+          )}
+        </ObservableLoader>
+      </div>
+    );
+  }
+}
+
+export default Observable;

plugins/plugin-chart-observable/src/chart/ObservableLoader.tsx

@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import { connect } from 'react-redux';
+// @ts-ignore
+import { Runtime, Inspector } from '@observablehq/runtime';
+
+interface Props {
+  observableUrl: string;
+  data: any;
+  displayedCells: string[];
+  dataInjectionCell: string;
+  broadcastCells: Function;
+  selectControlOptions: string[];
+  width: number;
+  height: number;
+  children: React.ReactNode;
+}
+
+class ObservableLoader extends Component<Props> {
+  notebookWrapperRef = React.createRef<HTMLDivElement>();
+
+  displayRefs: { [key: string]: HTMLDivElement | null } = {};
+
+  notebook = null;
+
+  dataCell = {
+    value: null,
+  };
+
+  get notebookURL() {
+    const notebookName = this.props.observableUrl.replace(/.*:\/\/observablehq.com\//gim, '');
+    return `https://api.observablehq.com/${notebookName}.js?v=3`;
+  }
+
+  componentDidMount() {
+    import(/* webpackIgnore: true */ this.notebookURL).then(module => {
+      this.notebook = module.default;
+
+      const runtime = new Runtime();
+      let notebookModule = null;
+
+      if (this.props.displayedCells.length === 0) {
+        // render the entrire notebook if no displayedCells selected
+        notebookModule = runtime.module(
+          this.notebook,
+          Inspector.into(this.notebookWrapperRef.current),
+        );
+      } else {
+        notebookModule = runtime.module(this.notebook, (name: string) => {
+          // render selected cells
+          if (this.props.displayedCells.includes(name) && this.displayRefs[name] !== null) {
+            return new Inspector(this.displayRefs[name]);
+          }
+          return null;
+        });
+      }
+
+      // gather cell names
+      // eslint-disable-next-line no-underscore-dangle
+      const cellNames = Array.from<any[]>(notebookModule._scope).map((item: any[]) => item[0]);
+      if (!this.props.selectControlOptions) {
+        this.props.broadcastCells(cellNames);
+      }
+
+      // inject the data
+      if (this.props.dataInjectionCell.length > 0) {
+        notebookModule.redefine(this.props.dataInjectionCell, [], this.props.data);
+      }
+      // define height
+      notebookModule.redefine('width', [], this.props.width);
+    });
+  }
+
+  render() {
+    const wrapperStyles = {
+      overflow: 'auto',
+      width: this.props.width,
+      height: this.props.height,
+    };
+    return (
+      <div style={wrapperStyles}>
+        <div ref={this.notebookWrapperRef} className="notebook-wrapper">
+          {this.props.displayedCells.map(name => (
+            <div
+              ref={ref => {
+                this.displayRefs[name] = ref;
+              }}
+              key={name}
+              id={`cell-${name}`}
+            />
+          ))}
+        </div>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+function overwriteSelectControlOptions(selectControlOptions: string[]) {
+  return { type: 'OVERWRITE_SELECT_CONTROL_OPTIONS', selectControlOptions };
+}
+
+function mapSateToProps(state: any) {
+  return {
+    selectControlOptions: state.explore.selectControlOptions,
+  };
+}
+
+function mapDispatchToProps(dispatch: Function) {
+  return {
+    broadcastCells: (cellList: string[]) => dispatch(overwriteSelectControlOptions(cellList)),
+  };
+}
+export default connect(mapSateToProps, mapDispatchToProps)(ObservableLoader);

plugins/plugin-chart-observable/src/controlPanel.ts

@@ -0,0 +1,128 @@
+// @ts-nocheck
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t } from '@superset-ui/translation';
+import { validateNonEmpty } from '@superset-ui/validator';
+
+// type State = unknown;
+
+export default {
+  controlPanelSections: [
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [['series'], ['metric'], ['adhoc_filters'], ['row_limit', null]],
+    },
+    {
+      label: t('Options'),
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'observable_url',
+            config: {
+              type: 'TextControl',
+              label: t('Observable URL'),
+              description: t('URL of the Observable HQ workbook you wish to add in'),
+              renderTrigger: true,
+              clearable: true,
+            },
+          },
+        ],
+        [
+          {
+            name: 'displayed_cells',
+            config: {
+              type: 'SelectControl',
+              multi: true,
+              label: t('Displayed Cells'),
+              default: [],
+              description: t(
+                'Select the cells from your Observable notebook that you wish to display on the Dashboard',
+              ),
+              // optionRenderer: c => <ColumnOption showType column={c} />,
+              // valueRenderer: c => <ColumnOption column={c} />,
+              valueKey: 'name',
+              allowAll: true,
+              mapStateToProps: (explore: unknown) => {
+                return {
+                  options: explore.selectControlOptions
+                    ? explore.selectControlOptions.map((option: string) => ({ name: option }))
+                    : [],
+                };
+              },
+              freeForm: true,
+              renderTrigger: true,
+            },
+          },
+        ],
+        [
+          {
+            name: 'data_injection_cell',
+            config: {
+              type: 'SelectControl',
+              label: t('Data Injection Cell'),
+              default: [],
+              description: t(
+                'Select the cell from your Observable notebook into which you wish to insert your data',
+              ),
+              // optionRenderer: c => <ColumnOption showType column={c} />,
+              // valueRenderer: c => <ColumnOption column={c} />,
+              valueKey: 'name',
+              // allowAll: true,
+              mapStateToProps: (explore: unknown) => {
+                return {
+                  options: explore.selectControlOptions
+                    ? explore.selectControlOptions.map((option: string) => ({ name: option }))
+                    : [],
+                };
+              },
+              options: [{ name: 'observable' }, { name: 'rawData' }, { name: 'control' }],
+              // commaChoosesOption: false,
+              // freeForm: true,
+              renderTrigger: true,
+            },
+          },
+        ],
+        [
+          {
+            name: 'show_debug',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Debug'),
+              renderTrigger: true,
+              default: true,
+              description: t('Show the data used to render your Observable'),
+            },
+          },
+        ],
+      ],
+    },
+  ],
+  controlOverrides: {
+    series: {
+      validators: [validateNonEmpty],
+      clearable: false,
+      multi: true,
+    },
+    metric: {
+      multi: true,
+    },
+  },
+};