Release (#1089)

* refactor: simplify button code by removing editor-button class

* chore(deps-dev): bump postcss from 8.3.6 to 8.3.8 (#1085)

Bumps [postcss](https://github.com/postcss/postcss) from 8.3.6 to 8.3.8.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](postcss/postcss@8.3.6...8.3.8)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump webpack from 5.53.0 to 5.56.0 (#1084)

Bumps [webpack](https://github.com/webpack/webpack) from 5.53.0 to 5.56.0.
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](webpack/webpack@v5.53.0...v5.56.0)

---
updated-dependencies:
- dependency-name: webpack
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump monaco-editor-webpack-plugin from 4.1.2 to 4.2.0 (#1082)

Bumps [monaco-editor-webpack-plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin) from 4.1.2 to 4.2.0.
- [Release notes](https://github.com/Microsoft/monaco-editor-webpack-plugin/releases)
- [Commits](microsoft/monaco-editor-webpack-plugin@v4.1.2...v4.2.0)

---
updated-dependencies:
- dependency-name: monaco-editor-webpack-plugin
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump d3-scale from 4.0.1 to 4.0.2 (#1081)

Bumps [d3-scale](https://github.com/d3/d3-scale) from 4.0.1 to 4.0.2.
- [Release notes](https://github.com/d3/d3-scale/releases)
- [Commits](d3/d3-scale@v4.0.1...v4.0.2)

---
updated-dependencies:
- dependency-name: d3-scale
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump webpack-dev-server from 4.2.1 to 4.3.0 (#1079)

Bumps [webpack-dev-server](https://github.com/webpack/webpack-dev-server) from 4.2.1 to 4.3.0.
- [Release notes](https://github.com/webpack/webpack-dev-server/releases)
- [Changelog](https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md)
- [Commits](webpack/webpack-dev-server@v4.2.1...v4.3.0)

---
updated-dependencies:
- dependency-name: webpack-dev-server
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump d3-array from 3.0.4 to 3.1.0 (#1077)

Bumps [d3-array](https://github.com/d3/d3-array) from 3.0.4 to 3.1.0.
- [Release notes](https://github.com/d3/d3-array/releases)
- [Commits](d3/d3-array@v3.0.4...v3.1.0)

---
updated-dependencies:
- dependency-name: d3-array
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump @types/react from 17.0.24 to 17.0.26 (#1076)

Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 17.0.24 to 17.0.26.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react)

---
updated-dependencies:
- dependency-name: "@types/react"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump autoprefixer from 10.3.4 to 10.3.6 (#1080)

Bumps [autoprefixer](https://github.com/postcss/autoprefixer) from 10.3.4 to 10.3.6.
- [Release notes](https://github.com/postcss/autoprefixer/releases)
- [Changelog](https://github.com/postcss/autoprefixer/blob/main/CHANGELOG.md)
- [Commits](postcss/autoprefixer@10.3.4...10.3.6)

---
updated-dependencies:
- dependency-name: autoprefixer
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @types/react-select from 4.0.17 to 5.0.1 (#1078)

* chore(deps): bump actions/setup-node from 2.4.0 to 2.4.1 (#1075)

* Add Runtime Dataflow Viewer (#1023)

Co-authored-by: chengluyu <[email protected]>
Co-authored-by: JackZ <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Saul Shanabrook <[email protected]>
Co-authored-by: chengluyu <[email protected]>
Co-authored-by: JackZ <[email protected]>

.github/workflows/publish.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/[email protected].0
+      - uses: actions/[email protected].1
         with:
           registry-url: "https://registry.npmjs.org"
       - name: Install Node dependencies

.github/workflows/test.yml

@@ -1,6 +1,10 @@
 name: Test
 
-on: [push]
+on:
+  push:
+    branches:
+      - master
+  pull_request:
 
 jobs:
   publish:
@@ -11,7 +15,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: actions/[email protected].0
+      - uses: actions/[email protected].1
         with:
           node-version: 15
 

package.json

@@ -4,40 +4,49 @@
   "private": true,
   "license": "BSD-3-Clause",
   "devDependencies": {
-    "@types/react-select": "^4.0.17",
+    "@types/react-select": "^5.0.1",
     "autoprefixer": "^10.3.4",
+    "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.3.0",
+    "eslint-plugin-prettier": "4.0.0",
     "gh-pages": "^3.2.3",
     "html-webpack-plugin": "^5.3.2",
     "husky": "^7.0.2",
     "lint-staged": "^11.1.2",
-    "monaco-editor-webpack-plugin": "^4.1.2",
+    "monaco-editor-webpack-plugin": "^4.2.0",
     "patch-package": "^6.4.7",
-    "postcss": "^8.3.6",
+    "postcss": "^8.3.8",
     "postcss-loader": "^6.1.1",
     "style-loader": "^3.3.0",
     "ts-loader": "^9.2.6",
     "typescript": "^4.4.3",
     "vega-lite-dev-config": "^0.18.0",
-    "webpack": "^5.53.0",
+    "webpack": "^5.56.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.1"
+    "webpack-dev-server": "^4.3.0"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.1",
+    "@tippyjs/react": "^4.2.5",
+    "@types/cytoscape": "^3.14.17",
     "@types/d3": "^7.0.0",
-    "@types/react": "^17.0.24",
+    "@types/react": "^17.0.26",
     "@types/react-redux": "^7.1.18",
     "@types/semver": "^7.3.8",
     "ajv": "^8.6.3",
     "ajv-formats": "^2.1.1",
-    "d3-array": "^3.0.4",
+    "cytoscape": "^3.19.0",
+    "cytoscape-popper": "^2.0.0",
+    "d3-array": "^3.1.0",
     "d3-geo-projection": "^4.0.0",
-    "d3-scale": "^4.0.1",
+    "d3-scale": "^4.0.2",
+    "elkjs": "^0.7.1",
     "history": "^5.0.1",
     "json-stringify-pretty-compact": "^3.0.0",
     "lz-string": "^1.4.4",
     "monaco-editor": "^0.27.0",
+    "prettier": "^2.1.x",
     "prop-types": "^15.7.2",
     "rc-resize-observer": "^1.0.1",
     "react": "^17.0.2",
@@ -51,18 +60,19 @@
     "react-router-dom": "^5.3.0",
     "react-select": "^4.3.1",
     "react-split-pane": "^0.1.92",
-    "react-tooltip": "^4.2.21",
     "redux": "^4.1.1",
     "redux-localstorage": "^0.4.1",
     "redux-thunk": "^2.3.0",
+    "tippy.js": "^6.3.1",
     "tslib": "^2.3.1",
     "vega-cli": "5.21.0",
     "vega-datasets": "^2.2.0",
     "vega-embed": "^6.19.1",
     "vega-lite": "5.1.1",
     "vega-schema-url-parser": "^2.2.0",
     "vega-themes": "^2.10.0",
-    "vega-tooltip": "^0.27.0"
+    "vega-tooltip": "^0.27.0",
+    "vega-typings": "^0.22.1"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

src/actions/editor.ts

@@ -1,6 +1,5 @@
 import * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import {Renderers, Spec} from 'vega';
-import {TopLevelSpec} from 'vega-lite/src/spec';
+import {Renderers, Runtime} from 'vega';
 import {Mode, View} from '../constants';
 
 export const RECEIVE_CURRENT_USER = 'RECEIVE_CURRENT_USER' as const;

src/components/app.css

@@ -98,9 +98,7 @@ html {
   display: none;
 }
 
-button,
-.editor-button {
-  cursor: pointer;
+button {
   padding: 0.3em 1em;
   border-style: solid;
   border-width: 1px;
@@ -113,34 +111,24 @@ button,
   justify-content: center;
   align-items: center;
   font-size: 0.9em;
-}
-
-.editor-button {
-  user-select: none;
-  margin-right: 8px;
+  cursor: pointer;
 }
 
 button:hover,
-.editor-button:hover,
-button:focus,
-.editor-button:focus {
+button:focus {
   border-color: hsl(0, 0%, 70%);
 }
 
-.editor-button:focus {
-  outline: 0;
-}
-
-button:active,
-.editor-button:active {
+button:active {
   border-color: hsl(0, 0%, 40%);
 }
 
-button:disabled,
-.editor-button:disabled {
+button:disabled {
   opacity: 0.7;
   background-color: var(--light-gray-color);
   color: var(--extra-dark-gray-color);
+  cursor: default;
+  border-color: hsl(0, 0%, 80%);
 }
 
 /* Scrollbar Styles */

src/components/header/share-modal/index.css

@@ -4,13 +4,17 @@
   padding: 2em 0;
 }
 
-.sharing-buttons .editor-button svg {
+.sharing-buttons button svg {
   width: 22px;
   height: 22px;
   stroke: var(--black-color);
   padding-right: 5px;
 }
 
+.sharing-buttons button {
+  margin-right: 8px;
+}
+
 .user-pref {
   display: flex;
   align-items: center;

src/components/header/share-modal/renderer.tsx

@@ -259,20 +259,20 @@ class ShareModal extends React.PureComponent<Props, State> {
           </label>
         </div>
         <div className="sharing-buttons">
-          <button className="editor-button" onClick={() => this.previewURL()}>
+          <button onClick={() => this.previewURL()}>
             <Link />
             <span>Open Link</span>
           </button>
           <Clipboard
-            className="editor-button copy-icon"
+            className="copy-icon"
             data-clipboard-text={this.state.generatedURL}
             onSuccess={this.onCopy.bind(this)}
           >
             <Copy />
             <span>Copy Link to Clipboard</span>
           </Clipboard>
           <Clipboard
-            className="editor-button copy-icon"
+            className="copy-icon"
             data-clipboard-text={`[Open the Chart in the Vega Editor](${this.state.generatedURL})`}
             onSuccess={this.onCopy.bind(this)}
           >
@@ -330,15 +330,14 @@ class ShareModal extends React.PureComponent<Props, State> {
               )}
               <div className="sharing-buttons">
                 <button
-                  className="editor-button"
                   onClick={this.updateGist.bind(this)}
                   disabled={!this.state.gistFileNameSelected || this.state.updating}
                 >
                   <Save />
                   {this.state.updating ? 'Updating...' : 'Update'}
                 </button>
                 {this.state.gistEditorURL && this.state.updating !== undefined && (
-                  <Clipboard className="editor-button copy-icon" data-clipboard-text={this.state.gistEditorURL}>
+                  <Clipboard className="copy-icon" data-clipboard-text={this.state.gistEditorURL}>
                     <Copy />
                     <span>Copy Link to Clipboard</span>
                   </Clipboard>
@@ -389,12 +388,12 @@ class ShareModal extends React.PureComponent<Props, State> {
                 </label>
               </div>
               <div className="sharing-buttons">
-                <button className="editor-button" onClick={this.createGist.bind(this)} disabled={this.state.creating}>
+                <button onClick={this.createGist.bind(this)} disabled={this.state.creating}>
                   <Save />
                   {this.state.creating ? 'Creating...' : 'Create'}
                 </button>
                 {this.state.gistEditorURL && this.state.creating !== undefined && (
-                  <Clipboard className="editor-button copy-icon" data-clipboard-text={this.state.gistEditorURL}>
+                  <Clipboard className="copy-icon" data-clipboard-text={this.state.gistEditorURL}>
                     <Copy />
                     <span>Copy Link to Clipboard</span>
                   </Clipboard>

src/components/input-panel/compiled-spec-header/index.tsx

@@ -5,8 +5,8 @@ import {connect} from 'react-redux';
 import {RouteComponentProps, withRouter} from 'react-router-dom';
 import {bindActionCreators, Dispatch} from 'redux';
 import * as EditorActions from '../../../actions/editor';
-import {State} from '../../../constants/default-state';
 import {COMPILEDPANE} from '../../../constants';
+import {State} from '../../../constants/default-state';
 
 const toggleStyle = {
   cursor: 'pointer',

src/components/input-panel/index.tsx

@@ -8,9 +8,9 @@ import {State} from '../../constants/default-state';
 import ConfigEditor from '../config-editor';
 import CompiledSpecDisplay from './compiled-spec-display';
 import CompiledSpecHeader from './compiled-spec-header';
+import './index.css';
 import SpecEditor from './spec-editor';
 import SpecEditorHeader from './spec-editor-header';
-import './index.css';
 
 type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
 

src/components/input-panel/spec-editor-header/index.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import {withRouter, RouteComponentProps} from 'react-router-dom';
+import {RouteComponentProps, withRouter} from 'react-router-dom';
 import {bindActionCreators, Dispatch} from 'redux';
 import * as EditorActions from '../../../actions/editor';
 import {SIDEPANE} from '../../../constants';
+import {State} from '../../../constants/default-state';
 import ConfigEditorHeader from '../../config-editor/config-editor-header';
 import './index.css';
-import {State} from '../../../constants/default-state';
 
 type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & RouteComponentProps;
 

src/components/popup/index.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/themes/light-border.css';
+import Tippy, {TippyProps} from '@tippyjs/react';
+
+export function Popup(props: TippyProps) {
+  return <Tippy theme="light-border" {...props} />;
+}

src/components/renderer/index.tsx

@@ -2,6 +2,8 @@ import {connect} from 'react-redux';
 import {bindActionCreators, Dispatch} from 'redux';
 import * as EditorActions from '../../actions/editor';
 import {State} from '../../constants/default-state';
+import {recordPulse} from '../../features/dataflow/pulsesSlice';
+import {setRuntime} from '../../features/dataflow/runtimeSlice';
 import Renderer from './renderer';
 
 export function mapStateToProps(state: State) {
@@ -26,6 +28,8 @@ export function mapDispatchToProps(dispatch: Dispatch<EditorActions.Action>) {
   return bindActionCreators(
     {
       setView: EditorActions.setView,
+      setRuntime: setRuntime,
+      recordPulse: recordPulse,
     },
     dispatch
   );