Add basic file map

frontend/package-lock.json

@@ -1899,8 +1899,15 @@
     "@types/node": {
       "version": "12.12.36",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.36.tgz",
-      "integrity": "sha512-hmmypvyO/uTLFYCYu6Hlb3ydeJ11vXRxg8/WJ0E3wvwmPO0y47VqnfmXFVuWlysO0Zyj+je1Y33rQeuYkZ51GQ==",
-      "dev": true
+      "integrity": "sha512-hmmypvyO/uTLFYCYu6Hlb3ydeJ11vXRxg8/WJ0E3wvwmPO0y47VqnfmXFVuWlysO0Zyj+je1Y33rQeuYkZ51GQ=="
+    },
+    "@types/papaparse": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.0.3.tgz",
+      "integrity": "sha512-SgWGWnBGxl6XgjKDM2eoDg163ZFQtH6m6C2aOuaAf1T2gUB3rjaiPDDARbY9WlacRgZqieRG9imAfJaJ+5ouDA==",
+      "requires": {
+        "@types/node": "*"
+      }
     },
     "@types/q": {
       "version": "1.5.2",
@@ -8805,6 +8812,11 @@
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "dev": true
     },
+    "papaparse": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.2.0.tgz",
+      "integrity": "sha512-ylq1wgUSnagU+MKQtNeVqrPhZuMYBvOSL00DHycFTCxownF95gpLAk1HiHdUW77N8yxRq1qHXLdlIPyBSG9NSA=="
+    },
     "parallel-transform": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",

frontend/package.json

@@ -19,8 +19,10 @@
     "@angular/router": "~9.1.0",
     "@nebular/eva-icons": "5.0.0",
     "@nebular/theme": "^5.0.0",
+    "@types/papaparse": "^5.0.3",
     "d3": "^5.16.0",
     "eva-icons": "^1.1.2",
+    "papaparse": "^5.2.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

frontend/src/app/view/view-data/view-data.component.html

@@ -1 +1,8 @@
 <div #tree></div>
+
+<div *ngFor="let post of temp">
+  {{ post.author }}
+  {{ post.message }}
+</div>
+
+<input type="file" (change)="parseFile($event)" />

frontend/src/app/view/view-data/view-data.component.ts

@@ -6,6 +6,7 @@ import {
   AfterViewInit,
 } from '@angular/core';
 import { Router } from '@angular/router';
+import * as Papa from 'papaparse';
 import * as d3 from 'd3';
 
 /* TODO: move this to separated files */
@@ -41,13 +42,40 @@ export class ViewDataComponent implements OnInit, AfterViewInit {
   private treeContainer: ElementRef;
 
   data: ForumData;
-  tempdata: any;
+  temp: Array<Post>;
+  names: Array<{ id: string; name: string }>;
 
   constructor(private router: Router) {
     const fetch = JSON.parse(
       this.router.getCurrentNavigation()?.extras.state?.data
     );
     this.data = fetch as ForumData;
+    this.temp = this.data.discussions[0].posts as Post[];
+  }
+
+  parsedData = (file: any): Promise<{ id: string; name: string }[]> => {
+    return new Promise((resolve, _) => {
+      Papa.parse(file, {
+        header: true,
+        skipEmptyLines: true,
+        complete: (result) => {
+          resolve(result.data as { id: string; name: string }[]);
+        },
+      });
+    });
+  };
+
+  async parseFile(e: any) {
+    let tempNames: Array<{ id: string; name: string }>;
+
+    const file = e.target.files[0];
+    tempNames = await this.parsedData(file);
+
+    this.temp = this.temp.map((item) => {
+      let index = tempNames.findIndex((data) => data.id === item.author);
+      item.author = index !== -1 ? tempNames[index].name : item.author;
+      return item;
+    });
   }
 
   makeHierarchy(): void {
@@ -115,13 +143,6 @@ export class ViewDataComponent implements OnInit, AfterViewInit {
       .attr('r', 25)
       .style('fill', '#fff')
       .style('stroke', '#ccc')
-      .on('mouseover', function (d) {
-        tooltip.transition().duration(200).style('opacity', 1);
-        tooltip
-          .html(`Wiadomość: ${d.data.message}`)
-          .style('left', `${d3.select(this).attr('cx')}px`)
-          .style('top', `${d3.select(this).attr('cy')}px`);
-      })
       .on('mouseover', (d) => {
         tooltip.transition().duration(400).style('opacity', 1);
         tooltip