Add icon when user edited label, create sticky subheader

frontend/src/app/_interfaces/predictedposts.ts

@@ -4,4 +4,5 @@ export interface PredictedPost {
   label: string[];
   message: string[];
   para_id: number[];
+  user_updated: boolean[];
 }

frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html

@@ -1,5 +1,9 @@
 <div class="discussion-viewer">
-  <div class="discussion-viewer__buttons-container">
+  <div
+    subheader
+    class="discussion-viewer__buttons-container"
+    [ngClass]="{ scrolled: scrollPosition.y > 40 }"
+  >
     <button
       nbButton
       status="primary"
@@ -38,6 +42,7 @@
           [loadedLabel]="item.label[i]"
           [paragraphId]="item.para_id[i]"
           [discussionId]="id"
+          [userEdited]="item.user_updated[i]"
         ></app-styled-paragraph>
       </nb-card-body>
     </nb-card>

frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.scss

@@ -1,9 +1,22 @@
 .discussion-viewer {
   display: flex;
   flex-flow: column nowrap;
+
+  nb-card:first-of-type {
+    margin-top: 2rem;
+  }
+
   &__buttons-container {
+    position: sticky;
+    margin: -2.25rem -2.25rem 0;
+    top: 4.75rem;
+    display: flex;
+    flex-flow: row nowrap;
+    background-color: white;
+    z-index: 2000;
+    box-shadow: 0px 10px 17px -15px rgba(0, 0, 0, 0.88);
     button {
-      margin: 1rem 1rem 1rem 0;
+      margin: 1rem 0rem 1rem 1rem;
     }
   }
 }

frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.ts

@@ -2,10 +2,14 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { GetDiscussionService } from '../../_services/get-discussion.service';
 import { PredictedPost } from '../../_interfaces/predictedposts';
-import { Subscription, of } from 'rxjs';
-import { concatMap, defaultIfEmpty } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { concatMap, defaultIfEmpty, map } from 'rxjs/operators';
 import { ParagraphService } from 'src/app/_services/paragraph.service';
-import { NbToastrService } from '@nebular/theme';
+import {
+  NbToastrService,
+  NbLayoutScrollService,
+  NbScrollPosition,
+} from '@nebular/theme';
 import * as Papa from 'papaparse';
 
 @Component({
@@ -20,14 +24,18 @@ export class DiscussionViewerComponent implements OnInit, OnDestroy {
   subscriptionId: Subscription;
   displayNamesMode: boolean;
   parsedNames: { id: number; name: string }[];
+  scrollPosition: NbScrollPosition;
 
   constructor(
     private getDiscussionService: GetDiscussionService,
     private paragraphService: ParagraphService,
     private activatedRouter: ActivatedRoute,
     private router: Router,
-    private toastService: NbToastrService
-  ) {}
+    private toastService: NbToastrService,
+    private scrollService: NbLayoutScrollService
+  ) {
+    this.scrollPosition = { x: 0, y: 0 };
+  }
 
   ngOnInit(): void {
     this.subscriptionData = this.activatedRouter.params
@@ -40,6 +48,12 @@ export class DiscussionViewerComponent implements OnInit, OnDestroy {
       .subscribe((result) => {
         this.data = result.posts;
       });
+    this.scrollService
+      .onScroll()
+      .pipe(concatMap(() => this.scrollService.getPosition()))
+      .subscribe((result) => {
+        this.scrollPosition = result;
+      });
   }
 
   ngOnDestroy(): void {

frontend/src/app/main-view/main-view.module.ts

@@ -21,6 +21,7 @@ import {
   NbMenuModule,
   NbButtonModule,
   NbSelectModule,
+  NbIconModule,
 } from '@nebular/theme';
 
 @NgModule({
@@ -42,6 +43,7 @@ import {
     NbMenuModule,
     NbButtonModule,
     NbSelectModule,
+    NbIconModule,
   ],
   providers: [GetDiscussionService, ParagraphService, MapIdService],
 })

frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.html

@@ -1,11 +1,18 @@
 <div class="discussion-viewer__paragraph">
-  <span
-    class="border paragraph"
-    [ngClass]="loadedLabel"
-    [nbTooltip]="loadedLabel"
-  >
-    {{ message }}
-  </span>
+  <div class="discussion-viewer__text-and-icon">
+    <span
+      class="border paragraph"
+      [ngClass]="loadedLabel"
+      [nbTooltip]="loadedLabel"
+    >
+      {{ message }}
+    </span>
+    <nb-icon
+      icon="person"
+      *ngIf="userEdited"
+      nbTooltip="Ten paragraf został edytowany manualnie"
+    ></nb-icon>
+  </div>
 
   <div class="discussion-viewer__select">
     <label class="label">

frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.scss

@@ -1,12 +1,12 @@
 @import "../../../themes";
 
 .border {
-  border-width: medium;
-  border-style: solid;
-  padding: 4px;
+  border-left-width: 8px;
+  border-left-style: solid;
+  padding: 5px 0px 5px 8px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
-  border-radius: 10px;
+  border-radius: 1px;
   max-width: 100ch;
   display: inline-block;
 }
@@ -60,4 +60,11 @@
     display: flex;
     flex-flow: column;
   }
+  &__text-and-icon {
+    display: flex;
+    align-items: center;
+    nb-icon {
+      margin-left: 0.5rem;
+    }
+  }
 }

frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.ts

@@ -11,6 +11,7 @@ export class StyledParagraphComponent {
   @Input() loadedLabel: string;
   @Input() paragraphId: number;
   @Input() discussionId: number;
+  @Input() userEdited: boolean;
   availableLabels: string[] = [
     'pozytywna',
     'negatywna',

frontend/src/app/main-view/visualize-forum/visualize-forum.component.ts

@@ -1,6 +1,5 @@
 import {
   Component,
-  OnInit,
   OnDestroy,
   ViewChild,
   ElementRef,
@@ -9,7 +8,7 @@ import {
 import { ActivatedRoute } from '@angular/router';
 import { GetVisualizationDataService } from '../../_services/get-visualization-data.service';
 import { Subscription } from 'rxjs';
-import { concatMap, finalize } from 'rxjs/operators';
+import { concatMap } from 'rxjs/operators';
 import { Post } from 'src/app/_interfaces/post';
 import * as d3 from 'd3';
 import maked3hierarchy from '../../_functions/maked3hierarchy';
@@ -106,6 +105,7 @@ export class VisualizeForumComponent implements AfterViewInit, OnDestroy {
       .attr('x', (d: any) => d.x)
       .attr('y', (d: any) => d.y)
       .attr('text-anchor', 'middle')
+      .attr('class', 'h6')
       .text((d: any) => d.data.id);
 
     nodeEnter