show how to cite as a dialog rather than quick tour

common/constants.js

@@ -128,15 +128,8 @@
     TOP_MENU: `These icons provide access to plugins, pinned datasets, and user documentation. Use the profile icon to login with your EBRAINS account.`,
     LAYER_SELECTOR: `This is the atlas layer browser. If an atlas supports multiple template spaces or parcellation maps, you will find them here.`,
     STATUS_CARD: `This is the coordinate navigator. Expand it to manipulate voxel and physical coordinates, to reset the view, or to create persistent links to the current view for sharing.`,
-    CITATION: `You will find a "chip" shaped label at the bottom-left of the screen (next to the layer selector) which indicates your currently selected parcellation map, e.g. Julich-Brain Cytoarchitectonic Maps 2.9. Click on (i), which will subsequently open up a description box with an "Explore" button (box-and-arrow icon) at the bottom. Click on this button, which will lead you to the EBRAINS Knowledge Graph webpage for the complete parcellation map dataset. Here you can click on the "How to cite" option on the left to access the appropriate citation for your selected parcellation/template. In addition, don't forget to also cite the siibra-explorer website: https://atlases.ebrains.eu/viewer/`,
   }
 
   exports.QUICKTOUR_DESC_MD = {
-    CITATION: `
-## How to cite from siibra-explorer
-
-You will find a "chip" shaped label at the bottom-left of the screen (next to the layer selector) which indicates your currently selected parcellation map, e.g. _Julich-Brain Cytoarchitectonic Maps 2.9_. Click on (i), which will subsequently open up a description box with an "Explore" button (box-and-arrow icon) at the bottom. Click on this button, which will lead you to the EBRAINS Knowledge Graph webpage for the complete parcellation map dataset. Here you can click on the "How to cite" option on the left to access the appropriate citation for your selected parcellation/template. In addition, don't forget to also cite the _siibra-explorer_ website: <https://atlases.ebrains.eu/viewer/>
-
-`
   }
 })(typeof exports === 'undefined' ? module.exports : exports)

common/howToCite.md

+## How to cite from siibra-explorer
+
+You will find a "chip" shaped label at the bottom-left of the screen (next to the layer selector) which indicates your currently selected parcellation map, e.g. _Julich-Brain Cytoarchitectonic Maps 2.9_. 
+
+
+
+[![Chip shaped label](assets/images/how-to-cite-1.png)](assets/images/how-to-cite-1.png)
+
+Click on (i), which will subsequently open up a description box with an "Explore" button (box-and-arrow icon) at the bottom. 
+
+---
+
+[![Explore button](assets/images/how-to-cite-2.png)](assets/images/how-to-cite-2.png)
+
+
+
+Click on this button, which will lead you to the EBRAINS Knowledge Graph webpage for the complete parcellation map dataset. Here you can click on the "How to cite" option on the left to access the appropriate citation for your selected parcellation/template.
+
+---
+
+[![How to cite](assets/images/how-to-cite-3.png)](assets/images/how-to-cite-3.png)
+
+In addition, don't forget to also cite the _siibra-explorer_ website: <https://atlases.ebrains.eu/viewer/>

src/ui/help/helpOnePager/helpOnePager.component.ts

+import { MatDialog } from '@angular/material/dialog';
 import { Component, Optional } from "@angular/core";
 import { PureContantService } from "src/util";
 import { ARIA_LABELS } from 'common/constants'
+import { HowToCite } from '../howToCite/howToCite.component';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { default: QUICK_STARTER } = require('!!raw-loader!common/helpOnePager.md')
@@ -19,11 +21,16 @@ export class HelpOnePager{
   public extQuickStarter: string
   public userDoc: string
   constructor(
-    @Optional() pConstService: PureContantService
+    @Optional() pConstService: PureContantService,
+    private dialog: MatDialog,
   ){
     this.extQuickStarter = `quickstart.html`
     if (pConstService) {
       this.userDoc = pConstService.docUrl
     }
   }
+
+  howToCite(){
+    this.dialog.open(HowToCite)
+  }
 }

src/ui/help/helpOnePager/helpOnePager.template.html

@@ -15,6 +15,15 @@
 </div>
 
 <div mat-dialog-actions align="center">
+
+  <button mat-button color="primary"
+    (click)="howToCite()">
+    <i class = "fas fa-book m-1"></i>
+    <span>
+      How to cite
+    </span>
+  </button>
+
   <button mat-button color="primary" mat-dialog-close quick-tour-opener>
     <i class = "far fa-play-circle m-1"></i>
     <span>

src/ui/help/howToCite/howToCite.component.ts

+import { Component } from "@angular/core";
+
+const { default: HOWTOCITE } = require('!!raw-loader!common/howToCite.md')
+
+@Component({
+  selector: 'how-to-cite',
+  templateUrl: './howToCite.template.html',
+  styleUrls: [
+    './howToCite.style.css'
+  ]
+})
+
+export class HowToCite{
+  public HOWTOCITE = HOWTOCITE
+}
\ No newline at end of file

src/ui/help/howToCite/howToCite.style.css

+:host >>> img
+{
+  width: 100%;
+}
\ No newline at end of file

src/ui/help/howToCite/howToCite.template.html

+<markdown-dom mat-dialog-content [markdown]="HOWTOCITE">
+</markdown-dom>
\ No newline at end of file

src/ui/help/module.ts

@@ -6,6 +6,7 @@ import { AngularMaterialModule } from "src/sharedModules";
 import { AboutCmp } from './about/about.component'
 import { HelpOnePager } from "./helpOnePager/helpOnePager.component";
 import {QuickTourModule} from "src/ui/quickTour/module";
+import { HowToCite } from "./howToCite/howToCite.component";
 
 @NgModule({
   imports: [
@@ -18,6 +19,7 @@ import {QuickTourModule} from "src/ui/quickTour/module";
   declarations: [
     AboutCmp,
     HelpOnePager,
+    HowToCite,
   ],
   exports: [
     AboutCmp,

src/util/pureConstant.service.ts

@@ -187,9 +187,9 @@ function getNehubaConfig(space: TSpaceFull) {
 export class PureContantService implements OnDestroy{
   
   private subscriptions: Subscription[] = []
-  public repoUrl = `https://github.com/HumanBrainProject/interactive-viewer`
+  public repoUrl = `https://github.com/FZJ-INM1-BDA/siibra-explorer`
   public supportEmailAddress = `support@ebrains.eu`
-  public docUrl = `https://interactive-viewer.readthedocs.io/en/latest/`
+  public docUrl = `https://siibra-explorer.readthedocs.io/`
 
   public showHelpSupportText: string = `Did you encounter an issue?
 Send us an email: <a target = "_blank" href = "mailto:${this.supportEmailAddress}">${this.supportEmailAddress}</a>

src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.component.ts

 import { Component, EventEmitter, Output, Pipe, PipeTransform } from "@angular/core";
 import { IQuickTourData } from "src/ui/quickTour";
-import { CONST, ARIA_LABELS, QUICKTOUR_DESC, QUICKTOUR_DESC_MD } from 'common/constants'
+import { CONST, ARIA_LABELS, QUICKTOUR_DESC } from 'common/constants'
 import { select, Store } from "@ngrx/store";
 import { viewerStateContextedSelectedRegionsSelector, viewerStateGetOverlayingAdditionalParcellations, viewerStateParcVersionSelector, viewerStateSelectedParcellationSelector } from "src/services/state/viewerState/selectors";
 import { distinctUntilChanged, map } from "rxjs/operators";
@@ -36,12 +36,6 @@ export class ViewerStateBreadCrumb {
     description: QUICKTOUR_DESC.CHIPS,
   }
 
-  public quickTourCitation: IQuickTourData = {
-    order: 5.1,
-    description: QUICKTOUR_DESC.CITATION,
-    descriptionMd: QUICKTOUR_DESC_MD.CITATION,
-  }
-
   public clearViewKeys$ = this.store$.pipe(
     select(ngViewerSelectorClearViewEntries)
   )

src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.template.html

@@ -188,9 +188,6 @@
         fontIcon="fa-info-circle"
         iav-stop="click"
         quick-tour
-        [quick-tour-description]="quickTourCitation.description"
-        [quick-tour-description-md]="quickTourCitation.descriptionMd"
-        [quick-tour-order]="quickTourCitation.order"
         iav-dataset-show-dataset-dialog
         [iav-dataset-show-dataset-dialog-name]="originDatainfo.name"
         [iav-dataset-show-dataset-dialog-description]="originDatainfo.description"