[ZEPPELIN-4502] Adjust global styles and theming the visualization

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": [

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",

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);

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';

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);

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;

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;
     }
   }
 

zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.html

@@ -125,11 +125,9 @@
               (click)="toggleExtension('revisions')">
         <i nz-icon nzType="swap" nzTheme="outline"></i>
       </button>
-      <nz-button-group nzSize="small">
-        <button nz-button nz-dropdown [nzDropdownMenu]="revisionsMenu" nzTrigger="click">
-          {{currentRevision}}
-        </button>
-      </nz-button-group>
+      <button nz-button nz-dropdown [nzDropdownMenu]="revisionsMenu" nzTrigger="click">
+        {{currentRevision}}
+      </button>
       <nz-dropdown-menu #revisionsMenu="nzDropdownMenu">
         <ul nz-menu>
           <li nz-menu-item *ngFor="let r of noteRevisions" (click)="visitRevision(r)">
@@ -188,7 +186,8 @@
         <div class="ant-dropdown-menu padding-sm scheduler">
           Run note with cron scheduler.
           Either choose from preset or write your own
-          <a href="http://www.quartz-scheduler.org/documentation/quartz-2.1.x/tutorials/crontrigger" target="_blank">
+          <a href="https://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-06.html"
+             target="_blank">
             cron expression
           </a>
           .
@@ -226,7 +225,8 @@
       <button nz-button nzNoAnimation (click)="togglePermissions()">
         <i nz-icon nzType="lock" [nzTheme]="activatedExtension === 'permissions' ? 'fill' : 'outline'"></i>
       </button>
-      <button [nzDropdownMenu]="menu" nz-button nzNoAnimation nzSize="small" nz-dropdown nzTrigger="click">{{note.config.looknfeel}}
+      <button [nzDropdownMenu]="menu" nz-button nzNoAnimation nzSize="small" nz-dropdown
+              nzTrigger="click">{{note.config.looknfeel}}
         <i nz-icon nzType="down"></i>
       </button>
       <nz-dropdown-menu #menu="nzDropdownMenu">

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) {

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());
+          });
+        }
       }
     }
   }

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 {}

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();
   }

zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.html

@@ -68,6 +68,7 @@
     <div *ngSwitchCase="datasetType.TEXT" class="text-plain"><pre [innerHTML]="plainText"></pre></div>
     <div *ngSwitchCase="datasetType.IMG" class="img"><img [src]="imgData" alt="img"></div>
   </ng-container>
+  <div *ngIf="frontEndError" class="text-plain"><pre>{{frontEndError}}</pre></div>
   <div *ngIf="angularComponent">
     <ng-container *ngComponentOutlet="angularComponent.component;ngModuleFactory: angularComponent.moduleFactory;injector: injector"></ng-container>
   </div>

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;
@@ -42,6 +47,37 @@
         height: auto;
         width: auto;
       }
+
+      table {
+        border: none;
+        border-collapse: collapse;
+        border-spacing: 0;
+        color: @text-color;
+        table-layout: fixed;
+      }
+      thead {
+        color: @table-header-color;
+        border-bottom: 2px @border-style-base fade(@black, 65%);
+        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;
+      }
     }
   }
 

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';
@@ -206,6 +206,7 @@ export class NotebookParagraphResultComponent implements OnInit, AfterViewInit,
   }
 
   renderDefaultDisplay() {
+    this.frontEndError = '';
     switch (this.result.type) {
       case DatasetType.TABLE:
         this.renderGraph();
@@ -240,22 +241,22 @@ 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 {
-    // 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 {

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 {}

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();
   }