feat: add plotly link, stack components

Author: ngfelixl

apps/dev-server/src/main.ts

@@ -107,4 +107,5 @@ import { PlotType } from 'plotly.js';
   } as Layout;
 
   plot(data, layout);
+  plot(data, layout);
 })();

apps/web/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { TutorialComponent } from './components/tutorial/tutorial.component';
 import { PlotsService } from './services/plots.service';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
+import { PlotComponent } from './components/plot/plot.component';
 
 @NgModule({
   declarations: [
@@ -21,6 +22,7 @@ import { MatListModule } from '@angular/material/list';
     StacksComponent,
     StackComponent,
     OverviewComponent,
+    PlotComponent,
   ],
   imports: [
     AppRoutingModule,

apps/web/src/app/components/app/app.component.css

@@ -26,3 +26,8 @@ mat-toolbar {
   flex: 0 0 auto;
   justify-content: space-between;
 }
+
+.info-icons {
+  display: flex;
+  gap: 8px;
+}

apps/web/src/app/components/app/app.component.html

@@ -2,11 +2,15 @@
   <span class="brand">
     <button mat-flat-button color="primary">NodePlotLib</button>
   </span>
-  <span>
+  <span class="info-icons">
     <a href="https://github.com/ngfelixl/nodeplotlib" target="_blank"
       ><button mat-icon-button>
         <img src="/assets/github-light-32px.png" /></button
     ></a>
+    <a href="https://plotly.com/javascript/" target="_blank"
+      ><button mat-icon-button>
+        <img src="/assets/plotly.svg" /></button
+    ></a>
   </span>
 </mat-toolbar>
 <main>

apps/web/src/app/components/plot/plot.component.css

@@ -0,0 +1 @@
+<div #plotContainer></div>

apps/web/src/app/components/plot/plot.component.html

@@ -0,0 +1,25 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { PlotData } from '@npl/interfaces';
+
+// eslint-disable-next-line
+declare const Plotly: any;
+
+@Component({
+  selector: 'npl-plot',
+  templateUrl: './plot.component.html',
+  styleUrls: ['./plot.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PlotComponent implements AfterViewInit {
+  @Input() plotData!: PlotData;
+  @ViewChild('plotContainer', {static: false}) plotContainer!: ElementRef;
+
+  ngAfterViewInit() {
+    Plotly.newPlot(
+      this.plotContainer.nativeElement,
+      this.plotData.data,
+      {...(this.plotData.layout ?? {}), autosize: true},
+      {responsive: true}
+    )
+  }
+}

apps/web/src/app/components/plot/plot.component.ts

@@ -0,0 +1,5 @@
+:host {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+  grid-gap: 24px;
+}

apps/web/src/app/components/stack/stack.component.css

@@ -1 +1 @@
-<p>stack works!</p>
+<npl-plot *ngFor="let plot of plots$ | async" [plotData]="plot"></npl-plot>

apps/web/src/app/components/stack/stack.component.html

@@ -1,9 +1,37 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { combineLatest, Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { PlotsService } from '../../services/plots.service';
 
 @Component({
   selector: 'npl-stack',
   templateUrl: './stack.component.html',
   styleUrls: ['./stack.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class StackComponent {}
+export class StackComponent {
+  stackId$: Observable<number|null> = this.activatedRoute.params.pipe(map(params => params.id ? +params.id : null), tap(console.log));
+  plots$ = combineLatest([
+    this.stackId$,
+    this.plotsService.data$
+  ]).pipe(
+    tap((data) => console.log(data)),
+    map(([stackId, { stacks, plots }]) => {
+      if (stackId === null) {
+        return [];
+      }
+      const stack = stacks.entities[stackId];
+      if (!stack) {
+        return [];
+      }
+
+      return stack.plotIds.map(id => plots.entities[id])
+    })
+  );
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private plotsService: PlotsService
+  ) {}
+}