From df24cc074da33ac84a4c317c3bb0b3f6a8723081 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Thu, 12 Dec 2019 14:58:24 +0800 Subject: [PATCH 1/8] feat: scroll to the paragraph when the position is moved --- .../runtime-dynamic-module.module.ts | 11 +++++++++++ .../workspace/notebook/notebook.component.ts | 8 ++++++++ .../notebook/paragraph/paragraph.component.ts | 6 ++++++ .../src/app/services/shortcut.service.ts | 8 ++++---- .../src/app/utility/element.ts | 19 +++++++++++++++++++ 5 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 zeppelin-web-angular/src/app/utility/element.ts diff --git a/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts b/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts index d6cb44c8c2f..27d08f94a81 100644 --- a/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts +++ b/zeppelin-web-angular/src/app/core/runtime-dynamic-module/runtime-dynamic-module.module.ts @@ -1,3 +1,14 @@ +/* + * Licensed 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 { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts index e0c17a168fb..404fc288954 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts @@ -36,6 +36,7 @@ import { TicketService } from '@zeppelin/services'; +import { scrollIntoViewIfNeeded } from '@zeppelin/utility/element'; import { NotebookParagraphComponent } from './paragraph/paragraph.component'; @Component({ @@ -151,7 +152,14 @@ export class NotebookComponent extends MessageListenersManager implements OnInit if (movedPara) { const listOfRestPara = this.note.paragraphs.filter(p => p.id !== data.id); this.note.paragraphs = [...listOfRestPara.slice(0, data.index), movedPara, ...listOfRestPara.slice(data.index)]; + const paragraphComponent = this.listOfNotebookParagraphComponent.find(e => e.paragraph.id === data.id); this.cdr.markForCheck(); + if (paragraphComponent) { + // Call when next tick + setTimeout(() => { + scrollIntoViewIfNeeded(paragraphComponent.getElement()); + }); + } } } } diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts index 246d09e7aad..ad9691e9ab6 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts @@ -516,9 +516,11 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit, this.commitParagraph(); break; case ParagraphActions.MoveToUp: + event.preventDefault(); this.moveUpParagraph(); break; case ParagraphActions.MoveToDown: + event.preventDefault(); this.moveDownParagraph(); break; case ParagraphActions.SwitchEnable: @@ -622,6 +624,10 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit, } } + getElement(): HTMLElement { + return this.host && this.host.nativeElement; + } + ngOnDestroy(): void { super.ngOnDestroy(); } diff --git a/zeppelin-web-angular/src/app/services/shortcut.service.ts b/zeppelin-web-angular/src/app/services/shortcut.service.ts index 4b2a62627a6..5bc9a2a2fcd 100644 --- a/zeppelin-web-angular/src/app/services/shortcut.service.ts +++ b/zeppelin-web-angular/src/app/services/shortcut.service.ts @@ -44,10 +44,10 @@ export const ShortcutsMap = { // Need register special character `≠` in MacOS [ParagraphActions.IncreaseWidth]: ['alt.ctrlCmd.+', 'alt.ctrlCmd.≠'], [ParagraphActions.Delete]: 'shift.delete', - [ParagraphActions.MoveToUp]: ['ctrlCmd.k', 'ctrlCmd.arrowup'], - [ParagraphActions.MoveToDown]: ['ctrlCmd.j', 'ctrlCmd.arrowdown'], - [ParagraphActions.SelectAbove]: ['k', 'arrowup'], - [ParagraphActions.SelectBelow]: ['j', 'arrowdown'], + [ParagraphActions.MoveToUp]: ['ctrlCmd.k', 'ctrlCmd.arrowup', 'ctrlCmd.arrowleft'], + [ParagraphActions.MoveToDown]: ['ctrlCmd.j', 'ctrlCmd.arrowdown', 'ctrlCmd.arrowright'], + [ParagraphActions.SelectAbove]: ['k', 'arrowup', 'arrowleft'], + [ParagraphActions.SelectBelow]: ['j', 'arrowdown', 'arrowright'], [ParagraphActions.SwitchLineNumber]: 'l', [ParagraphActions.SwitchTitleShow]: 't', [ParagraphActions.SwitchOutputShow]: 'o', diff --git a/zeppelin-web-angular/src/app/utility/element.ts b/zeppelin-web-angular/src/app/utility/element.ts new file mode 100644 index 00000000000..cdae6de0045 --- /dev/null +++ b/zeppelin-web-angular/src/app/utility/element.ts @@ -0,0 +1,19 @@ +/* + * Licensed 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. + */ + +export function scrollIntoViewIfNeeded(element: HTMLElement, center = true): void { + // tslint:disable-next-line:no-any + if (element && typeof (element as any).scrollIntoViewIfNeeded === 'function') { + // tslint:disable-next-line:no-any + (element as any).scrollIntoViewIfNeeded(center); + } +} From c95ef6b546a144101f6f82f8499a9160055ef474 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Fri, 13 Dec 2019 16:48:58 +0800 Subject: [PATCH 2/8] feat: show front-end error in result --- .../share/result/result.component.html | 1 + .../share/result/result.component.ts | 16 ++++++++------ .../app/services/runtime-compiler.service.ts | 22 +++++++++++++------ 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html index 0b246b0efbf..cb8369f273e 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html +++ b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html @@ -68,6 +68,7 @@ 

     
img

   
+  
{{frontEndError}}

   

     
   

diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
index 86d94cce9a0..3683faa2bd6 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
@@ -206,6 +206,7 @@ export class NotebookParagraphResultComponent implements OnInit, AfterViewInit,
   }
 
   renderDefaultDisplay() {
+    this.frontEndError = '';
     switch (this.result.type) {
       case DatasetType.TABLE:
         this.renderGraph();
@@ -240,16 +241,17 @@ export class NotebookParagraphResultComponent implements OnInit, AfterViewInit,
   }
 
   renderAngular(): void {
-    try {
-      this.runtimeCompilerService.createAndCompileTemplate(this.id, this.result.data).then(data => {
+    this.runtimeCompilerService
+      .createAndCompileTemplate(this.id, this.result.data)
+      .then(data => {
         this.angularComponent = data;
-        // this.angularComponent.moduleFactory
+        this.cdr.markForCheck();
+      })
+      .catch(error => {
+        this.angularComponent = null;
+        this.frontEndError = error.message;
         this.cdr.markForCheck();
       });
-    } catch (e) {
-      this.frontEndError = e.message;
-      console.log(e);
-    }
   }
 
   renderText(): void {
diff --git a/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts b/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
index 8ec7f2c36e9..f7f6fc42664 100644
--- a/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
+++ b/zeppelin-web-angular/src/app/services/runtime-compiler.service.ts
@@ -11,15 +11,17 @@
  */
 
 import {
+  ChangeDetectionStrategy,
   Compiler,
   Component,
   Injectable,
-  ModuleWithComponentFactories,
   NgModule,
   NgModuleFactory,
+  NO_ERRORS_SCHEMA,
   Type
 } from '@angular/core';
 
+import { CompileDirectiveMetadata, HtmlParser, TemplateParser } from '@angular/compiler';
 import { RuntimeDynamicModuleModule } from '@zeppelin/core';
 import { NgZService } from './ng-z.service';
 
@@ -33,16 +35,17 @@ export class DynamicTemplate {
   ) {}
 }
 
+export class DynamicTemplateError {
+  constructor(public message: string) {}
+}
+
 @Injectable({
   providedIn: 'root'
 })
 export class RuntimeCompilerService {
-  // tslint:disable-next-line:no-any
-  private compiledModule?: ModuleWithComponentFactories;
-
   public async createAndCompileTemplate(paragraphId: string, template: string): Promise {
     const ngZService = this.ngZService;
-    const dynamicComponent = Component({ template: template })(
+    const dynamicComponent = Component({ template: template, selector: `dynamic-${paragraphId}` })(
       class DynamicTemplateComponent {
         z = {
           set: (key: string, value, id: string) => ngZService.setContextValue(key, value, id),
@@ -63,8 +66,13 @@ export class RuntimeCompilerService {
       imports: [RuntimeDynamicModuleModule]
     })(class DynamicModule {});
 
-    this.compiledModule = await this.compiler.compileModuleAndAllComponentsAsync(dynamicModule);
-    return new DynamicTemplate(template, dynamicComponent, this.compiledModule.ngModuleFactory);
+    try {
+      this.compiler.clearCache();
+      const compiledModule = await this.compiler.compileModuleAndAllComponentsAsync(dynamicModule);
+      return new DynamicTemplate(template, dynamicComponent, compiledModule.ngModuleFactory);
+    } catch (e) {
+      throw new DynamicTemplateError(`${e}`);
+    }
   }
 
   constructor(private compiler: Compiler, private ngZService: NgZService) {}

From 507b2b7321c665a210f64d3494dbfc7127310917 Mon Sep 17 00:00:00 2001
From: Hsuan Lee 
Date: Fri, 13 Dec 2019 17:42:09 +0800
Subject: [PATCH 3/8] fix: notebook cron model error

---
 .../workspace/notebook/action-bar/action-bar.component.ts     | 1 -
 .../src/app/pages/workspace/notebook/notebook.module.ts       | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
index 994acc11cb4..9ec5dedb631 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts
@@ -69,7 +69,6 @@ export class NotebookActionBarComponent extends MessageListenersManager implemen
     { name: '12h', value: '0 0 0/12 * * ?' },
     { name: '1d', value: '0 0 0 * * ?' }
   ];
-
   updateNoteName(name: string) {
     const trimmedNewName = name.trim();
     if (trimmedNewName.length > 0 && this.note.name !== trimmedNewName) {
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
index 64cfdee30fa..4b71d3d8ac8 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts
@@ -45,6 +45,7 @@ import { NotebookParagraphProgressComponent } from './paragraph/progress/progres
 import { NotebookPermissionsComponent } from './permissions/permissions.component';
 import { NotebookRevisionsComparatorComponent } from './revisions-comparator/revisions-comparator.component';
 
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { WorkspaceShareModule } from '../../workspace/share/share.module';
 import { NotebookActionBarComponent } from './action-bar/action-bar.component';
 import { NotebookRoutingModule } from './notebook-routing.module';
@@ -90,7 +91,8 @@ import { NotebookShareModule } from './share/share.module';
     NzGridModule,
     NzRadioModule,
     DragDropModule,
-    NzCodeEditorModule
+    NzCodeEditorModule,
+    NzCheckboxModule
   ]
 })
 export class NotebookModule {}

From 1ec33b652d96802847886ee20c1aa181ffb2f5bc Mon Sep 17 00:00:00 2001
From: Hsuan Lee 
Date: Mon, 16 Dec 2019 10:11:17 +0800
Subject: [PATCH 4/8] fix: quartz url

---
 .../workspace/notebook/action-bar/action-bar.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
index 0238f171aca..93f96ef7f4d 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
@@ -188,7 +188,7 @@
         

           Run note with cron scheduler.
           Either choose from preset or write your own
-          
+          
             cron expression
           
           .

From ad6fc5a52f97f9e7117ca3af6992777a0fefbf52 Mon Sep 17 00:00:00 2001
From: Hsuan Lee 
Date: Mon, 16 Dec 2019 10:41:32 +0800
Subject: [PATCH 5/8] feat: styling table in the HTML result

---
 .../share/result/result.component.less        | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
index f1970729ab9..b83fabc419a 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
@@ -42,6 +42,38 @@
         height: auto;
         width: auto;
       }
+
+      table {
+        border: none;
+        border-collapse: collapse;
+        border-spacing: 0;
+        color: @text-color;
+        table-layout: fixed;
+        width: 100%;
+      }
+      thead {
+        color: @table-header-color;
+        border-bottom: @border-width-base @border-style-base @border-color-split;
+        vertical-align: bottom;
+      }
+      tr, th, td {
+        text-align: right;
+        vertical-align: middle;
+        padding: 0.5em 0.5em;
+        line-height: normal;
+        white-space: normal;
+        max-width: none;
+        border: none;
+      }
+      th {
+        font-weight: bold;
+      }
+      tbody tr:nth-child(odd) {
+        background: darken(@table-header-bg, 3%);
+      }
+      tbody tr:hover {
+        background: @table-row-hover-bg;
+      }
     }
   }
 

From 410e0644eb35642704230c3eebb58033898ecf8c Mon Sep 17 00:00:00 2001
From: Hsuan Lee 
Date: Thu, 19 Dec 2019 19:11:58 +0800
Subject: [PATCH 6/8] chore: adjust styles

---
 zeppelin-web-angular/angular.json                  |  3 ++-
 zeppelin-web-angular/package-lock.json             | 10 ++++++++++
 zeppelin-web-angular/package.json                  |  3 ++-
 .../workspace/interpreter/item/item.component.less |  2 +-
 .../notebook-repos/item/item.component.less        |  2 +-
 .../notebook/action-bar/action-bar.component.html  | 14 +++++++-------
 .../workspace/share/result/result.component.less   |  7 ++++++-
 .../workspace/share/result/result.component.ts     |  7 +++----
 .../src/app/pages/workspace/share/share.module.ts  |  6 +++++-
 .../app/share/node-list/node-list.component.html   |  2 +-
 .../app/share/node-list/node-list.component.less   |  4 ----
 .../pivot-setting/pivot-setting.component.html     |  2 +-
 .../pivot-setting/pivot-setting.component.less     |  6 ++++++
 .../scatter-setting/scatter-setting.component.html |  2 +-
 .../scatter-setting/scatter-setting.component.less |  6 ++++++
 .../src/styles/theme/light/theme-light.less        |  4 ++--
 16 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/zeppelin-web-angular/angular.json b/zeppelin-web-angular/angular.json
index 37904c102f7..095c3881d31 100644
--- a/zeppelin-web-angular/angular.json
+++ b/zeppelin-web-angular/angular.json
@@ -72,7 +72,8 @@
               "src/styles/theme/light/antd-light.less",
               "src/styles.less",
               "./node_modules/highlight.js/styles/github.css",
-              "./node_modules/monaco-editor/min/vs/editor/editor.main.css"
+              "./node_modules/monaco-editor/min/vs/editor/editor.main.css",
+              "./node_modules/github-markdown-css/github-markdown.css"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
diff --git a/zeppelin-web-angular/package-lock.json b/zeppelin-web-angular/package-lock.json
index da898b09ce3..03fb75251b9 100644
--- a/zeppelin-web-angular/package-lock.json
+++ b/zeppelin-web-angular/package-lock.json
@@ -2852,6 +2852,11 @@
         "entities": "^1.1.2"
       }
     },
+    "ansi_up": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-4.0.4.tgz",
+      "integrity": "sha512-vRxC8q6QY918MbehO869biJW4tiunJdjOhi5fpY6NLOliBQlZhOkKgABJKJqH+JZfb/WfjvjN1chLWI6tODerw=="
+    },
     "any-observable": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz",
@@ -6396,6 +6401,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "github-markdown-css": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-3.0.1.tgz",
+      "integrity": "sha512-9G5CIPsHoyk5ObDsb/H4KTi23J8KE1oDd4KYU51qwqeM+lKWAiO7abpSgCkyWswgmSKBiuE7/4f8xUz7f2qAiQ=="
+    },
     "glob": {
       "version": "7.1.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.5.tgz",
diff --git a/zeppelin-web-angular/package.json b/zeppelin-web-angular/package.json
index 670c73cc2ce..9d8cafef99e 100644
--- a/zeppelin-web-angular/package.json
+++ b/zeppelin-web-angular/package.json
@@ -28,10 +28,11 @@
     "@angular/router": "~8.2.10",
     "@antv/data-set": "^0.10.2",
     "@antv/g2": "^3.5.4",
-    "ansi-to-html": "^0.6.11",
+    "ansi_up": "^4.0.4",
     "core-js": "^2.5.4",
     "date-fns": "^1.30.1",
     "diff-match-patch": "^1.0.4",
+    "github-markdown-css": "^3.0.1",
     "highlight.js": "^9.15.8",
     "lodash": "^4.17.11",
     "mathjax": "2.7.5",
diff --git a/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less b/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
index 856506e92f2..746967dc88f 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/interpreter/item/item.component.less
@@ -19,7 +19,7 @@
 
   ::ng-deep .interpreter-item {
     &.edit {
-      background: @orange-1;
+      //background: @orange-1;
     }
     .ant-card-body {
       margin-top: -@card-padding-base;
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
index bc6d2805eb8..7e242390dcf 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook-repos/item/item.component.less
@@ -20,7 +20,7 @@
 
   ::ng-deep .repo-item {
     &.edit {
-      background: @orange-1;
+      //background: @orange-1;
     }
   }
 
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
index 93f96ef7f4d..1da21e63a63 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html
@@ -125,11 +125,9 @@
               (click)="toggleExtension('revisions')">
         
       
-      
-        
-      
+      
       
         
    
           
  • 
@@ -188,7 +186,8 @@
         
    
           Run note with cron scheduler.
           Either choose from preset or write your own
-          
+          
             cron expression
           
           .
@@ -226,7 +225,8 @@
       
-      
       
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
index b83fabc419a..ce42bbc1a41 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
@@ -29,6 +29,11 @@
   }
 
   ::ng-deep {
+
+    .visualization-selector .ant-radio-button-wrapper {
+      padding: 0 10px;
+    }
+
     .inner-html, .text-plain {
 
       overflow: auto;
@@ -53,7 +58,7 @@
       }
       thead {
         color: @table-header-color;
-        border-bottom: @border-width-base @border-style-base @border-color-split;
+        border-bottom: 2px @border-style-base fade(@black, 65%);
         vertical-align: bottom;
       }
       tr, th, td {
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
index 3683faa2bd6..c8b75b903a6 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts
@@ -29,7 +29,7 @@ import { DomSanitizer, SafeHtml, SafeUrl } from '@angular/platform-browser';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import * as Convert from 'ansi-to-html';
+import { default as AnsiUp } from 'ansi_up';
 import * as hljs from 'highlight.js';
 import { NzResizeEvent } from 'ng-zorro-antd/resizable';
 import { utils, writeFile, WorkSheet, WritingOptions } from 'xlsx';
@@ -255,9 +255,8 @@ export class NotebookParagraphResultComponent implements OnInit, AfterViewInit,
   }
 
   renderText(): void {
-    // tslint:disable-next-line:no-any
-    const convert: any = new Convert();
-    this.plainText = this.sanitizer.bypassSecurityTrustHtml(convert.toHtml(this.result.data));
+    const ansiUp = new AnsiUp();
+    this.plainText = this.sanitizer.bypassSecurityTrustHtml(ansiUp.ansi_to_html(this.result.data));
   }
 
   renderImg(): void {
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts b/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
index a381779f5c5..37bebf3ab83 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/share.module.ts
@@ -28,6 +28,8 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { ShareModule } from '@zeppelin/share';
 import { VisualizationModule } from '@zeppelin/visualizations/visualization.module';
 
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzInputModule } from 'ng-zorro-antd/input';
 import { NotebookParagraphDynamicFormsComponent } from './dynamic-forms/dynamic-forms.component';
 import { NotebookParagraphResultComponent } from './result/result.component';
 
@@ -48,7 +50,9 @@ import { NotebookParagraphResultComponent } from './result/result.component';
     NzIconModule,
     NzCheckboxModule,
     NzSelectModule,
-    NzSwitchModule
+    NzSwitchModule,
+    NzInputModule,
+    NzGridModule
   ]
 })
 export class WorkspaceShareModule {}
diff --git a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
index 70be6910499..7800443217f 100644
--- a/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
+++ b/zeppelin-web-angular/src/app/share/node-list/node-list.component.html
@@ -72,7 +72,7 @@ 
    
         
         
           
-            
+            
             
               {{ node.title }}
             
diff --git a/zeppelin-web-angular/src/app/share/node-list/node-list.component.less b/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
index aec40c15ccf..ea197e40200 100644
--- a/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
+++ b/zeppelin-web-angular/src/app/share/node-list/node-list.component.less
@@ -48,10 +48,6 @@
       filter: grayscale(1);
     }
 
-    i {
-      margin-right: 6px;
-    }
-
     .operation {
       margin-left: 12px;
 
diff --git a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
index 2a91d7beccd..fb1497f43db 100644
--- a/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
+++ b/zeppelin-web-angular/src/app/visualizations/common/pivot-setting/pivot-setting.component.html
@@ -10,7 +10,7 @@
   ~ limitations under the License.
   -->
 
-
+
   
    
 
-
+
   
    
Date: Fri, 20 Dec 2019 10:14:16 +0800
Subject: [PATCH 7/8] chore: reset the editor theme

---
 zeppelin-web-angular/src/app/app.module.ts          |  4 ++--
 zeppelin-web-angular/src/app/languages/load.ts      | 13 +++++++++++--
 .../workspace/share/result/result.component.less    |  1 -
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/zeppelin-web-angular/src/app/app.module.ts b/zeppelin-web-angular/src/app/app.module.ts
index 06be7f4f6f1..5f651027048 100644
--- a/zeppelin-web-angular/src/app/app.module.ts
+++ b/zeppelin-web-angular/src/app/app.module.ts
@@ -25,7 +25,7 @@ import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 
 import { MESSAGE_INTERCEPTOR, TRASH_FOLDER_ID_TOKEN } from '@zeppelin/interfaces';
-import { loadMonacoLanguage } from '@zeppelin/languages';
+import { loadMonacoBefore } from '@zeppelin/languages';
 import { TicketService } from '@zeppelin/services';
 import { ShareModule } from '@zeppelin/share';
 
@@ -37,7 +37,7 @@ import { RUNTIME_COMPILER_PROVIDERS } from './app-runtime-compiler.providers';
 import { AppComponent } from './app.component';
 
 export const loadMonaco = () => {
-  loadMonacoLanguage();
+  loadMonacoBefore();
 };
 
 registerLocaleData(en);
diff --git a/zeppelin-web-angular/src/app/languages/load.ts b/zeppelin-web-angular/src/app/languages/load.ts
index 5dad459c888..64c617acd6e 100644
--- a/zeppelin-web-angular/src/app/languages/load.ts
+++ b/zeppelin-web-angular/src/app/languages/load.ts
@@ -10,10 +10,19 @@
  * limitations under the License.
  */
 
-import { languages } from 'monaco-editor';
+import { editor, languages } from 'monaco-editor';
 import { conf as ScalaConf, language as ScalaLanguage } from './scala';
 
-export const loadMonacoLanguage = () => {
+export const loadMonacoBefore = () => {
+  editor.defineTheme('zeppelin-theme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.lineHighlightBackground': '#0000FF10'
+    }
+  });
+  editor.setTheme('zeppelin-theme');
   languages.register({ id: 'scala' });
   languages.setMonarchTokensProvider('scala', ScalaLanguage);
   languages.setLanguageConfiguration('scala', ScalaConf);
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
index ce42bbc1a41..37f0dcb16a8 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.less
@@ -54,7 +54,6 @@
         border-spacing: 0;
         color: @text-color;
         table-layout: fixed;
-        width: 100%;
       }
       thead {
         color: @table-header-color;

From 73271f24d5b310a7b22a20a29f47c75006480118 Mon Sep 17 00:00:00 2001
From: Hsuan Lee 
Date: Fri, 20 Dec 2019 16:36:26 +0800
Subject: [PATCH 8/8] chore: add visualization theme config

---
 zeppelin-web-angular/package-lock.json        |  13 --
 .../pages/workspace/workspace.component.ts    |   2 +
 .../bar-chart-visualization.component.ts      |   3 +
 .../src/app/visualizations/g2.config.ts       | 130 ++++++++++++++++++
 4 files changed, 135 insertions(+), 13 deletions(-)
 create mode 100644 zeppelin-web-angular/src/app/visualizations/g2.config.ts

diff --git a/zeppelin-web-angular/package-lock.json b/zeppelin-web-angular/package-lock.json
index 03fb75251b9..8c82716f71c 100644
--- a/zeppelin-web-angular/package-lock.json
+++ b/zeppelin-web-angular/package-lock.json
@@ -2844,14 +2844,6 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
       "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
     },
-    "ansi-to-html": {
-      "version": "0.6.12",
-      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.12.tgz",
-      "integrity": "sha512-qBkIqLW979675mP76yB7yVkzeAWtATegdnDQ0RA3CZzknx0yUlNxMSML4xFdBfTs2GWYFQ1FELfbGbVSPzJ+LA==",
-      "requires": {
-        "entities": "^1.1.2"
-      }
-    },
     "ansi_up": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-4.0.4.tgz",
@@ -5543,11 +5535,6 @@
       "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
       "dev": true
     },
-    "entities": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
-    },
     "err-code": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/err-code/-/err-code-1.1.2.tgz",
diff --git a/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts b/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
index 976e44b5d00..410ef17c7f3 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
+++ b/zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts
@@ -18,6 +18,7 @@ import { ActivatedRoute, NavigationEnd, Route, Router } from '@angular/router';
 import { publishedSymbol, Published } from '@zeppelin/core/paragraph-base/published';
 import { HeliumManagerService } from '@zeppelin/helium-manager';
 import { MessageService } from '@zeppelin/services';
+import { setTheme } from '@zeppelin/visualizations/g2.config';
 import { log } from 'ng-zorro-antd/core';
 
 @Component({
@@ -47,6 +48,7 @@ export class WorkspaceComponent implements OnInit, OnDestroy {
       this.websocketConnected = data;
       this.cdr.markForCheck();
     });
+    setTheme();
     this.heliumManagerService.initPackages();
   }
 
diff --git a/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts b/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
index 82ed55f0dcf..22944451cb2 100644
--- a/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
+++ b/zeppelin-web-angular/src/app/visualizations/bar-chart/bar-chart-visualization.component.ts
@@ -83,6 +83,9 @@ export class BarChartVisualizationComponent extends G2VisualizationComponentBase
     const key = this.getKey();
     this.setScale();
 
+    this.chart.tooltip({
+      shared: false
+    });
     if (get(this.config.setting, 'multiBarChart.stacked', false)) {
       this.chart
         .intervalStack()
diff --git a/zeppelin-web-angular/src/app/visualizations/g2.config.ts b/zeppelin-web-angular/src/app/visualizations/g2.config.ts
new file mode 100644
index 00000000000..aa5a4e9e30e
--- /dev/null
+++ b/zeppelin-web-angular/src/app/visualizations/g2.config.ts
@@ -0,0 +1,130 @@
+/*
+ * Licensed 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 * as G2 from '@antv/g2';
+
+const DEFAULT_COLOR = '#03578c';
+const COLOR_PLATE_8 = ['#03578c', '#179bd4', '#bf4f07', '#005041', '#8543E0', '#57c2e9', '#03138c', '#8c0357'];
+
+const COLOR_PLATE_16 = [
+  '#03588C',
+  '#82B8D9',
+  '#025959',
+  '#FACC14',
+  '#E6965C',
+  '#223273',
+  '#7564CC',
+  '#8543E0',
+  '#5C8EE6',
+  '#13C2C2',
+  '#5CA3E6',
+  '#3436C7',
+  '#B381E6',
+  '#F04864',
+  '#D598D9'
+];
+const COLOR_PLATE_24 = [
+  '#03588C',
+  '#66B5FF',
+  '#82B8D9',
+  '#025959',
+  '#027368',
+  '#9AE65C',
+  '#FACC14',
+  '#E6965C',
+  '#57AD71',
+  '#223273',
+  '#738AE6',
+  '#7564CC',
+  '#8543E0',
+  '#A877ED',
+  '#5C8EE6',
+  '#13C2C2',
+  '#70E0E0',
+  '#5CA3E6',
+  '#3436C7',
+  '#8082FF',
+  '#DD81E6',
+  '#F04864',
+  '#FA7D92',
+  '#D598D9'
+];
+const COLOR_PIE = ['#03588C', '#13C2C2', '#025959', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273'];
+const COLOR_PIE_16 = [
+  '#03588C',
+  '#73C9E6',
+  '#13C2C2',
+  '#6CD9B3',
+  '#025959',
+  '#9DD96C',
+  '#FACC14',
+  '#E6965C',
+  '#F04864',
+  '#D66BCA',
+  '#8543E0',
+  '#8E77ED',
+  '#3436C7',
+  '#737EE6',
+  '#223273',
+  '#7EA2E6'
+];
+
+const zeppelinTheme = {
+  defaultColor: DEFAULT_COLOR,
+  colors: COLOR_PLATE_8,
+  colors_16: COLOR_PLATE_16,
+  colors_24: COLOR_PLATE_24,
+  colors_pie: COLOR_PIE,
+  colors_pie_16: COLOR_PIE_16,
+  shape: {
+    point: {
+      fill: DEFAULT_COLOR
+    },
+    hollowPoint: {
+      stroke: DEFAULT_COLOR
+    },
+    interval: {
+      fill: DEFAULT_COLOR
+    },
+    hollowInterval: {
+      stroke: DEFAULT_COLOR
+    },
+    area: {
+      fill: DEFAULT_COLOR
+    },
+    polygon: {
+      fill: DEFAULT_COLOR
+    },
+    hollowPolygon: {
+      stroke: DEFAULT_COLOR
+    },
+    hollowArea: {
+      stroke: DEFAULT_COLOR
+    },
+    line: {
+      stroke: DEFAULT_COLOR
+    },
+    edge: {
+      stroke: DEFAULT_COLOR
+    },
+    schema: {
+      stroke: DEFAULT_COLOR
+    }
+  }
+};
+
+export function setTheme() {
+  const theme = G2.Util.deepMix(G2.Global, zeppelinTheme);
+  console.log(zeppelinTheme);
+  // tslint:disable-next-line:no-any
+  (G2.Global as any).setTheme(theme);
+}