[ZEPPELIN-4552] Support scroll to the paragraph specified by the url param

zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html

@@ -12,7 +12,7 @@
 
 <nz-card [nzTitle]="titleTemplateRef">
   <ng-template #titleTemplateRef>
-    <a [routerLink]="routerLink">{{displayName}}</a>
+    <a [routerLink]="routerLink" [queryParams]="queryParams">{{displayName}}</a>
   </ng-template>
   <zeppelin-code-editor
     [style.height.px]="height"

zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.ts

@@ -20,6 +20,7 @@ import {
   OnDestroy,
   SimpleChanges
 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { NotebookSearchResultItem } from '@zeppelin/interfaces';
 import { getKeywordPositions, KeywordPosition } from '@zeppelin/utility/get-keyword-positions';
 import { editor, Range } from 'monaco-editor';
@@ -34,9 +35,9 @@ import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
 })
 export class NotebookSearchResultItemComponent implements OnChanges, OnDestroy {
   @Input() result: NotebookSearchResultItem;
-
+  queryParams = {};
   displayName = '';
-  routerLink = '';
+  routerLink = [];
   mergedStr: string;
   keywords: string[] = [];
   highlightPositions: KeywordPosition[] = [];
@@ -54,13 +55,23 @@ export class NotebookSearchResultItemComponent implements OnChanges, OnDestroy {
     contextmenu: false
   };
 
-  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}
+  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef, private router: ActivatedRoute) {}
 
   setDisplayNameAndRouterLink(): void {
-    const noteId = this.result.id.split('/', 2)[0];
+    const term = this.router.snapshot.params.queryStr;
+    const listOfId = this.result.id.split('/');
+    const [noteId, hasParagraph, paragraph] = listOfId;
+    if (!hasParagraph) {
+      this.routerLink = ['/', 'notebook', this.result.id];
+      this.queryParams = {};
+    } else {
+      this.routerLink = ['/', 'notebook', noteId];
+      this.queryParams = {
+        paragraph,
+        term
+      };
+    }
     this.displayName = this.result.name ? this.result.name : `Note ${noteId}`;
-
-    this.routerLink = `/notebook/${noteId}`;
   }
 
   setHighlightKeyword(): void {

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

@@ -47,6 +47,7 @@
                                    *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"

zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts

@@ -22,7 +22,7 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { isNil } from 'lodash';
 import { Subject } from 'rxjs';
-import { distinctUntilKeyChanged, takeUntil } from 'rxjs/operators';
+import { distinctUntilKeyChanged, map, startWith, takeUntil } from 'rxjs/operators';
 
 import { MessageListener, MessageListenersManager } from '@zeppelin/core';
 import { Permissions } from '@zeppelin/interfaces';
@@ -58,6 +58,7 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
   note: Note['note'];
   permissions: Permissions;
   selectId: string | null = null;
+  scrolledId: string | null = null;
   isOwner = true;
   noteRevisions: RevisionListItem[] = [];
   currentRevision: string;
@@ -248,6 +249,10 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
     this.selectId = id;
   }
 
+  onParagraphScrolled(id: string) {
+    this.scrolledId = id;
+  }
+
   onSelectAtIndex(index: number) {
     const scopeIndex = Math.min(this.note.paragraphs.length, Math.max(0, index));
     if (this.note.paragraphs[scopeIndex]) {
@@ -345,6 +350,16 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
   }
 
   ngOnInit() {
+    this.activatedRoute.queryParamMap
+      .pipe(
+        startWith(this.activatedRoute.snapshot.queryParamMap),
+        takeUntil(this.destroy$),
+        map(data => data.get('paragraph'))
+      )
+      .subscribe(id => {
+        this.onParagraphSelect(id);
+        this.onParagraphScrolled(id);
+      });
     this.activatedRoute.params
       .pipe(
         takeUntil(this.destroy$),

zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts

@@ -11,6 +11,7 @@
  */
 
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -62,7 +63,7 @@ type Mode = 'edit' | 'command';
   },
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NotebookParagraphComponent extends ParagraphBase implements OnInit, OnChanges, OnDestroy {
+export class NotebookParagraphComponent extends ParagraphBase implements OnInit, OnChanges, OnDestroy, AfterViewInit {
   @ViewChild(NotebookParagraphCodeEditorComponent, { static: false })
   notebookParagraphCodeEditorComponent: NotebookParagraphCodeEditorComponent;
   @ViewChildren(NotebookParagraphResultComponent) notebookParagraphResultComponents: QueryList<
@@ -73,6 +74,7 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
   @Input() looknfeel: string;
   @Input() revisionView: boolean;
   @Input() select: boolean = false;
+  @Input() scrolled: boolean = false;
   @Input() index: number = -1;
   @Input() viewOnly: boolean;
   @Input() last: boolean;
@@ -608,25 +610,36 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
       });
   }
 
+  scrollIfNeeded(): void {
+    if (this.scrolled && this.host.nativeElement) {
+      setTimeout(() => {
+        this.host.nativeElement.scrollIntoView();
+      });
+    }
+  }
   ngOnChanges(changes: SimpleChanges): void {
-    const { index, select } = changes;
+    const { index, select, scrolled } = changes;
     if (
       (index && index.currentValue !== index.previousValue && this.select) ||
       (select && select.currentValue === true && select.previousValue !== true)
     ) {
-      if (this.host.nativeElement) {
-        setTimeout(() => {
-          if (this.mode === 'command') {
-            (this.host.nativeElement as HTMLElement).focus();
-          }
-        });
-      }
+      setTimeout(() => {
+        if (this.mode === 'command' && this.host.nativeElement) {
+          (this.host.nativeElement as HTMLElement).focus();
+        }
+      });
+    }
+    if (scrolled) {
+      this.scrollIfNeeded();
     }
   }
 
   getElement(): HTMLElement {
     return this.host && this.host.nativeElement;
   }
+  ngAfterViewInit(): void {
+    this.scrollIfNeeded();
+  }
 
   ngOnDestroy(): void {
     super.ngOnDestroy();