Merge branch 'yili' of http://gogsb.soaringnova.com/ylproj/jupyterlab into yili

packages/filebrowser/package.json

@@ -41,6 +41,7 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
+    "@jupyterlab/application": "^3.4.3",
     "@jupyterlab/apputils": "^3.4.3",
     "@jupyterlab/coreutils": "^5.4.3",
     "@jupyterlab/docmanager": "^3.4.3",

packages/filebrowser/src/browser.ts → packages/filebrowser/src/browser.tsx

@@ -1,9 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import React from 'react';
 import {
   FilenameSearcher,
   IScore,
+  MainAreaWidget,
   ReactWidget,
   showErrorMessage,
   Toolbar
@@ -22,6 +24,10 @@ import { DirListing } from './listing';
 import { FilterFileBrowserModel } from './model';
 import DirectorySwitcher from './directoryswitcher';
 import DataManagerWidget from './datamanagerwidget';
+import { cliIcon } from './icons';
+import { DagDataView } from './dataview';
+
+import { JupyterFrontEnd } from '@jupyterlab/application';
 
 /**
  * The class name added to file browsers.
@@ -115,6 +121,20 @@ export class FileBrowser extends Widget {
     // 数据管理界面
     const dataManagerWidget = new DataManagerWidget();
 
+    dataManagerWidget.id = 'dag-data';
+    dataManagerWidget.title.icon = cliIcon;
+    dataManagerWidget.title.caption = '数据管理';
+    dataManagerWidget.title.label = '数据管理';
+    dataManagerWidget.dataOpened.connect(() => {
+      const widget = new MainAreaWidget({
+        content: ReactWidget.create(<DagDataView />)
+      });
+      widget.title.label = '数据管理';
+      widget.title.icon = cliIcon;
+      const app: JupyterFrontEnd = (window as any).jupyterlab;
+      app.shell.add(widget, 'main');
+    });
+
     const header = new Widget();
     header.node.textContent = '编程列表';
     header.addClass('jp-FileBrowser-header');
@@ -136,9 +156,12 @@ export class FileBrowser extends Widget {
     // 监听点击切换界面
     switchButton.switchButtonClick.connect((_sender, { type }) => {
       this.layout.removeWidget(currentList);
+      this.layout.removeWidget(this.crumbs);
+      this.layout.addWidget(switchButton);
       switch (type) {
         case '开发目录':
           currentList = this.listing;
+          this.layout.addWidget(this.crumbs);
           break;
         case '数据管理':
           currentList = dataManagerWidget;

packages/filebrowser/src/datamanage.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface IProps {
+  onOpenData: () => void;
+}
+
+const tables = [
+  {
+    id: 1,
+    name: 'test1.table'
+  },
+  {
+    id: 2,
+    name: 'test2.table'
+  }
+];
+
+const DataManage: React.FC<IProps> = props => {
+  return (
+    <div className="datamanage">
+      {tables.map(item => {
+        return (
+          <div
+            className="datamanage-label"
+            onClick={props.onOpenData}
+            key={item.id}
+          >
+            {item.name}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DataManage;

packages/filebrowser/src/datamanagerwidget.ts

@@ -1,14 +0,0 @@
-import { Widget } from '@lumino/widgets';
-
-export default class DataManagerWidget extends Widget {
-  constructor(options: Widget.IOptions = {}) {
-    super(options);
-    this._createWidget();
-  }
-
-  private _createWidget() {
-    const text = document.createElement('p')
-    text.innerHTML = '数据管理'
-    this.node.appendChild(text)
-  }
-}

packages/filebrowser/src/datamanagerwidget.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+import { ISignal, Signal } from '@lumino/signaling';
+import DataManage from './datamanage';
+
+class DataManagerWidget extends ReactWidget {
+  constructor(options: Widget.IOptions = {}) {
+    super(options);
+  }
+
+  public get dataOpened(): ISignal<DataManagerWidget, void> {
+    return this._dataOpened;
+  }
+
+  render(): JSX.Element {
+    return (
+      <DataManage
+        onOpenData={() => {
+          this._dataOpened.emit();
+        }}
+      />
+    );
+  }
+  private _dataOpened = new Signal<DataManagerWidget, void>(this);
+}
+
+export default DataManagerWidget;

packages/filebrowser/src/dataview.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+const data = {
+  table_info: {
+    type: '数据表',
+    integrity: '-',
+    sum: 2,
+    location: 'HDFS',
+    creator: 'steven',
+    storage: '64.33MB',
+    create_time: '2022.09.04 12:00'
+  },
+  data: {
+    id: [1, 2],
+    name: ['a', 'b'],
+    categ_name: ['q', 'z']
+  }
+};
+
+export const DagDataView: React.FC<{}> = () => {
+  return (
+    <div className="dataview_wrapper">
+      <div className="dataview_info">
+        <div className="dataview_row">
+          <div className="dataview_item">
+            <span className="dataview_label">数据类型</span>
+            {data.table_info.type}
+          </div>
+          <div className="dataview_item">
+            <span className="dataview_label">完整性</span>
+            {data.table_info.integrity}
+          </div>
+          <div className="dataview_item">
+            <span className="dataview_label">数据条数</span>
+            {data.table_info.sum}
+          </div>
+        </div>
+        <div className="dataview_row">
+          <div className="dataview_item">
+            <span className="dataview_label">存储位置</span>
+            {data.table_info.location}
+          </div>
+          <div className="dataview_item">
+            <span className="dataview_label">创建人</span>
+            {data.table_info.creator}
+          </div>
+          <div className="dataview_item">
+            <span className="dataview_label">占用存储</span>
+            {data.table_info.storage}
+          </div>
+        </div>
+        <div className="dataview_row">
+          <div className="dataview_item">
+            <span className="dataview_label">创建时间</span>
+            {data.table_info.create_time}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/filebrowser/src/icons.ts

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

packages/filebrowser/src/svg.d.ts

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

packages/filebrowser/style/base.css

@@ -313,3 +313,9 @@
   min-height: 120px;
   outline: none;
 }
+
+.dag-data {
+  height: 100%;
+}
+@import './datamanage.css';
+@import './dataview.css';

packages/filebrowser/style/datamanage.css

@@ -0,0 +1,12 @@
+.datamanage {
+  height: 100%;
+  overflow-y: scroll;
+}
+.datamanage-label {
+  padding: 5px 20px;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #4a4a4a;
+  line-height: 20px;
+}

packages/filebrowser/style/dataview.css

@@ -0,0 +1,18 @@
+.dataview_wrapper {
+  width: 100%;
+  height: 100%;
+  padding: 0 20px;
+}
+.dataview_info {
+  height: 40%;
+}
+.dataview_row {
+  display: flex;
+}
+.dataview_item {
+  width: 33%;
+  padding: 20px 0;
+}
+.dataview_label {
+  width: 100px;
+}

packages/filebrowser/style/icons/cli.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="4.2333331mm" height="4.2333331mm" viewBox="0 0 4.2333331 4.2333332" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <g transform="translate(-20.017746,-119.34786)">
+    <path fill="#000000" class="jp-icon3 jp-icon-selectable"
+      style="stroke-width:1.00157;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+      d="M 0 0 L 0 16 L 16 16 L 16 12.998047 L 15.240234 12.998047 L 15.240234 15.240234 L 0.75976562 15.240234 L 0.75976562 3.7871094 L 15.240234 3.7871094 L 15.240234 5.8144531 L 16 5.8144531 L 16 0 L 0 0 z M 0.75976562 0.75976562 L 15.240234 0.75976562 L 15.240234 3.1660156 L 0.75976562 3.1660156 L 0.75976562 0.75976562 z M 11.039062 6.0175781 A 0.49999937 0.49999937 0 0 0 10.574219 6.3476562 L 8.640625 11.839844 A 0.49999937 0.49999937 0 0 0 8.9433594 12.474609 A 0.49999937 0.49999937 0 0 0 9.5859375 12.171875 L 11.519531 6.6796875 A 0.49999937 0.49999937 0 0 0 11.210938 6.0449219 L 11.208984 6.0449219 A 0.49999937 0.49999937 0 0 0 11.039062 6.0175781 z M 13.609375 6.3925781 A 0.49999937 0.49999937 0 0 0 13.3125 6.4882812 A 0.49999937 0.49999937 0 0 0 13.208984 7.1894531 L 14.832031 9.4179688 L 13.134766 11.285156 A 0.49999937 0.49999937 0 0 0 13.171875 11.994141 A 0.49999937 0.49999937 0 0 0 13.880859 11.957031 L 15.84375 9.7871094 A 0.50004934 0.50004934 0 0 0 15.880859 9.1523438 L 14.013672 6.5976562 A 0.49999937 0.49999937 0 0 0 13.689453 6.3984375 L 13.6875 6.3984375 A 0.49999937 0.49999937 0 0 0 13.609375 6.3925781 z M 6.5507812 6.3945312 A 0.49999937 0.49999937 0 0 0 6.4726562 6.4003906 L 6.4726562 6.3984375 A 0.49999937 0.49999937 0 0 0 6.1484375 6.5976562 L 4.28125 9.1523438 A 0.50004934 0.50004934 0 0 0 4.3105469 9.7871094 L 6.28125 11.957031 A 0.49999937 0.49999937 0 0 0 6.9902344 11.996094 A 0.49999937 0.49999937 0 0 0 7.0273438 11.287109 L 5.3300781 9.4199219 L 6.953125 7.1894531 A 0.49999937 0.49999937 0 0 0 6.8417969 6.4882812 A 0.49999937 0.49999937 0 0 0 6.5507812 6.3945312 z "
+      transform="matrix(0.26458333,0,0,0.26458333,20.017746,119.34786)" />
+  </g>
+</svg>

packages/filebrowser/style/index.css

@@ -9,6 +9,7 @@
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@lumino/dragdrop/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');
+@import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/docmanager/style/index.css');
 
 @import url('./base.css');

packages/filebrowser/style/index.js

@@ -9,6 +9,7 @@ import '@jupyterlab/ui-components/style/index.js';
 import '@jupyterlab/apputils/style/index.js';
 import '@lumino/dragdrop/style/index.js';
 import '@jupyterlab/docregistry/style/index.js';
+import '@jupyterlab/application/style/index.js';
 import '@jupyterlab/docmanager/style/index.js';
 
 import './base.css';

packages/filebrowser/tsconfig.json

@@ -4,8 +4,13 @@
     "outDir": "lib",
     "rootDir": "src"
   },
-  "include": ["src/*"],
+  "include": [
+    "src/*"
+  ],
   "references": [
+    {
+      "path": "../application"
+    },
     {
       "path": "../apputils"
     },

packages/filebrowser/tsconfig.test.json

@@ -1,7 +1,13 @@
 {
   "extends": "../../tsconfigbase.test",
-  "include": ["src/*", "test/*"],
+  "include": [
+    "src/*",
+    "test/*"
+  ],
   "references": [
+    {
+      "path": "../application"
+    },
     {
       "path": "../apputils"
     },
@@ -35,6 +41,9 @@
     {
       "path": "../../testutils"
     },
+    {
+      "path": "../application"
+    },
     {
       "path": "../apputils"
     },

packages/yili-dag/package.json

@@ -68,12 +68,22 @@
     "@jupyterlab/settingregistry": "^3.4.3",
     "@jupyterlab/ui-components": "^3.4.3",
     "@lumino/signaling": "^1.10.0",
+    "@uiw/react-codemirror": "^3.2.8",
+    "antd": "^4.22.8",
+    "canvas": "^2.8.0",
+    "react": "^17.0.1",
+    "insert-css": "^2.0.0",
+    "styled-components": "^5.3.5"
+<<<<<<< HEAD
     "@types/codemirror": "0.0.109",
     "@uiw/react-codemirror": "^3.2.8",
     "antd": "^4.22.8",
     "canvas": "^2.8.0",
     "insert-css": "^2.0.0",
     "styled-components": "^5.3.5"
+=======
+    "react": "^17.0.1"
+>>>>>>> 21b0dcbebb997901e318e3740dc6c3bf781f89da
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
@@ -119,4 +129,4 @@
     "schemaDir": "schema"
   },
   "styleModule": "style/index.js"
-}
+}

packages/yili-dag/src/index.ts

@@ -155,3 +155,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
 };
 
 export default plugin;
+/**
+ * @packageDocumentation
+ * @module undefined
+ */