🎇 Add in tutorial list

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

src/components/image-labelling/image-labelling-info/image-labelling-info.component.scss

@@ -16,7 +16,7 @@
     border-bottom: 0.0625vw solid rgb(255, 255, 255, 0.25);
     display: flex;
     justify-content: space-between;
-    z-index: 1000;
+    z-index: 1;
     position: absolute;
 }
 

src/components/image-labelling/image-labelling-project/image-labelling-project.component.scss

@@ -39,7 +39,7 @@
     height: 100%;
     right: 0;
     position: fixed;
-    z-index: 1000;
+    z-index: 1;
     min-width: 18.5vw;
     max-width: 18.5vw;
 }
@@ -51,7 +51,8 @@
     background: #383535;
     border: 0.0325vw solid rgb(255, 255, 255, 0.25);
     border-top: none;
-    z-index: 1000;
+    position: relative;
+    z-index: 1;
     align-items: stretch;
     &::after {
         position: absolute;
@@ -71,7 +72,7 @@
 }
 
 .tab {
-    position: sticky;
+    position: relative;
     overflow: hidden;
     &::before {
         @include tab-after();
@@ -116,6 +117,8 @@
     @include tab-close-styling();
     flex: 1 0 60%;
     justify-content: right;
+    position: relative;
+    z-index: 1;
 }
 
 .div-close {
@@ -143,9 +146,10 @@
     padding: 2.5vh 0 0 0.2vw;
     scroll-behavior: smooth;
     overflow: hidden auto;
-    z-index: 100;
+    z-index: 1;
     min-width: 15.5vw;
     max-width: 15.5vw;
+    position: relative;
 }
 
 .scroll {

src/shared/components/page-header/page-header.component.html

@@ -37,6 +37,34 @@
     </div>
     <!-------------------------- Right Side Page Header -------------------------->
     <div class="container-flex-end">
+        <div>
+            <img
+                class="img utility-icon-light"
+                src="assets/icons/help.svg"
+                alt="tutorial"
+                [title]="help | translate"
+                (click)="toggleTutorialMenu()"
+            />
+            <div class="tutorial-dropdown-menu scroll" *ngIf="tutorialMenuToggle === true">
+                <div class="tutorial" #tutorial1 (click)="tutorialConfig(true, tutorial1.innerText.toString())">
+                    How to Create Project
+                    <img class="icon" src="assets/icons/project.svg" alt="project icon" />
+                </div>
+                <div class="tutorial" #tutorial2 (click)="tutorialConfig(true, tutorial2.innerText.toString())">
+                    How to Draw Bounding Box
+                    <img class="icon" src="assets/icons/bounding_box.svg" alt="bounding box icon" />
+                </div>
+                <div class="tutorial" #tutorial3 (click)="tutorialConfig(true, tutorial3.innerText.toString())">
+                    How to Draw Polygon
+                    <img class="icon" src="assets/icons/polygon.svg" alt="polygon icon" />
+                </div>
+                <div class="tutorial" #tutorial4 (click)="tutorialConfig(true, tutorial4.innerText.toString())">
+                    Show Project Statistics
+                    <img class="icon" src="assets/icons/statistic.svg" alt="statistic icon" />
+                </div>
+            </div>
+        </div>
+
         <ng-container *ngFor="let logo of jsonSchema.logos; index as i">
             <div class="utility-icon-container">
                 <img
@@ -45,7 +73,6 @@
                     [src]="logo.imgPath"
                     [alt]="logo.alt"
                     [title]="logo.hoverLabel | translate"
-                    (click)="logo.onClick()"
                 />
             </div>
         </ng-container>

src/shared/components/page-header/page-header.component.scss

@@ -155,3 +155,42 @@
     cursor: pointer;
     font-size: 2vh;
 }
+
+.icon {
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
+    padding-left: 10px;
+    padding-bottom: 3px;
+}
+
+.tutorial {
+    box-shadow: 0 2px 7px 0 rgb(0, 0, 0, 0.2);
+    line-height: 50px;
+    padding-left: 40px;
+    padding-right: 40px;
+    text-align: center;
+    cursor: pointer;
+    &:hover {
+        background-color: #464a4e;
+    }
+    position: relative;
+    z-index: 1000;
+    vertical-align: center;
+}
+
+.tutorial-dropdown-menu {
+    position: absolute;
+    color: white;
+    font-size: 2vh;
+    top: 6vh;
+    right: 2vw;
+    background-color: #30353a;
+    padding: 0.1rem;
+    border-radius: 0.5rem;
+    transform: translateY(-10px);
+    transition: 150ms ease-in-out, transform 150ms ease-in-out;
+    z-index: 1000;
+    overflow: hidden auto;
+    max-height: 50vh;
+}

src/shared/components/page-header/page-header.component.ts

@@ -5,7 +5,7 @@ import { TutorialService, TutorialState } from './../../services/tutorial.servic
  * found in the LICENSE file at https://github.com/CertifaiAI/Classifai_FrontEnd/blob/main/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { IconSchema } from 'shared/types/icon/icon.model';
 import { ImgLabelProps } from 'shared/types/image-labelling/image-labelling.model';
@@ -39,6 +39,12 @@ export class PageHeaderComponent implements OnInit {
     jsonSchema!: IconSchema;
     private unsubscribe$: Subject<any> = new Subject();
     private tutorialState!: TutorialState;
+    tutorialMenuToggle: boolean = false;
+    isToggle: boolean = false;
+    createProjectIntro: boolean = false;
+    bndBoxIntro: boolean = false;
+    polygonIntro: boolean = false;
+    help: string = 'pageHeader.tutorial';
     headerLabels: HeaderLabelSchema[] = [
         {
             name: 'pageHeader.home',
@@ -193,6 +199,37 @@ export class PageHeaderComponent implements OnInit {
         },
     ];
 
+    readonly projectStatisticsId = 'modal-project-statistics-tutorial';
+    readonly projectStatisticTitle = 'Show Project Statistics';
+    readonly projectStatisticTutorial = [
+        {
+            imageTutorialPath: 'assets/tutorial/project_statistics/dm_project_statistics_initial.gif',
+            imageTutorialAlt: 'How to open project statistic in dataset card',
+            imageTutorialDesc:
+                'Click the three dots of dataset card, and choose project statistic. ' +
+                'Initially, if no annotation has been performed, the current project statistics will show as in the diagram',
+        },
+        {
+            imageTutorialPath: 'assets/tutorial/project_statistics/dm_project_statistics_dataset.gif',
+            imageTutorialAlt: 'Charts plotted for the selected project',
+            imageTutorialDesc:
+                'When annotation had performed, charts will be plotted for the statistics of selected project',
+        },
+        {
+            imageTutorialPath: 'assets/tutorial/project_statistics/dm_project_statistics_figures.gif',
+            imageTutorialAlt: 'Check the number of labelled image, unlabelled image and label per class',
+            imageTutorialDesc:
+                'Hover over the pie chart and bar chart to check the numbers of labelled images' +
+                ' unlabelled images and label of each classes.',
+        },
+        {
+            imageTutorialPath: 'assets/tutorial/project_statistics/dm_project_statistics_workspace.gif',
+            imageTutorialAlt: 'How to open project statistic in workspace',
+            imageTutorialDesc:
+                'In the workspace, click the statistic icon located at the right side bar to check the project statistics.',
+        },
+    ];
+
     tutorialIdx: number = 0;
     modalIdTutorial: string = this.createProjectId;
     tutorial: Tutorial[] = this.createProjectTutorial;
@@ -209,6 +246,7 @@ export class PageHeaderComponent implements OnInit {
         private _router: Router,
         private _modalService: ModalService,
         private _tutorialService: TutorialService,
+        private elementRef: ElementRef,
     ) {
         const { url } = _router;
         this.bindImagePath(url);
@@ -218,50 +256,73 @@ export class PageHeaderComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.tutorialConfig(false);
+        this.tutorialConfig(false, '');
     }
 
-    tutorialConfig(ignoreCheckState: boolean) {
-      const pageURL = this._router.url;
-      if (pageURL === '/dataset') {
-          if (!this.tutorialState.createProject || ignoreCheckState) {
-              this.modalTitle = this.createProjectTitle;
-              this.modalIdTutorial = this.createProjectId;
-              this.tutorial = this.createProjectTutorial;
-              this._tutorialService.setState({ createProject: true });
-              this.openTutorial(ignoreCheckState);
-          }
-      } else if (pageURL === '/imglabel/bndbox') {
-          if (!this.tutorialState.drawBbox || ignoreCheckState) {
-              this.modalTitle = this.drawBboxTitle;
-              this.modalIdTutorial = this.drawBboxId;
-              this.tutorial = this.drawBboxTutorial;
-              this._tutorialService.setState({ drawBbox: true });
-              this.openTutorial(ignoreCheckState);
-          }
-      } else if (pageURL === '/imglabel/seg') {
-          if (!this.tutorialState.drawPolygon || ignoreCheckState) {
-              this.modalTitle = this.drawPolygonTitle;
-              this.modalIdTutorial = this.drawPolygonId;
-              this.tutorial = this.drawPolygonTutorial;
-              this._tutorialService.setState({ drawPolygon: true });
-              this.openTutorial(ignoreCheckState);
-          }
-      }
+    tutorialConfig(ignoreCheckState: boolean, tutorialName: string) {
+        const pageURL = this._router.url;
+        if (pageURL === '/dataset' && !this.createProjectIntro && !this.tutorialState.createProject) {
+            this.createProjectIntro = true;
+            this.modalTitle = this.createProjectTitle;
+            this.modalIdTutorial = this.createProjectId;
+            this.tutorial = this.createProjectTutorial;
+            this._tutorialService.setState({ createProject: true });
+            this.openTutorial(true);
+        } else if (pageURL === '/imglabel/bndbox' && !this.bndBoxIntro && !this.tutorialState.drawBbox) {
+            this.bndBoxIntro = true;
+            this.modalTitle = this.drawBboxTitle;
+            this.modalIdTutorial = this.drawBboxId;
+            this.tutorial = this.drawBboxTutorial;
+            this._tutorialService.setState({ drawBbox: true });
+            this.openTutorial(true);
+        } else if (pageURL === '/imglabel/seg' && !this.polygonIntro && !this.tutorialState.drawPolygon) {
+            this.polygonIntro = true;
+            this.modalTitle = this.drawPolygonTitle;
+            this.modalIdTutorial = this.drawPolygonId;
+            this.tutorial = this.drawPolygonTutorial;
+            this._tutorialService.setState({ drawPolygon: true });
+            this.openTutorial(true);
+        } else if (tutorialName === 'How to Create Project ') {
+            this.modalTitle = this.createProjectTitle;
+            this.modalIdTutorial = this.createProjectId;
+            this.tutorial = this.createProjectTutorial;
+            this._tutorialService.setState({ createProject: true });
+            this.openTutorial(ignoreCheckState);
+        } else if (tutorialName === 'How to Draw Bounding Box ') {
+            this.modalTitle = this.drawBboxTitle;
+            this.modalIdTutorial = this.drawBboxId;
+            this.tutorial = this.drawBboxTutorial;
+            this._tutorialService.setState({ drawBbox: true });
+            this.openTutorial(ignoreCheckState);
+        } else if (tutorialName === 'How to Draw Polygon ') {
+            this.modalTitle = this.drawPolygonTitle;
+            this.modalIdTutorial = this.drawPolygonId;
+            this.tutorial = this.drawPolygonTutorial;
+            this._tutorialService.setState({ drawPolygon: true });
+            this.openTutorial(ignoreCheckState);
+        } else if (tutorialName === 'Show Project Statistics ') {
+            this.modalTitle = this.projectStatisticTitle;
+            this.modalIdTutorial = this.projectStatisticsId;
+            this.tutorial = this.projectStatisticTutorial;
+            this._tutorialService.setState({ projectStatistics: true });
+            this.openTutorial(ignoreCheckState);
+        }
+        this.tutorialMenuToggle = false;
+        this.isToggle = false;
     }
 
     openTutorial(ignoreCheckState: boolean) {
         if (!ignoreCheckState) {
-          setTimeout(() => {
-              this.tutorialIdx = 0;
-              this._modalService.open(this.modalIdTutorial);
-          }, 1000);
+            setTimeout(() => {
+                this.tutorialIdx = 0;
+                this._modalService.open(this.modalIdTutorial);
+            }, 1000);
         } else {
-          // Must set delay to wait for component to reload
-          setTimeout(() => {
-              this.tutorialIdx = 0;
-              this._modalService.open(this.modalIdTutorial);
-          }, 100);
+            // Must set delay to wait for component to reload
+            setTimeout(() => {
+                this.tutorialIdx = 0;
+                this._modalService.open(this.modalIdTutorial);
+            }, 100);
         }
     }
 
@@ -301,18 +362,30 @@ export class PageHeaderComponent implements OnInit {
                       ]
                     : [
                           {
-                              imgPath: `assets/icons/help.svg`,
-                              hoverLabel: `pageHeader.tutorial`,
-                              alt: `Tutorial`,
-                              onClick: () => this.tutorialConfig(true),
+                              imgPath: `assets/icons/profile.svg`,
+                              hoverLabel: `pageHeader.profile`,
+                              alt: `Profile`,
+                              onClick: () => null,
                           },
-                          {
-                            imgPath: `assets/icons/profile.svg`,
-                            hoverLabel: `pageHeader.profile`,
-                            alt: `Profile`,
-                            onClick: () => null,
-                        }
                       ],
         };
     };
+
+    toggleTutorialMenu() {
+        if (this.isToggle) {
+            this.tutorialMenuToggle = false;
+            this.isToggle = false;
+        } else {
+            this.tutorialMenuToggle = true;
+            this.isToggle = true;
+        }
+    }
+
+    @HostListener('document:click', ['$event.target'])
+    resetSelection(target: EventTarget) {
+        const withinComponent = this.elementRef.nativeElement.contains(target);
+        if (!withinComponent) {
+            this.tutorialMenuToggle = false;
+        }
+    }
 }