dagEditor插件开发

dev_mode/package.json

@@ -124,6 +124,7 @@
     "@lumino/widgets": "^1.30.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "yili-dag": "~0.1.0",
     "yjs": "^13.5.17"
   },
   "dependencies": {
@@ -172,7 +173,8 @@
     "@jupyterlab/translation-extension": "~3.4.3",
     "@jupyterlab/ui-components-extension": "~3.4.3",
     "@jupyterlab/vdom-extension": "~3.4.3",
-    "@jupyterlab/vega5-extension": "~3.4.3"
+    "@jupyterlab/vega5-extension": "~3.4.3",
+    "yili-dag": "~0.1.0"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^3.4.3",
@@ -250,7 +252,8 @@
       "@jupyterlab/tooltip-extension": "",
       "@jupyterlab/translation-extension": "",
       "@jupyterlab/ui-components-extension": "",
-      "@jupyterlab/vdom-extension": ""
+      "@jupyterlab/vdom-extension": "",
+      "yili-dag": ""
     },
     "mimeExtensions": {
       "@jupyterlab/javascript-extension": "",
@@ -408,6 +411,7 @@
       "@jupyterlab/vdom": "../packages/vdom",
       "@jupyterlab/vdom-extension": "../packages/vdom-extension",
       "@jupyterlab/vega5-extension": "../packages/vega5-extension",
+      "yili-dag": "../packages/yili-dag",
       "@jupyterlab/builder": "../builder",
       "@jupyterlab/buildutils": "../buildutils",
       "@jupyterlab/template": "../buildutils/template",

dev_mode/style.js

@@ -44,3 +44,4 @@ import '@jupyterlab/translation-extension/style/index.js';
 import '@jupyterlab/ui-components-extension/style/index.js';
 import '@jupyterlab/vdom-extension/style/index.js';
 import '@jupyterlab/vega5-extension/style/index.js';
+import 'yili-dag/style/index.js';

packages/filebrowser/src/browser.ts

@@ -22,7 +22,6 @@ import { DirListing } from './listing';
 import { FilterFileBrowserModel } from './model';
 import DirectorySwitcher from './directoryswitcher';
 import DataManagerWidget from './datamanagerwidget';
-import OperatorLibrary from './operatorlibrary';
 
 /**
  * The class name added to file browsers.
@@ -111,13 +110,10 @@ export class FileBrowser extends Widget {
     // 切换按扭
     const switchButton = new DirectorySwitcher();
     // 添加按扭Class
-    switchButton.addClass('jp-FileBrowser-SwitchButton')
+    switchButton.addClass('jp-FileBrowser-SwitchButton');
 
     // 数据管理界面
-    const dataManagerWidget = new DataManagerWidget()
-
-    // 通用算子库界面
-    const operatorlibrary = new OperatorLibrary()
+    const dataManagerWidget = new DataManagerWidget();
 
     const header = new Widget();
     header.node.textContent = '编程列表';
@@ -134,29 +130,24 @@ export class FileBrowser extends Widget {
     // this.layout.addWidget(this.listing);
 
     // 添加当前列表
-    let currentList: any = this.listing
-    this.layout.addWidget(currentList)
+    let currentList: any = this.listing;
+    this.layout.addWidget(currentList);
 
     // 监听点击切换界面
-    switchButton.switchButtonClick.connect(
-      (_sender, {type}) => {
-        this.layout.removeWidget(currentList)
-        switch (type) {
-          case '开发目录':
-            currentList = this.listing
-            break;
-          case '数据管理':
-            currentList = dataManagerWidget
-            break
-          case '通用算子库':
-            currentList = operatorlibrary
-            break
-          default:
-            break;
-        }
-        this.layout.addWidget(currentList)
+    switchButton.switchButtonClick.connect((_sender, { type }) => {
+      this.layout.removeWidget(currentList);
+      switch (type) {
+        case '开发目录':
+          currentList = this.listing;
+          break;
+        case '数据管理':
+          currentList = dataManagerWidget;
+          break;
+        default:
+          break;
       }
-    )
+      this.layout.addWidget(currentList);
+    });
 
     if (options.restore !== false) {
       void model.restore(this.id);

packages/filebrowser/src/directoryswitcher.ts

@@ -2,17 +2,20 @@ import { Widget } from '@lumino/widgets';
 import { ISignal, Signal } from '@lumino/signaling';
 
 interface ISwitchSignalData {
-  type: string
+  type: string;
 }
 
 export default class DirectorySwitcher extends Widget {
   constructor(options: Widget.IOptions = {}) {
     super(options);
     this._createButtons();
-    this._addClickEventListener()
+    this._addClickEventListener();
   }
 
-  public get switchButtonClick(): ISignal<DirectorySwitcher, ISwitchSignalData> {
+  public get switchButtonClick(): ISignal<
+    DirectorySwitcher,
+    ISwitchSignalData
+  > {
     return this._clickSwitched;
   }
 
@@ -25,23 +28,21 @@ export default class DirectorySwitcher extends Widget {
     btn2.textContent = '数据管理';
     btn2.classList.add('jldbq-btn');
     this.node.appendChild(btn2);
-    const btn3 = document.createElement('button');
-    btn3.textContent = '通用算子库';
-    btn3.classList.add('jldbq-btn');
-    this.node.appendChild(btn3);
   }
 
   private _addClickEventListener() {
     this.node.childNodes.forEach((childNode: Element) => {
-      childNode.addEventListener("click", () => {
+      childNode.addEventListener('click', () => {
         this.node.childNodes.forEach((item: Element) => {
-          item.setAttribute('class', 'jldbq-btn')
-        })
-        childNode.classList.add("jldbq-btn-current")
-        this._clickSwitched.emit({type: childNode.innerHTML})
-      })
-    })
+          item.setAttribute('class', 'jldbq-btn');
+        });
+        childNode.classList.add('jldbq-btn-current');
+        this._clickSwitched.emit({ type: childNode.innerHTML });
+      });
+    });
   }
 
-  private _clickSwitched = new Signal<DirectorySwitcher, ISwitchSignalData>(this)
+  private _clickSwitched = new Signal<DirectorySwitcher, ISwitchSignalData>(
+    this
+  );
 }

packages/filebrowser/src/operatorlibrary.ts

@@ -1,14 +0,0 @@
-import { Widget } from '@lumino/widgets';
-
-export default class OperatorLibrary extends Widget {
-  constructor(options: Widget.IOptions = {}) {
-    super(options);
-    this._createWidget();
-  }
-
-  private _createWidget() {
-    const text = document.createElement('p')
-    text.innerHTML = '通用算子库'
-    this.node.appendChild(text)
-  }
-}

packages/metapackage/package.json

@@ -126,7 +126,8 @@
     "@jupyterlab/ui-components-extension": "^3.4.3",
     "@jupyterlab/vdom": "^3.4.3",
     "@jupyterlab/vdom-extension": "^3.4.3",
-    "@jupyterlab/vega5-extension": "^3.4.3"
+    "@jupyterlab/vega5-extension": "^3.4.3",
+    "yili-dag": "^0.1.0"
   },
   "devDependencies": {
     "fs-extra": "^9.0.1",

packages/metapackage/tsconfig.json

@@ -283,6 +283,9 @@
     },
     {
       "path": "../vega5-extension"
+    },
+    {
+      "path": "../yili-dag"
     }
   ]
 }

packages/yili-dag/LICENSE

@@ -1,29 +0,0 @@
-BSD 3-Clause License
-
-Copyright (c) 2022, hj
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
-2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/yili-dag/package.json

@@ -11,33 +11,36 @@
   "bugs": {
     "url": "https://github.com/github_username/yili-dag/issues"
   },
-  "license": "BSD-3-Clause",
-  "author": {
-    "name": "hj",
-    "email": "hjing0524@gmail.com"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/github_username/yili-dag.git"
   },
-  "files": [
-    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
+  "license": "MIT",
+  "author": "yili",
+  "sideEffects": [
+    "style/**/*.css",
+    "style/index.js"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "style": "style/index.css",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/github_username/yili-dag.git"
-  },
+  "files": [
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+    "schema/*.json"
+  ],
   "scripts": {
     "build": "jlpm build:lib && jlpm build:labextension:dev",
-    "build:prod": "jlpm clean && jlpm build:lib && jlpm build:labextension",
+    "build:all": "npm run build",
     "build:labextension": "jupyter labextension build .",
     "build:labextension:dev": "jupyter labextension build --development True .",
     "build:lib": "tsc",
+    "build:prod": "jlpm clean && jlpm build:lib && jlpm build:labextension",
     "clean": "jlpm clean:lib",
+    "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
+    "clean:labextension": "rimraf yili-dag/labextension",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:lintcache": "rimraf .eslintcache .stylelintcache",
-    "clean:labextension": "rimraf yili-dag/labextension",
-    "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
     "eslint": "jlpm eslint:check --fix",
     "eslint:check": "eslint . --cache --ext .ts,.tsx",
     "install:extension": "jlpm build",
@@ -50,47 +53,38 @@
     "stylelint:check": "stylelint --cache \"style/**/*.css\"",
     "test": "jest --coverage",
     "watch": "run-p watch:src watch:labextension",
-    "watch:src": "tsc -w",
-    "watch:labextension": "jupyter labextension watch ."
+    "watch:labextension": "jupyter labextension watch .",
+    "watch:src": "tsc -w"
   },
   "dependencies": {
-    "@jupyterlab/application": "^3.1.0"
+    "@jupyterlab/application": "^3.4.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@jupyterlab/builder": "^3.1.0",
-    "@jupyterlab/testutils": "^3.0.0",
-    "@types/jest": "^26.0.0",
+    "@babel/core": "^7.10.2",
+    "@babel/preset-env": "^7.10.2",
+    "@jupyterlab/builder": "^3.4.3",
+    "@jupyterlab/testutils": "^3.4.3",
+    "@types/jest": "^26.0.10",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "jest": "^26.0.0",
+    "jest": "^26.4.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.1.1",
-    "rimraf": "^3.0.2",
+    "prettier": "~2.1.1",
+    "rimraf": "~3.0.0",
     "stylelint": "^14.3.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^6.0.0",
     "stylelint-config-standard": "~24.0.0",
     "stylelint-prettier": "^2.0.0",
-    "typescript": "~4.1.3",
-    "ts-jest": "^26.0.0"
+    "ts-jest": "^26.3.0",
+    "typescript": "~4.1.3"
   },
-  "sideEffects": [
-    "style/*.css",
-    "style/index.js"
-  ],
-  "styleModule": "style/index.js",
   "publishConfig": {
     "access": "public"
   },
-  "jupyterlab": {
-    "extension": true,
-    "outputDir": "yili-dag/labextension"
-  },
   "jupyter-releaser": {
     "hooks": {
       "before-build-npm": [
@@ -101,5 +95,11 @@
         "jlpm clean:all"
       ]
     }
-  }
-}
+  },
+  "jupyterlab": {
+    "extension": true,
+    "outputDir": "yili-dag/labextension",
+    "schemaDir": "schema"
+  },
+  "styleModule": "style/index.js"
+}

packages/yili-dag/schema/plugin.json

@@ -0,0 +1,14 @@
+{
+  "title": "YLDAG",
+  "description": "YLDAG settings.",
+  "type": "object",
+  "properties": {
+    "flaskBackend": {
+      "title": "Flask Backend address.",
+      "description": "Flask Backend address.",
+      "type": "string",
+      "default": "http://192.168.199.107:18082"
+    }
+  },
+  "additionalProperties": false
+}

packages/yili-dag/src/DagEditorWidget.tsx

@@ -0,0 +1,146 @@
+import {
+  DocumentRegistry,
+  ABCWidgetFactory,
+  DocumentWidget,
+  Context
+} from '@jupyterlab/docregistry';
+import React, { useRef, useEffect } from 'react';
+import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { ILabShell } from '@jupyterlab/application';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { Signal } from '@lumino/signaling';
+import { dagIcon } from './icons';
+
+export const commandIDs = {
+  openDagEditor: 'dag-editor:open',
+  openDocManager: 'docmanager:open',
+  newDocManager: 'docmanager:new-untitled',
+  saveDocManager: 'docmanager:save'
+};
+
+class DagEditorWidget extends ReactWidget {
+  browserFactory: IFileBrowserFactory;
+  shell: ILabShell;
+  commands: any;
+  addFileToDagSignal: Signal<this, any>;
+  refreshPaletteSignal: Signal<this, any>;
+  context: Context;
+  settings: ISettingRegistry.ISettings;
+
+  constructor(options: any) {
+    super(options);
+    this.browserFactory = options.browserFactory;
+    this.shell = options.shell;
+    this.commands = options.commands;
+    this.addFileToDagSignal = options.addFileToDagSignal;
+    this.refreshPaletteSignal = options.refreshPaletteSignal;
+    this.context = options.context;
+    this.settings = options.settings;
+  }
+
+  render(): any {
+    return (
+      <DagWrapper
+        context={this.context}
+        browserFactory={this.browserFactory}
+        shell={this.shell}
+        commands={this.commands}
+        addFileToDagSignal={this.addFileToDagSignal}
+        refreshPaletteSignal={this.refreshPaletteSignal}
+        widgetId={this.parent?.id}
+        settings={this.settings}
+      />
+    );
+  }
+}
+
+interface IProps {
+  context: DocumentRegistry.Context;
+  browserFactory: IFileBrowserFactory;
+  shell: ILabShell;
+  commands: any;
+  addFileToDagSignal: Signal<DagEditorWidget, any>;
+  refreshPaletteSignal: Signal<DagEditorWidget, any>;
+  settings?: ISettingRegistry.ISettings;
+  widgetId?: string;
+}
+
+const DagWrapper: React.FC<IProps> = ({
+  context,
+  browserFactory,
+  shell,
+  commands,
+  addFileToDagSignal,
+  refreshPaletteSignal,
+  settings,
+  widgetId
+}) => {
+  //   const ref = useRef<any>(null);
+  const contextRef = useRef(context);
+
+  // 数据重现
+  useEffect(() => {
+    const currentContext = contextRef.current;
+    currentContext.ready.then(() => {
+      const dagJson: any = currentContext.model.toJSON();
+      console.log(
+        '222',
+        dagJson,
+        contextRef.current.isReady,
+        currentContext.model
+      );
+    });
+  }, [contextRef]);
+
+  // save
+  const onClick = () => {
+    const json = { a: '1', b: '2', c: '3' };
+    contextRef.current.model.fromJSON(json);
+    contextRef.current.save();
+    console.log('1111', contextRef.current.isReady);
+  };
+  return (
+    <div style={{ backgroundColor: 'red' }} onClick={onClick}>
+      123
+    </div>
+  );
+};
+
+export class DagEditorFactory extends ABCWidgetFactory<DocumentWidget> {
+  browserFactory: IFileBrowserFactory;
+  shell: ILabShell;
+  commands: any;
+  addFileToDagSignal: Signal<this, any>;
+  refreshPaletteSignal: Signal<this, any>;
+  settings: ISettingRegistry.ISettings;
+
+  constructor(options: any) {
+    super(options);
+    this.browserFactory = options.browserFactory;
+    this.shell = options.shell;
+    this.commands = options.commands;
+    this.addFileToDagSignal = new Signal<this, any>(this);
+    this.refreshPaletteSignal = new Signal<this, any>(this);
+    this.settings = options.settings;
+  }
+
+  protected createNewWidget(context: DocumentRegistry.Context): DocumentWidget {
+    // Creates a blank widget with a DocumentWidget wrapper
+    const props = {
+      shell: this.shell,
+      commands: this.commands,
+      browserFactory: this.browserFactory,
+      context: context,
+      addFileToDagSignal: this.addFileToDagSignal,
+      refreshPaletteSignal: this.refreshPaletteSignal,
+      settings: this.settings
+    };
+    const content = new DagEditorWidget(props);
+
+    const widget = new DocumentWidget({ content, context });
+    // widget.addClass('dag-editor');
+    widget.title.icon = dagIcon;
+    return widget;
+  }
+}

packages/yili-dag/src/icons.tsx

@@ -0,0 +1,7 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+import dagIconSvg from '../style/icons/dag.svg';
+
+export const dagIcon = new LabIcon({
+  name: 'dag:dagIcon',
+  svgstr: dagIconSvg
+});

packages/yili-dag/src/index.ts

@@ -1,7 +1,20 @@
 import {
   JupyterFrontEnd,
-  JupyterFrontEndPlugin
+  JupyterFrontEndPlugin,
+  ILayoutRestorer
 } from '@jupyterlab/application';
+import { IMainMenu } from '@jupyterlab/mainmenu';
+import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { WidgetTracker } from '@jupyterlab/apputils';
+import { DocumentWidget } from '@jupyterlab/docregistry';
+import { DagEditorFactory, commandIDs } from './DagEditorWidget';
+import { dagIcon } from './icons';
+
+const PLUGIN_ID = '@jupyterlab/yili-dag:plugin';
+const DAG_EDITOR = 'Dag Editor';
+const DAG = 'dag';
+const DAG_EDITOR_NAMESPACE = 'dag-editor-extension';
 
 /**
  * Initialization data for the yili-dag extension.
@@ -9,8 +22,139 @@ import {
 const plugin: JupyterFrontEndPlugin<void> = {
   id: 'yili-dag:plugin',
   autoStart: true,
-  activate: (app: JupyterFrontEnd) => {
-    console.log('JupyterLab extension yili-dag is activated11111!');
+  requires: [ILayoutRestorer, IFileBrowserFactory, IMainMenu, ISettingRegistry],
+  activate: async (
+    app: JupyterFrontEnd,
+    restorer: ILayoutRestorer,
+    browserFactory: IFileBrowserFactory,
+    menu: IMainMenu,
+    registry: ISettingRegistry
+  ) => {
+    const settings = await registry
+      .load(PLUGIN_ID)
+      .catch(error => console.log(error));
+
+    const dagEditorFactory = new DagEditorFactory({
+      name: DAG_EDITOR,
+      fileTypes: [DAG],
+      defaultFor: [DAG],
+      shell: app.shell,
+      commands: app.commands,
+      browserFactory: browserFactory,
+      serviceManager: app.serviceManager,
+      settings: settings
+    });
+
+    // Add the default behavior of opening the widget for .dag files
+    app.docRegistry.addFileType(
+      {
+        name: DAG,
+        displayName: 'Dag',
+        extensions: ['.dag'],
+        icon: dagIcon
+      },
+      ['JSON']
+    );
+
+    app.docRegistry.addWidgetFactory(dagEditorFactory);
+
+    const tracker = new WidgetTracker<DocumentWidget>({
+      namespace: DAG_EDITOR_NAMESPACE
+    });
+
+    dagEditorFactory.widgetCreated.connect((sender, widget) => {
+      void tracker.add(widget);
+
+      // Notify the widget tracker if restore data needs to update
+      widget.context.pathChanged.connect(() => {
+        void tracker.save(widget);
+      });
+    });
+
+    // Handle state restoration
+    void restorer.restore(tracker, {
+      command: commandIDs.openDocManager,
+      args: widget => ({
+        path: widget.context.path,
+        factory: DAG_EDITOR
+      }),
+      name: widget => widget.context.path
+    });
+
+    /**
+     * Create new python editor from launcher and file menu
+     */
+
+    if (menu) {
+      // Add new python editor creation to the file menu
+      menu.fileMenu.newMenu.addGroup(
+        [{ command: commandIDs.openDagEditor, args: { isMenu: true } }],
+        99
+      );
+    }
+
+    // Add a command to create new scala editor
+    app.commands.addCommand(commandIDs.openDagEditor, {
+      label: args => (args['isPalette'] ? `New ${DAG_EDITOR}` : DAG_EDITOR),
+      caption: 'Create a new Dag Editor',
+      icon: args => (args['isPalette'] ? undefined : dagIcon),
+      execute: args => {
+        // Creates blank file, then opens it in a new window
+        app.commands
+          .execute(commandIDs.newDocManager, {
+            type: 'file',
+            path: browserFactory.defaultBrowser.model.path,
+            ext: '.dag'
+          })
+          .then(async model => {
+            const dagJson = {
+              id: 'uuid1',
+              requirements: '',
+              user_name: 'xxx',
+              user_id: 1,
+              project_name: 'dfs',
+              project_id: 123,
+              nodes: [
+                {
+                  id: 'node-uuid',
+                  op: 'python/sql/spark/datasource',
+                  data: {
+                    input: ['input1', 'input2'],
+                    output: ['output1', 'o2'],
+                    itermidate_data: ['hdfs://host:port/uri'],
+                    script: ''
+                  },
+                  datasource_table: 'uri'
+                }
+              ],
+              edges: [
+                {
+                  source: 'node_id_1',
+                  target: 'node_id_2'
+                },
+                {
+                  source: 'node_id_1',
+                  target: 'node_id_2'
+                }
+              ]
+            };
+            const newWidget = await app.commands.execute(
+              commandIDs.openDocManager,
+              {
+                path: model.path,
+                factory: DAG_EDITOR
+              }
+            );
+            newWidget.context.ready.then(() => {
+              console.log('###', newWidget.context.model);
+              newWidget.context.model.fromJSON(dagJson);
+              app.commands.execute(commandIDs.saveDocManager, {
+                path: model.path
+              });
+            });
+          });
+      }
+    });
   }
 };
 

packages/yili-dag/src/png.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

packages/yili-dag/src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}

packages/yili-dag/style/index.css

@@ -1 +1,9 @@
-@import url('base.css');
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@jupyterlab/application/style/index.css');
+
+@import url('./base.css');

packages/yili-dag/style/index.js

@@ -1 +1,9 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+import '@jupyterlab/application/style/index.js';
+
 import './base.css';

packages/yili-dag/tsconfig.json

@@ -18,7 +18,17 @@
     "strict": true,
     "strictNullChecks": true,
     "target": "es2017",
-    "types": ["jest"]
+    "types": [
+      "jest"
+    ]
   },
-  "include": ["src/*"]
+  "include": [
+    "src/*"
+  ],
+  "references": [
+    {
+      "path": "../application"
+    }
+  ],
+  "extends": "../../tsconfigbase"
 }

tsconfigdoc.json

@@ -20,277 +20,280 @@
   },
   "references": [
     {
-      "path": "./packages/application"
+      "path": "./packages\\application"
     },
     {
-      "path": "./packages/apputils"
+      "path": "./packages\\apputils"
     },
     {
-      "path": "./packages/apputils-extension"
+      "path": "./packages\\apputils-extension"
     },
     {
-      "path": "./packages/attachments"
+      "path": "./packages\\attachments"
     },
     {
-      "path": "./packages/cell-toolbar"
+      "path": "./packages\\cell-toolbar"
     },
     {
-      "path": "./packages/cell-toolbar-extension"
+      "path": "./packages\\cell-toolbar-extension"
     },
     {
-      "path": "./packages/cells"
+      "path": "./packages\\cells"
     },
     {
-      "path": "./packages/celltags"
+      "path": "./packages\\celltags"
     },
     {
-      "path": "./packages/celltags-extension"
+      "path": "./packages\\celltags-extension"
     },
     {
-      "path": "./packages/codeeditor"
+      "path": "./packages\\codeeditor"
     },
     {
-      "path": "./packages/codemirror"
+      "path": "./packages\\codemirror"
     },
     {
-      "path": "./packages/codemirror-extension"
+      "path": "./packages\\codemirror-extension"
     },
     {
-      "path": "./packages/completer"
+      "path": "./packages\\completer"
     },
     {
-      "path": "./packages/completer-extension"
+      "path": "./packages\\completer-extension"
     },
     {
-      "path": "./packages/console"
+      "path": "./packages\\console"
     },
     {
-      "path": "./packages/console-extension"
+      "path": "./packages\\console-extension"
     },
     {
-      "path": "./packages/coreutils"
+      "path": "./packages\\coreutils"
     },
     {
-      "path": "./packages/csvviewer"
+      "path": "./packages\\csvviewer"
     },
     {
-      "path": "./packages/csvviewer-extension"
+      "path": "./packages\\csvviewer-extension"
     },
     {
-      "path": "./packages/debugger"
+      "path": "./packages\\debugger"
     },
     {
-      "path": "./packages/debugger-extension"
+      "path": "./packages\\debugger-extension"
     },
     {
-      "path": "./packages/docmanager"
+      "path": "./packages\\docmanager"
     },
     {
-      "path": "./packages/docmanager-extension"
+      "path": "./packages\\docmanager-extension"
     },
     {
-      "path": "./packages/docprovider"
+      "path": "./packages\\docprovider"
     },
     {
-      "path": "./packages/docprovider-extension"
+      "path": "./packages\\docprovider-extension"
     },
     {
-      "path": "./packages/docregistry"
+      "path": "./packages\\docregistry"
     },
     {
-      "path": "./packages/documentsearch"
+      "path": "./packages\\documentsearch"
     },
     {
-      "path": "./packages/documentsearch-extension"
+      "path": "./packages\\documentsearch-extension"
     },
     {
-      "path": "./packages/extensionmanager"
+      "path": "./packages\\extensionmanager"
     },
     {
-      "path": "./packages/extensionmanager-extension"
+      "path": "./packages\\extensionmanager-extension"
     },
     {
-      "path": "./packages/filebrowser"
+      "path": "./packages\\filebrowser"
     },
     {
-      "path": "./packages/filebrowser-extension"
+      "path": "./packages\\filebrowser-extension"
     },
     {
-      "path": "./packages/fileeditor"
+      "path": "./packages\\fileeditor"
     },
     {
-      "path": "./packages/fileeditor-extension"
+      "path": "./packages\\fileeditor-extension"
     },
     {
-      "path": "./packages/help-extension"
+      "path": "./packages\\help-extension"
     },
     {
-      "path": "./packages/htmlviewer"
+      "path": "./packages\\htmlviewer"
     },
     {
-      "path": "./packages/htmlviewer-extension"
+      "path": "./packages\\htmlviewer-extension"
     },
     {
-      "path": "./packages/hub-extension"
+      "path": "./packages\\hub-extension"
     },
     {
-      "path": "./packages/imageviewer"
+      "path": "./packages\\imageviewer"
     },
     {
-      "path": "./packages/imageviewer-extension"
+      "path": "./packages\\imageviewer-extension"
     },
     {
-      "path": "./packages/inspector"
+      "path": "./packages\\inspector"
     },
     {
-      "path": "./packages/inspector-extension"
+      "path": "./packages\\inspector-extension"
     },
     {
-      "path": "./packages/javascript-extension"
+      "path": "./packages\\javascript-extension"
     },
     {
-      "path": "./packages/jldbq-extenison"
+      "path": "./packages\\jldbq-extenison"
     },
     {
-      "path": "./packages/json-extension"
+      "path": "./packages\\json-extension"
     },
     {
-      "path": "./packages/launcher"
+      "path": "./packages\\launcher"
     },
     {
-      "path": "./packages/launcher-extension"
+      "path": "./packages\\launcher-extension"
     },
     {
-      "path": "./packages/logconsole"
+      "path": "./packages\\logconsole"
     },
     {
-      "path": "./packages/logconsole-extension"
+      "path": "./packages\\logconsole-extension"
     },
     {
-      "path": "./packages/mainmenu"
+      "path": "./packages\\mainmenu"
     },
     {
-      "path": "./packages/mainmenu-extension"
+      "path": "./packages\\mainmenu-extension"
     },
     {
-      "path": "./packages/markdownviewer"
+      "path": "./packages\\markdownviewer"
     },
     {
-      "path": "./packages/markdownviewer-extension"
+      "path": "./packages\\markdownviewer-extension"
     },
     {
-      "path": "./packages/mathjax2"
+      "path": "./packages\\mathjax2"
     },
     {
-      "path": "./packages/mathjax2-extension"
+      "path": "./packages\\mathjax2-extension"
     },
     {
-      "path": "./packages/mytest-extenison"
+      "path": "./packages\\mytest-extenison"
     },
     {
-      "path": "./packages/nbformat"
+      "path": "./packages\\nbformat"
     },
     {
-      "path": "./packages/notebook"
+      "path": "./packages\\notebook"
     },
     {
-      "path": "./packages/notebook-extension"
+      "path": "./packages\\notebook-extension"
     },
     {
-      "path": "./packages/observables"
+      "path": "./packages\\observables"
     },
     {
-      "path": "./packages/outputarea"
+      "path": "./packages\\outputarea"
     },
     {
-      "path": "./packages/pdf-extension"
+      "path": "./packages\\pdf-extension"
     },
     {
-      "path": "./packages/property-inspector"
+      "path": "./packages\\property-inspector"
     },
     {
-      "path": "./packages/rendermime"
+      "path": "./packages\\rendermime"
     },
     {
-      "path": "./packages/rendermime-extension"
+      "path": "./packages\\rendermime-extension"
     },
     {
-      "path": "./packages/rendermime-interfaces"
+      "path": "./packages\\rendermime-interfaces"
     },
     {
-      "path": "./packages/running"
+      "path": "./packages\\running"
     },
     {
-      "path": "./packages/running-extension"
+      "path": "./packages\\running-extension"
     },
     {
-      "path": "./packages/services"
+      "path": "./packages\\services"
     },
     {
-      "path": "./packages/settingeditor"
+      "path": "./packages\\settingeditor"
     },
     {
-      "path": "./packages/settingeditor-extension"
+      "path": "./packages\\settingeditor-extension"
     },
     {
-      "path": "./packages/settingregistry"
+      "path": "./packages\\settingregistry"
     },
     {
-      "path": "./packages/shared-models"
+      "path": "./packages\\shared-models"
     },
     {
-      "path": "./packages/shortcuts-extension"
+      "path": "./packages\\shortcuts-extension"
     },
     {
-      "path": "./packages/statedb"
+      "path": "./packages\\statedb"
     },
     {
-      "path": "./packages/statusbar"
+      "path": "./packages\\statusbar"
     },
     {
-      "path": "./packages/statusbar-extension"
+      "path": "./packages\\statusbar-extension"
     },
     {
-      "path": "./packages/terminal"
+      "path": "./packages\\terminal"
     },
     {
-      "path": "./packages/terminal-extension"
+      "path": "./packages\\terminal-extension"
     },
     {
-      "path": "./packages/theme-light-extension"
+      "path": "./packages\\theme-light-extension"
     },
     {
-      "path": "./packages/toc"
+      "path": "./packages\\toc"
     },
     {
-      "path": "./packages/toc-extension"
+      "path": "./packages\\toc-extension"
     },
     {
-      "path": "./packages/tooltip"
+      "path": "./packages\\tooltip"
     },
     {
-      "path": "./packages/tooltip-extension"
+      "path": "./packages\\tooltip-extension"
     },
     {
-      "path": "./packages/translation"
+      "path": "./packages\\translation"
     },
     {
-      "path": "./packages/translation-extension"
+      "path": "./packages\\translation-extension"
     },
     {
-      "path": "./packages/ui-components"
+      "path": "./packages\\ui-components"
     },
     {
-      "path": "./packages/ui-components-extension"
+      "path": "./packages\\ui-components-extension"
     },
     {
-      "path": "./packages/vdom"
+      "path": "./packages\\vdom"
     },
     {
-      "path": "./packages/vdom-extension"
+      "path": "./packages\\vdom-extension"
     },
     {
-      "path": "./packages/vega5-extension"
+      "path": "./packages\\vega5-extension"
+    },
+    {
+      "path": "./packages\\yili-dag"
     }
   ]
 }

untitled.dag

@@ -0,0 +1 @@
+{"id":"uuid1","requirements":"","user_name":"xxx","user_id":1,"project_name":"dfs","project_id":123,"nodes":[{"id":"node-uuid","op":"python/sql/spark/datasource","data":{"input":["input1","input2"],"output":["output1","o2"],"itermidate_data":["hdfs://host:port/uri"],"script":""},"datasource_table":"uri"}],"edges":[{"source":"node_id_1","target":"node_id_2"},{"source":"node_id_1","target":"node_id_2"}]}