You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by zj...@apache.org on 2020/06/25 11:10:00 UTC
[zeppelin] branch master updated: [ZEPPELIN-4835] Add notebook
selection tree sidebar
This is an automated email from the ASF dual-hosted git repository.
zjffdu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
The following commit(s) were added to refs/heads/master by this push:
new abf2017 [ZEPPELIN-4835] Add notebook selection tree sidebar
abf2017 is described below
commit abf20179266bcaf8bb0dba838a9f909f77f37d12
Author: Pranav Tharoor <pr...@gmail.com>
AuthorDate: Sun Jun 21 06:22:59 2020 +0530
[ZEPPELIN-4835] Add notebook selection tree sidebar
### What is this PR for?
Currently, in the new Zeppelin GUI, a notebook selection tree is available through a drop-down. This PR adds a resizable sidebar which can be kept open while in the notebook page and used to easily switch between notebooks.
### What type of PR is it?
Improvement
### Todos
* [ ] - N/A
### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-4835
### How should this be tested?
Travis CI: https://travis-ci.com/github/pranavtharoor/zeppelin/builds/172356026
Manual steps:
1. Start the new Zeppelin GUI from zeppelin-web-angular
2. Open any notebook
3. Click on the folder icon on the left (below the action bar) to open the sidebar
4. Resize the sidebar by dragging its right edge
5. Scroll through the notebook
6. Try alternate themes such as 'simple' and 'default'
### Screenshots (if appropriate)
<img width="1680" alt="Screenshot 2020-06-21 at 11 15 49 AM" src="https://user-images.githubusercontent.com/22600061/85218095-7cf2e600-b3b4-11ea-951d-309f0a20e2fd.png">
<img width="1680" alt="Screenshot 2020-06-21 at 11 16 05 AM" src="https://user-images.githubusercontent.com/22600061/85218100-82503080-b3b4-11ea-80e7-7c03b12f2c6f.png">
<img width="1680" alt="Screenshot 2020-06-21 at 11 16 24 AM" src="https://user-images.githubusercontent.com/22600061/85218103-84b28a80-b3b4-11ea-9a46-01d2f66ce852.png">
<img width="1680" alt="Screenshot 2020-06-21 at 11 16 44 AM" src="https://user-images.githubusercontent.com/22600061/85218106-85e3b780-b3b4-11ea-888b-cb56974d19f0.png">
### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Author: Pranav Tharoor <pr...@gmail.com>
Closes #3812 from pranavtharoor/master and squashes the following commits:
892874900 [Pranav Tharoor] [ZEPPELIN-4835] Add notebook selection tree sidebar
---
.../notebook/action-bar/action-bar.component.less | 5 +-
.../workspace/notebook/notebook.component.html | 97 +++++++++++++---------
.../workspace/notebook/notebook.component.less | 70 +++++++++++++++-
.../pages/workspace/notebook/notebook.component.ts | 16 ++++
.../pages/workspace/notebook/notebook.module.ts | 4 +-
.../workspace/share/result/result.component.html | 3 +-
6 files changed, 148 insertions(+), 47 deletions(-)
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.less b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.less
index 5161d77..07a4450 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.less
@@ -44,14 +44,15 @@
margin-left: -1px;
}
.bar {
- height: 50px;
+ height: 60px;
background: @component-background;
box-shadow: -2px 4px 2px 0 rgba(0, 0, 0, 0.06);
- padding: 0 15px;
+ padding: 5px 15px 5px 40px;
position: absolute;
width: 100%;
top: 0;
line-height: 50px;
+ z-index: 30;
&.simple {
box-shadow: none;
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html
index b204c86..52b8c96 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html
@@ -22,46 +22,63 @@
[currentRevision]="currentRevision"
(tableHideChange)="setAllParagraphTableHide($event)"
(editorHideChange)="setAllParagraphEditorHide($event)"></zeppelin-notebook-action-bar>
- <div class="extension-area" [ngSwitch]="activatedExtension" *ngIf="activatedExtension!=='hide'">
- <zeppelin-notebook-interpreter-binding *ngSwitchCase="'interpreter'"
- [noteId]="note.id"
- [(activatedExtension)]="activatedExtension"
- [interpreterBindings]="interpreterBindings"></zeppelin-notebook-interpreter-binding>
- <zeppelin-notebook-permissions *ngSwitchCase="'permissions'"
- [noteId]="note.id"
- [(activatedExtension)]="activatedExtension"
- [permissions]="permissions"></zeppelin-notebook-permissions>
- <zeppelin-notebook-revisions-comparator *ngSwitchCase="'revisions'"></zeppelin-notebook-revisions-comparator>
- </div>
- <div class="paragraph-area">
- <zeppelin-note-form-block *ngIf="isShowNoteForms"
- [formDefs]="note.noteForms"
- [paramDefs]="note.noteParams"
- [noteTitle]="note.config?.noteFormTitle"
- (noteFormChange)="onNoteFormChange($event)"
- (noteFormNameRemove)="onFormNameRemove($event)"
- (noteTitleChange)="onNoteTitleChange($event)">
- </zeppelin-note-form-block>
- <div class="paragraph-inner" nz-row>
- <zeppelin-notebook-paragraph nz-col
- *ngFor="let p of note.paragraphs;let first = first; let last = last; index as i"
- [nzSpan]="p.config.colWidth * 2"
- [select]="p.id === selectId"
- [scrolled]="p.id === scrolledId"
- [index]="i"
- [paragraph]="p"
- [note]="note"
- [looknfeel]="note.config.looknfeel"
- [interpreterBindings]="interpreterBindings"
- [collaborativeMode]="collaborativeMode"
- [viewOnly]="viewOnly"
- [revisionView]="revisionView"
- [first]="first"
- [last]="last"
- (selectAtIndex)="onSelectAtIndex($event)"
- (selected)="onParagraphSelect($event)"
- (triggerSaveParagraph)="saveParagraph($event)"
- (saveNoteTimer)="startSaveTimer()"></zeppelin-notebook-paragraph>
+ <div class="flex-container">
+ <div class="sidebar-area"
+ nz-resizable
+ [nzMaxWidth]="!isSidebarOpen ? 30 : 800"
+ [nzMinWidth]="!isSidebarOpen ? 30 : 280"
+ (nzResize)="onResizeSidebar($event)"
+ [style.min-width.px]="!isSidebarOpen ? 30 : sidebarWidth">
+ <button class="sidebar-toggle" (click)="toggleSidebar()">
+ <i *ngIf="!isSidebarOpen" nz-icon nzType="folder" nzTheme="outline"></i>
+ <i *ngIf="isSidebarOpen" nz-icon nzType="folder-open" nzTheme="outline"></i>
+ </button>
+ <zeppelin-node-list *ngIf="isSidebarOpen"></zeppelin-node-list>
+ <nz-resize-handle *ngIf="isSidebarOpen" nzDirection="right"><div class="sidebar-resize"></div></nz-resize-handle>
+ </div>
+ <div class="notebook-area">
+ <div class="extension-area" [ngSwitch]="activatedExtension" *ngIf="activatedExtension!=='hide'">
+ <zeppelin-notebook-interpreter-binding *ngSwitchCase="'interpreter'"
+ [noteId]="note.id"
+ [(activatedExtension)]="activatedExtension"
+ [interpreterBindings]="interpreterBindings"></zeppelin-notebook-interpreter-binding>
+ <zeppelin-notebook-permissions *ngSwitchCase="'permissions'"
+ [noteId]="note.id"
+ [(activatedExtension)]="activatedExtension"
+ [permissions]="permissions"></zeppelin-notebook-permissions>
+ <zeppelin-notebook-revisions-comparator *ngSwitchCase="'revisions'"></zeppelin-notebook-revisions-comparator>
+ </div>
+ <div class="paragraph-area">
+ <zeppelin-note-form-block *ngIf="isShowNoteForms"
+ [formDefs]="note.noteForms"
+ [paramDefs]="note.noteParams"
+ [noteTitle]="note.config?.noteFormTitle"
+ (noteFormChange)="onNoteFormChange($event)"
+ (noteFormNameRemove)="onFormNameRemove($event)"
+ (noteTitleChange)="onNoteTitleChange($event)">
+ </zeppelin-note-form-block>
+ <div class="paragraph-inner" nz-row>
+ <zeppelin-notebook-paragraph nz-col
+ *ngFor="let p of note.paragraphs;let first = first; let last = last; index as i"
+ [nzSpan]="p.config.colWidth * 2"
+ [select]="p.id === selectId"
+ [scrolled]="p.id === scrolledId"
+ [index]="i"
+ [paragraph]="p"
+ [note]="note"
+ [looknfeel]="note.config.looknfeel"
+ [interpreterBindings]="interpreterBindings"
+ [collaborativeMode]="collaborativeMode"
+ [viewOnly]="viewOnly"
+ [revisionView]="revisionView"
+ [first]="first"
+ [last]="last"
+ (selectAtIndex)="onSelectAtIndex($event)"
+ (selected)="onParagraphSelect($event)"
+ (triggerSaveParagraph)="saveParagraph($event)"
+ (saveNoteTimer)="startSaveTimer()"></zeppelin-notebook-paragraph>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.less b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.less
index 582bbb7..4c0e7cd 100644
--- a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.less
+++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.less
@@ -18,19 +18,85 @@
background: @layout-body-background;
display: block;
position: relative;
- padding-top: 50px;
+ padding-top: 60px;
min-height: calc(~"100vh - 50px");
&.simple {
background: @component-background;
}
}
+
+ .flex-container {
+ display: flex;
+ }
+
+ .sidebar-area {
+ box-shadow: 4px 0px 2px 0 rgba(0, 0, 0, 0.06);
+ border-right: solid thin @component-background;;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background: @component-background;
+ padding: 20px;
+ z-index: 25;
+ position: sticky;
+ top: 0px;
+ height: 100vh;
+ }
+
+ .sidebar-toggle {
+ width: 40px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 10px 0;
+ font-size: 20px;
+ z-index: 30;
+ }
+
+ .sidebar-resize {
+ height: 100%;
+ width: 5px;
+ transition: all 0.2s ease;
+
+ &:hover {
+ border-right: solid 2px #5d99f8;
+ }
+ }
+
+ .simple .sidebar-area {
+ box-shadow: none;
+
+ .sidebar-toggle {
+ opacity: 0;
+ transition: opacity 0.2s ease;
+ }
+
+ &:hover {
+ border-right: solid thin rgba(0, 0, 0, 0.06);
+
+ .sidebar-toggle {
+ opacity: 1;
+ }
+ }
+
+ }
+
+ .notebook-area {
+ overflow: hidden;
+ }
+
.extension-area {
padding: 24px;
background: @component-background;
box-shadow: -2px 4px 2px 0 rgba(0, 0, 0, 0.06);
+ position: sticky;
+ top: 0px;
+ z-index: 20;
}
.paragraph-area {
- margin: 6px 0 0 0;
+ padding: 0 5px;
}
});
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 9a0ecc9..e672251 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
@@ -24,6 +24,8 @@ import { isNil } from 'lodash';
import { Subject } from 'rxjs';
import { distinctUntilKeyChanged, map, startWith, takeUntil } from 'rxjs/operators';
+import { NzResizeEvent } from 'ng-zorro-antd/resizable';
+
import { MessageListener, MessageListenersManager } from '@zeppelin/core';
import { Permissions } from '@zeppelin/interfaces';
import {
@@ -70,6 +72,9 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
saveTimer = null;
interpreterBindings: InterpreterBindingItem[] = [];
activatedExtension: 'interpreter' | 'permissions' | 'revisions' | 'hide' = 'hide';
+ sidebarWidth = 330;
+ sidebarAnimationFrame = -1;
+ isSidebarOpen = false;
@MessageListener(OP.NOTE)
getNote(data: MessageReceiveDataTypeMap[OP.NOTE]) {
@@ -335,6 +340,17 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
this.cdr.markForCheck();
}
+ toggleSidebar() {
+ this.isSidebarOpen = !this.isSidebarOpen;
+ }
+
+ onResizeSidebar({ width }: NzResizeEvent): void {
+ cancelAnimationFrame(this.sidebarAnimationFrame);
+ this.sidebarAnimationFrame = requestAnimationFrame(() => {
+ this.sidebarWidth = width!;
+ });
+ }
+
constructor(
private activatedRoute: ActivatedRoute,
public messageService: MessageService,
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 49a6230..a7e8ef9 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
@@ -29,6 +29,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
import { NzPopoverModule } from 'ng-zorro-antd/popover';
import { NzProgressModule } from 'ng-zorro-antd/progress';
import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzResizableModule } from 'ng-zorro-antd/resizable';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzSwitchModule } from 'ng-zorro-antd/switch';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
@@ -94,7 +95,8 @@ import { NotebookShareModule } from './share/share.module';
NzRadioModule,
DragDropModule,
NzCodeEditorModule,
- NzCheckboxModule
+ NzCheckboxModule,
+ NzResizableModule
]
})
export class NotebookModule {}
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 cb8369f..5391aea 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
@@ -52,8 +52,7 @@
nzPreview
(nzResizeEnd)="onResize($event)"
[nzGridColumnCount]="12"
- [nzMinColumn]="1"
- nzBounds="window">
+ [nzMinColumn]="1">
<nz-resize-handle nzDirection="bottomRight" *ngIf="!published">
<zeppelin-resize-handle></zeppelin-resize-handle>
</nz-resize-handle>