From 0cd819a956fbd2d0e2a7051b43e752d865cbc3a9 Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Tue, 28 Nov 2023 10:32:21 +0100
Subject: [PATCH 01/12] add: getting cookies(WIP)

---
 electron/cookies.js                           |  0
 electron/handleEvents.js                      | 95 +++++++++++--------
 electron/main.js                              | 90 +++++++++++-------
 src/app/app.module.ts                         |  4 +-
 src/app/cookieviz/cookieviz.component.css     |  0
 src/app/cookieviz/cookieviz.component.html    |  1 +
 src/app/cookieviz/cookieviz.component.spec.ts | 21 ++++
 src/app/cookieviz/cookieviz.component.ts      |  8 ++
 src/app/services/browsing.service.ts          | 43 +++++----
 9 files changed, 170 insertions(+), 92 deletions(-)
 create mode 100644 electron/cookies.js
 create mode 100644 src/app/cookieviz/cookieviz.component.css
 create mode 100644 src/app/cookieviz/cookieviz.component.html
 create mode 100644 src/app/cookieviz/cookieviz.component.spec.ts
 create mode 100644 src/app/cookieviz/cookieviz.component.ts

diff --git a/electron/cookies.js b/electron/cookies.js
new file mode 100644
index 0000000..e69de29
diff --git a/electron/handleEvents.js b/electron/handleEvents.js
index 61f11f4..b4ed400 100644
--- a/electron/handleEvents.js
+++ b/electron/handleEvents.js
@@ -1,45 +1,58 @@
-const { ipcMain } = require('electron');
+const { ipcMain, session } = require("electron");
 
 function initEventsHandler(mainWin, browserView) {
-    const winContent = mainWin.webContents;
-    const browserContent = browserView.webContents;
-
-    ipcMain.handle('toogle-dev-tool', () => {
-        if (winContent.isDevToolsOpened()) {
-            winContent.closeDevTools();
-        } else {
-            winContent.openDevTools({ mode: 'detach' });
-        }
-    });
-
-    ipcMain.handle('go-back', () => {
-        browserContent.goBack();
-    });
-
-    ipcMain.handle('can-go-back', () => {
-        return browserContent.canGoBack();
-    });
-
-    ipcMain.handle('go-forward', () => {
-        browserContent.goForward();
-    });
-    
-    ipcMain.handle('refresh', () => {
-        browserContent.reload();
-    });
-
-    ipcMain.handle('can-go-forward', () => {
-        return browserContent.canGoForward();
-    });
-
-    ipcMain.handle('go-to-page', (event, url) => {
-        return browserContent.loadURL(url);
-    });
-
-
-    ipcMain.handle('current-url', () => {
-        return browserContent.getURL();
-    });
+  const winContent = mainWin.webContents;
+  const browserContent = browserView.webContents;
+
+  ipcMain.handle("toogle-dev-tool", () => {
+    if (winContent.isDevToolsOpened()) {
+      winContent.closeDevTools();
+    } else {
+      winContent.openDevTools({ mode: "detach" });
+    }
+  });
+
+  ipcMain.handle("go-back", () => {
+    browserContent.goBack();
+  });
+
+  ipcMain.handle("cookieviz-start", () => {});
+
+  ipcMain.handle("cookie-update", () => {
+    session.defaultSession.cookies
+      .get({})
+      .then((cookies) => {
+        console.log(cookies);
+        return cookies;
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  });
+
+  ipcMain.handle("can-go-back", () => {
+    return browserContent.canGoBack();
+  });
+
+  ipcMain.handle("go-forward", () => {
+    browserContent.goForward();
+  });
+
+  ipcMain.handle("refresh", () => {
+    browserContent.reload();
+  });
+
+  ipcMain.handle("can-go-forward", () => {
+    return browserContent.canGoForward();
+  });
+
+  ipcMain.handle("go-to-page", (event, url) => {
+    return browserContent.loadURL(url);
+  });
+
+  ipcMain.handle("current-url", () => {
+    return browserContent.getURL();
+  });
 }
 
-module.exports = { initEventsHandler };
\ No newline at end of file
+module.exports = { initEventsHandler };
diff --git a/electron/main.js b/electron/main.js
index b783774..e174681 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1,38 +1,64 @@
-const { app, BrowserView, BrowserWindow, ipcMain} = require('electron');
-const{initEventsHandler} = require('./handleEvents');
+const { app, BrowserView, BrowserWindow, ipcMain } = require("electron");
+const { initEventsHandler } = require("./handleEvents");
 const isDev = require("electron-is-dev");
-const path = require("path");
-
 app.whenReady().then(() => {
-    const browserWindow = new BrowserWindow({
-        width: 800,
-        height: 800, 
-        webPreferences: {
-            contextIsolation: false,
-            nodeIntegration: true,
-            webSecurity: false
-        }
-    });
+  const browserWindow = new BrowserWindow({
+    width: 800,
+    height: 800,
+    webPreferences: {
+      contextIsolation: false,
+      nodeIntegration: true,
+      webSecurity: false,
+    },
+  });
 
-    if (isDev){
-        browserWindow.loadURL("http://localhost:4200/");
-    }else {
-        browserWindow.loadFile('dist/browser/index.html');
-    }
+  const cookieWindow = new BrowserWindow({
+    title: "COOKIEVIZ 2.0",
+    width: 640,
+    height: 360,
+    webPreferences: {
+      contextIsolation: false,
+      nodeIntegration: true,
+      webSecurity: false,
+    },
+    backgroundColor: "gray",
+    resizable: false,
+  });
 
-    const browserView = new BrowserView();
-    initEventsHandler(browserWindow, browserView);
-    
-    browserWindow.once('ready-to-show', ()=>{
-        browserWindow.setBrowserView(browserView)
-        const winSize = browserWindow.webContents.getOwnerBrowserWindow().getBounds();
-        browserView.setBounds({ x: 0, y: 55, width: winSize.width, height: winSize.height });
-        browserView.webContents.loadURL('https://amiens.unilasalle.fr');
-    });
-    
-    browserWindow.on('resized', ()=>{
-        const winSize = browserWindow.webContents.getOwnerBrowserWindow().getBounds();
-        browserView.setBounds({ x: 0, y: 55, width: winSize.width, height: winSize.height });
+  if (isDev) {
+    browserWindow.loadURL("http://localhost:4200/");
+  } else {
+    browserWindow.loadFile("dist/browser/index.html");
+  }
+
+  const browserView = new BrowserView();
+  //   const cookieView = new BrowserView();
+
+  initEventsHandler(browserWindow, browserView);
+
+  browserWindow.once("ready-to-show", () => {
+    browserWindow.setBrowserView(browserView);
+    const winSize = browserWindow.webContents
+      .getOwnerBrowserWindow()
+      .getBounds();
+    browserView.setBounds({
+      x: 0,
+      y: 55,
+      width: winSize.width,
+      height: winSize.height,
     });
-})
+    browserView.webContents.loadURL("https://amiens.unilasalle.fr");
+  });
 
+  browserWindow.on("resized", () => {
+    const winSize = browserWindow.webContents
+      .getOwnerBrowserWindow()
+      .getBounds();
+    browserView.setBounds({
+      x: 0,
+      y: 55,
+      width: winSize.width,
+      height: winSize.height,
+    });
+  });
+});
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 41aed23..3453f3e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { ForwardComponent } from './toolbar/forward/forward.component';
 import { RefreshComponent } from './toolbar/refresh/refresh.component';
 import { AdressComponent } from './toolbar/adress/adress.component';
 import { DebugComponent } from './toolbar/debug/debug.component';
+import { CookievizComponent } from './cookieviz/cookieviz.component';
 
 @NgModule({
   declarations: [
@@ -19,7 +20,8 @@ import { DebugComponent } from './toolbar/debug/debug.component';
     ForwardComponent,
     RefreshComponent,
     AdressComponent,
-    DebugComponent
+    DebugComponent,
+    CookievizComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/cookieviz/cookieviz.component.css b/src/app/cookieviz/cookieviz.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/cookieviz/cookieviz.component.html b/src/app/cookieviz/cookieviz.component.html
new file mode 100644
index 0000000..68906aa
--- /dev/null
+++ b/src/app/cookieviz/cookieviz.component.html
@@ -0,0 +1 @@
+<p>cookieviz works!</p>
diff --git a/src/app/cookieviz/cookieviz.component.spec.ts b/src/app/cookieviz/cookieviz.component.spec.ts
new file mode 100644
index 0000000..327f2df
--- /dev/null
+++ b/src/app/cookieviz/cookieviz.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CookievizComponent } from './cookieviz.component';
+
+describe('CookievizComponent', () => {
+  let component: CookievizComponent;
+  let fixture: ComponentFixture<CookievizComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CookievizComponent]
+    });
+    fixture = TestBed.createComponent(CookievizComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/cookieviz/cookieviz.component.ts b/src/app/cookieviz/cookieviz.component.ts
new file mode 100644
index 0000000..19ebd84
--- /dev/null
+++ b/src/app/cookieviz/cookieviz.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-cookieviz',
+  templateUrl: './cookieviz.component.html',
+  styleUrls: ['./cookieviz.component.css'],
+})
+export class CookievizComponent {}
diff --git a/src/app/services/browsing.service.ts b/src/app/services/browsing.service.ts
index 6e4ba92..dc311a9 100644
--- a/src/app/services/browsing.service.ts
+++ b/src/app/services/browsing.service.ts
@@ -1,27 +1,31 @@
 import { Injectable } from '@angular/core';
-import { IpcRenderer } from 'electron';
+import { Cookie, IpcRenderer } from 'electron';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class BrowsingService {
   private ipcRenderer: IpcRenderer;
 
   url = 'https://amiens.unilasalle.fr';
-  canGoBack =false;
+  canGoBack = false;
   canGoForward = false;
 
   toogleDevTool() {
     this.ipcRenderer.invoke('toogle-dev-tool');
   }
 
+  getCookies(): Promise<Cookie[]> {
+    return this.ipcRenderer.invoke('cookie-update');
+  }
+
   goBack() {
-    this.ipcRenderer.invoke('go-back')
+    this.ipcRenderer.invoke('go-back');
     this.updateHistory();
   }
 
   goForward() {
-    this.ipcRenderer.invoke('go-forward')
+    this.ipcRenderer.invoke('go-forward');
     this.updateHistory();
   }
 
@@ -30,34 +34,37 @@ export class BrowsingService {
   }
 
   goToPage(url: string) {
-    this.ipcRenderer.invoke('go-to-page', url)
-    .then(() =>this.updateHistory());
+    this.ipcRenderer.invoke('go-to-page', url).then(() => this.updateHistory());
+    // this.ipcRenderer.invoke('cookie-update');
+  }
+  startCookieVizWindow() {
+    this.ipcRenderer.invoke('cookviz-start');
   }
-
   setToCurrentUrl() {
-    this.ipcRenderer.invoke('current-url')
-    .then((url)=>{
+    this.ipcRenderer.invoke('current-url').then((url) => {
       this.url = url;
     });
   }
 
-  updateHistory(){
+  updateHistory() {
     this.setToCurrentUrl();
 
-    this.ipcRenderer.invoke('can-go-back')
-    .then((canGoBack) => this.canGoBack = canGoBack);
+    this.ipcRenderer
+      .invoke('can-go-back')
+      .then((canGoBack) => (this.canGoBack = canGoBack));
 
-    this.ipcRenderer.invoke('can-go-forward')
-    .then((canGoForward) => this.canGoForward = canGoForward);
+    this.ipcRenderer
+      .invoke('can-go-forward')
+      .then((canGoForward) => (this.canGoForward = canGoForward));
   }
 
   constructor() {
-    if (window.require){
+    if (window.require) {
       this.ipcRenderer = window.require('electron').ipcRenderer;
-    }else{
+    } else {
       // Seulement pour les tests en dehors d'electron
       const ipc = {} as IpcRenderer;
       this.ipcRenderer = ipc;
     }
   }
-}
\ No newline at end of file
+}

From e6f1c76c26caaac55ac49b4e0680f95f164e7252 Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Tue, 28 Nov 2023 11:10:46 +0100
Subject: [PATCH 02/12] (wip) cookie cleanup

---
 electron/handleEvents.js             | 14 +-------------
 electron/main.js                     | 14 +++++++++++++-
 src/app/services/browsing.service.ts |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/electron/handleEvents.js b/electron/handleEvents.js
index b4ed400..4a0ce42 100644
--- a/electron/handleEvents.js
+++ b/electron/handleEvents.js
@@ -1,4 +1,4 @@
-const { ipcMain, session } = require("electron");
+const { ipcMain } = require("electron");
 
 function initEventsHandler(mainWin, browserView) {
   const winContent = mainWin.webContents;
@@ -18,18 +18,6 @@ function initEventsHandler(mainWin, browserView) {
 
   ipcMain.handle("cookieviz-start", () => {});
 
-  ipcMain.handle("cookie-update", () => {
-    session.defaultSession.cookies
-      .get({})
-      .then((cookies) => {
-        console.log(cookies);
-        return cookies;
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  });
-
   ipcMain.handle("can-go-back", () => {
     return browserContent.canGoBack();
   });
diff --git a/electron/main.js b/electron/main.js
index e174681..dbf3ca0 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1,6 +1,7 @@
-const { app, BrowserView, BrowserWindow, ipcMain } = require("electron");
+const { app, BrowserView, BrowserWindow, session } = require("electron");
 const { initEventsHandler } = require("./handleEvents");
 const isDev = require("electron-is-dev");
+let cookieViz = new Map();
 app.whenReady().then(() => {
   const browserWindow = new BrowserWindow({
     width: 800,
@@ -36,6 +37,17 @@ app.whenReady().then(() => {
 
   initEventsHandler(browserWindow, browserView);
 
+  browserView.webContents.on("did-navigate", async (event, url) => {
+    console.log("URL changed:", url);
+    let cookies = await session.defaultSession.cookies.get({});
+    let parsedcookies = new Array();
+    cookies.forEach((cookie) => {
+      parsedcookies.push(cookie.domain);
+    });
+    cookieViz.set(url, parsedcookies);
+    console.log(cookieViz);
+  });
+
   browserWindow.once("ready-to-show", () => {
     browserWindow.setBrowserView(browserView);
     const winSize = browserWindow.webContents
diff --git a/src/app/services/browsing.service.ts b/src/app/services/browsing.service.ts
index dc311a9..3c4087d 100644
--- a/src/app/services/browsing.service.ts
+++ b/src/app/services/browsing.service.ts
@@ -38,7 +38,7 @@ export class BrowsingService {
     // this.ipcRenderer.invoke('cookie-update');
   }
   startCookieVizWindow() {
-    this.ipcRenderer.invoke('cookviz-start');
+    this.ipcRenderer.invoke('cookieviz-start');
   }
   setToCurrentUrl() {
     this.ipcRenderer.invoke('current-url').then((url) => {

From d53ec430227ed2da382c150ceb9731c5f69d2307 Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Tue, 5 Dec 2023 21:01:11 +0100
Subject: [PATCH 03/12] (WIP) log cookies

---
 electron/handleEvents.js               |  2 --
 electron/main.js                       | 27 ++++++++++++++------------
 src/app/app.module.ts                  | 11 +++--------
 src/app/services/browsing.service.ts   | 11 ++++-------
 src/app/toolbar/toolbar.component.css  |  2 +-
 src/app/toolbar/toolbar.component.html | 10 +++++-----
 src/app/toolbar/toolbar.component.ts   |  6 ++----
 7 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/electron/handleEvents.js b/electron/handleEvents.js
index 4a0ce42..2a81b88 100644
--- a/electron/handleEvents.js
+++ b/electron/handleEvents.js
@@ -16,8 +16,6 @@ function initEventsHandler(mainWin, browserView) {
     browserContent.goBack();
   });
 
-  ipcMain.handle("cookieviz-start", () => {});
-
   ipcMain.handle("can-go-back", () => {
     return browserContent.canGoBack();
   });
diff --git a/electron/main.js b/electron/main.js
index dbf3ca0..e24d771 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1,7 +1,9 @@
 const { app, BrowserView, BrowserWindow, session } = require("electron");
 const { initEventsHandler } = require("./handleEvents");
 const isDev = require("electron-is-dev");
+
 let cookieViz = new Map();
+
 app.whenReady().then(() => {
   const browserWindow = new BrowserWindow({
     width: 800,
@@ -13,18 +15,18 @@ app.whenReady().then(() => {
     },
   });
 
-  const cookieWindow = new BrowserWindow({
-    title: "COOKIEVIZ 2.0",
-    width: 640,
-    height: 360,
-    webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true,
-      webSecurity: false,
-    },
-    backgroundColor: "gray",
-    resizable: false,
-  });
+  // const cookieWindow = new BrowserWindow({
+  //   title: "COOKIEVIZ 2.0",
+  //   width: 640,
+  //   height: 360,
+  //   webPreferences: {
+  //     contextIsolation: false,
+  //     nodeIntegration: true,
+  //     webSecurity: false,
+  //   },
+  //   backgroundColor: "gray",
+  //   resizable: false,
+  // });
 
   if (isDev) {
     browserWindow.loadURL("http://localhost:4200/");
@@ -37,6 +39,7 @@ app.whenReady().then(() => {
 
   initEventsHandler(browserWindow, browserView);
 
+  // cookieviz handler
   browserView.webContents.on("did-navigate", async (event, url) => {
     console.log("URL changed:", url);
     let cookies = await session.defaultSession.cookies.get({});
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3453f3e..09623b1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,14 +21,9 @@ import { CookievizComponent } from './cookieviz/cookieviz.component';
     RefreshComponent,
     AdressComponent,
     DebugComponent,
-    CookievizComponent
-  ],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    FontAwesomeModule
   ],
+  imports: [BrowserModule, FormsModule, FontAwesomeModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/src/app/services/browsing.service.ts b/src/app/services/browsing.service.ts
index 3c4087d..f674fae 100644
--- a/src/app/services/browsing.service.ts
+++ b/src/app/services/browsing.service.ts
@@ -15,10 +15,6 @@ export class BrowsingService {
     this.ipcRenderer.invoke('toogle-dev-tool');
   }
 
-  getCookies(): Promise<Cookie[]> {
-    return this.ipcRenderer.invoke('cookie-update');
-  }
-
   goBack() {
     this.ipcRenderer.invoke('go-back');
     this.updateHistory();
@@ -37,9 +33,7 @@ export class BrowsingService {
     this.ipcRenderer.invoke('go-to-page', url).then(() => this.updateHistory());
     // this.ipcRenderer.invoke('cookie-update');
   }
-  startCookieVizWindow() {
-    this.ipcRenderer.invoke('cookieviz-start');
-  }
+
   setToCurrentUrl() {
     this.ipcRenderer.invoke('current-url').then((url) => {
       this.url = url;
@@ -65,6 +59,9 @@ export class BrowsingService {
       // Seulement pour les tests en dehors d'electron
       const ipc = {} as IpcRenderer;
       this.ipcRenderer = ipc;
+      // this.ipcRenderer.on('cookies', (c) => {
+      //   console.log('pong');
+      // });
     }
   }
 }
diff --git a/src/app/toolbar/toolbar.component.css b/src/app/toolbar/toolbar.component.css
index 8206d62..2cabec0 100644
--- a/src/app/toolbar/toolbar.component.css
+++ b/src/app/toolbar/toolbar.component.css
@@ -1,4 +1,4 @@
-.toolbar{
+.toolbar {
     position: relative;
     z-index: 100;
     display: flex;
diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html
index 8237a5b..1a01fa2 100644
--- a/src/app/toolbar/toolbar.component.html
+++ b/src/app/toolbar/toolbar.component.html
@@ -1,7 +1,7 @@
 <div class="toolbar">
-    <app-back></app-back>
-    <app-forward></app-forward>
-    <app-refresh></app-refresh>
-    <app-adress></app-adress>
-    <app-debug></app-debug>
+  <app-back></app-back>
+  <app-forward></app-forward>
+  <app-refresh></app-refresh>
+  <app-adress></app-adress>
+  <app-debug></app-debug>
 </div>
diff --git a/src/app/toolbar/toolbar.component.ts b/src/app/toolbar/toolbar.component.ts
index 44189f8..9f14454 100644
--- a/src/app/toolbar/toolbar.component.ts
+++ b/src/app/toolbar/toolbar.component.ts
@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-toolbar',
   templateUrl: './toolbar.component.html',
-  styleUrls: ['./toolbar.component.css']
+  styleUrls: ['./toolbar.component.css'],
 })
-export class ToolbarComponent {
-
-}
+export class ToolbarComponent {}

From 4a31625043560e9fe1fdb8801b3b844ce416c8aa Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Tue, 5 Dec 2023 21:29:34 +0100
Subject: [PATCH 04/12] (WIP) IPC working as intended

---
 electron/handleEvents.js             | 14 +++++++++++++-
 electron/main.js                     | 28 +++++++++++++++-------------
 src/app/services/browsing.service.ts | 10 ++++++----
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/electron/handleEvents.js b/electron/handleEvents.js
index 2a81b88..709bdd0 100644
--- a/electron/handleEvents.js
+++ b/electron/handleEvents.js
@@ -1,8 +1,20 @@
-const { ipcMain } = require("electron");
+const { ipcMain, session, ipcRenderer } = require("electron");
 
 function initEventsHandler(mainWin, browserView) {
   const winContent = mainWin.webContents;
   const browserContent = browserView.webContents;
+  let cookieViz = new Map();
+
+  browserContent.on("did-navigate", async (event, url) => {
+    console.log("URL changed:", url);
+    let cookies = await session.defaultSession.cookies.get({});
+    let parsedcookies = new Array();
+    cookies.forEach((cookie) => {
+      parsedcookies.push(cookie.domain);
+    });
+    cookieViz.set(url, parsedcookies);
+    winContent.send("cookies", "ping");
+  });
 
   ipcMain.handle("toogle-dev-tool", () => {
     if (winContent.isDevToolsOpened()) {
diff --git a/electron/main.js b/electron/main.js
index e24d771..c24a58a 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1,9 +1,13 @@
-const { app, BrowserView, BrowserWindow, session } = require("electron");
+const {
+  app,
+  BrowserView,
+  BrowserWindow,
+  session,
+  ipcMain,
+} = require("electron");
 const { initEventsHandler } = require("./handleEvents");
 const isDev = require("electron-is-dev");
 
-let cookieViz = new Map();
-
 app.whenReady().then(() => {
   const browserWindow = new BrowserWindow({
     width: 800,
@@ -40,16 +44,14 @@ app.whenReady().then(() => {
   initEventsHandler(browserWindow, browserView);
 
   // cookieviz handler
-  browserView.webContents.on("did-navigate", async (event, url) => {
-    console.log("URL changed:", url);
-    let cookies = await session.defaultSession.cookies.get({});
-    let parsedcookies = new Array();
-    cookies.forEach((cookie) => {
-      parsedcookies.push(cookie.domain);
-    });
-    cookieViz.set(url, parsedcookies);
-    console.log(cookieViz);
-  });
+  // browserView.webContents.on("did-navigate", async (event, url) => {
+  //   browserView.webContents.send("cookies", "pong");
+  //   browserWindow.webContents.send("cookies", "pong");
+  //   browserView.webContents.emit("cookies", "pong");
+  //   browserWindow.webContents.emit("cookies", "pong");
+  //   ipcMain.emit("cookies", "pong");
+  //   console.log("message emitted");
+  // });
 
   browserWindow.once("ready-to-show", () => {
     browserWindow.setBrowserView(browserView);
diff --git a/src/app/services/browsing.service.ts b/src/app/services/browsing.service.ts
index f674fae..c75a1c6 100644
--- a/src/app/services/browsing.service.ts
+++ b/src/app/services/browsing.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Cookie, IpcRenderer } from 'electron';
+import { Cookie, IpcRenderer, ipcMain } from 'electron';
 
 @Injectable({
   providedIn: 'root',
@@ -27,6 +27,7 @@ export class BrowsingService {
 
   refresh() {
     this.ipcRenderer.invoke('refresh');
+    console.log('refresh');
   }
 
   goToPage(url: string) {
@@ -59,9 +60,10 @@ export class BrowsingService {
       // Seulement pour les tests en dehors d'electron
       const ipc = {} as IpcRenderer;
       this.ipcRenderer = ipc;
-      // this.ipcRenderer.on('cookies', (c) => {
-      //   console.log('pong');
-      // });
     }
+
+    this.ipcRenderer.on('cookies', (event, data) => {
+      console.log('pong : ', data);
+    });
   }
 }

From 70cc7711c51098c54a1bfefdc43b810bb2ba88b4 Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Tue, 5 Dec 2023 21:51:20 +0100
Subject: [PATCH 05/12] add: cookiebtn

---
 electron/handleEvents.js                      |  2 +-
 src/app/app.component.html                    |  2 +-
 src/app/app.component.spec.ts                 | 29 ++++++++++---------
 src/app/app.component.ts                      |  5 ++--
 src/app/app.module.ts                         |  2 ++
 .../cookieviz-btn/cookieviz-btn.component.css | 19 ++++++++++++
 .../cookieviz-btn.component.html              |  3 ++
 .../cookieviz-btn.component.spec.ts           | 21 ++++++++++++++
 .../cookieviz-btn/cookieviz-btn.component.ts  | 13 +++++++++
 src/app/toolbar/debug/debug.component.html    |  4 ++-
 src/app/toolbar/debug/debug.component.spec.ts |  4 +--
 src/app/toolbar/debug/debug.component.ts      |  8 ++---
 .../toolbar/forward/forward.component.spec.ts |  4 +--
 src/app/toolbar/forward/forward.component.ts  |  8 ++---
 src/app/toolbar/refresh/refresh.component.ts  | 11 ++-----
 src/app/toolbar/toolbar.component.html        |  1 +
 src/app/toolbar/toolbar.component.spec.ts     |  6 ++--
 src/index.html                                | 22 +++++++-------
 src/main.ts                                   |  6 ++--
 src/styles.css                                |  2 +-
 20 files changed, 110 insertions(+), 62 deletions(-)
 create mode 100644 src/app/toolbar/cookieviz-btn/cookieviz-btn.component.css
 create mode 100644 src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html
 create mode 100644 src/app/toolbar/cookieviz-btn/cookieviz-btn.component.spec.ts
 create mode 100644 src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts

diff --git a/electron/handleEvents.js b/electron/handleEvents.js
index 709bdd0..b7046b2 100644
--- a/electron/handleEvents.js
+++ b/electron/handleEvents.js
@@ -13,7 +13,7 @@ function initEventsHandler(mainWin, browserView) {
       parsedcookies.push(cookie.domain);
     });
     cookieViz.set(url, parsedcookies);
-    winContent.send("cookies", "ping");
+    winContent.send("cookies", cookieViz);
   });
 
   ipcMain.handle("toogle-dev-tool", () => {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3d7b048..341d2f9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<app-toolbar></app-toolbar>
\ No newline at end of file
+<app-toolbar></app-toolbar>
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index f6d602b..60428e7 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -2,7 +2,7 @@ import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { BackComponent } from './toolbar/back/back.component';
 import { ToolbarComponent } from './toolbar/toolbar.component';
-import { FontAwesomeModule  } from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ForwardComponent } from './toolbar/forward/forward.component';
 import { RefreshComponent } from './toolbar/refresh/refresh.component';
 import { DebugComponent } from './toolbar/debug/debug.component';
@@ -10,23 +10,24 @@ import { AdressComponent } from './toolbar/adress/adress.component';
 import { FormsModule } from '@angular/forms';
 
 describe('AppComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    declarations: [
-      AppComponent,
-      ToolbarComponent,
-      BackComponent,
-      ForwardComponent,
-      RefreshComponent,
-      DebugComponent,
-      AdressComponent
-    ],
-    imports:      [ FontAwesomeModule, FormsModule]
-  }));
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent,
+        ToolbarComponent,
+        BackComponent,
+        ForwardComponent,
+        RefreshComponent,
+        DebugComponent,
+        AdressComponent,
+      ],
+      imports: [FontAwesomeModule, FormsModule],
+    })
+  );
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
 });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 68478a8..65dd519 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
-}
+export class AppComponent {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 09623b1..4eb1305 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,6 +11,7 @@ import { RefreshComponent } from './toolbar/refresh/refresh.component';
 import { AdressComponent } from './toolbar/adress/adress.component';
 import { DebugComponent } from './toolbar/debug/debug.component';
 import { CookievizComponent } from './cookieviz/cookieviz.component';
+import { CookievizBtnComponent } from './toolbar/cookieviz-btn/cookieviz-btn.component';
 
 @NgModule({
   declarations: [
@@ -21,6 +22,7 @@ import { CookievizComponent } from './cookieviz/cookieviz.component';
     RefreshComponent,
     AdressComponent,
     DebugComponent,
+    CookievizBtnComponent,
   ],
   imports: [BrowserModule, FormsModule, FontAwesomeModule],
   providers: [],
diff --git a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.css b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.css
new file mode 100644
index 0000000..4d9b547
--- /dev/null
+++ b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.css
@@ -0,0 +1,19 @@
+button {
+	background-color: transparent;
+	border: none;
+	padding: 10px;
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+	margin: 4px 2px;
+	cursor: pointer;
+	border-radius: 50%;
+}
+
+button:hover {
+	background-color: gainsboro;
+}
+
+button:active {
+	background-color: silver;
+}
\ No newline at end of file
diff --git a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html
new file mode 100644
index 0000000..5f91157
--- /dev/null
+++ b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html
@@ -0,0 +1,3 @@
+<button (click)="browsingService.refresh()">
+  <fa-icon [icon]="faCookie"></fa-icon>
+</button>
diff --git a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.spec.ts b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.spec.ts
new file mode 100644
index 0000000..374f5e9
--- /dev/null
+++ b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CookievizBtnComponent } from './cookieviz-btn.component';
+
+describe('CookievizBtnComponent', () => {
+  let component: CookievizBtnComponent;
+  let fixture: ComponentFixture<CookievizBtnComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CookievizBtnComponent]
+    });
+    fixture = TestBed.createComponent(CookievizBtnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts
new file mode 100644
index 0000000..de8e13e
--- /dev/null
+++ b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { faCookie } from '@fortawesome/free-solid-svg-icons';
+import { BrowsingService } from 'src/app/services/browsing.service';
+
+@Component({
+  selector: 'app-cookieviz-btn',
+  templateUrl: './cookieviz-btn.component.html',
+  styleUrls: ['./cookieviz-btn.component.css'],
+})
+export class CookievizBtnComponent {
+  faCookie = faCookie;
+  constructor(public browsingService: BrowsingService) {}
+}
diff --git a/src/app/toolbar/debug/debug.component.html b/src/app/toolbar/debug/debug.component.html
index d65547b..13332fc 100644
--- a/src/app/toolbar/debug/debug.component.html
+++ b/src/app/toolbar/debug/debug.component.html
@@ -1 +1,3 @@
-<button (click)="browsingService.toogleDevTool()"><fa-icon [icon]="faBug"></fa-icon></button>
\ No newline at end of file
+<button (click)="browsingService.toogleDevTool()">
+  <fa-icon [icon]="faBug"></fa-icon>
+</button>
diff --git a/src/app/toolbar/debug/debug.component.spec.ts b/src/app/toolbar/debug/debug.component.spec.ts
index 4c3d50d..e58d85a 100644
--- a/src/app/toolbar/debug/debug.component.spec.ts
+++ b/src/app/toolbar/debug/debug.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { DebugComponent } from './debug.component';
 
 describe('DebugComponent', () => {
@@ -9,7 +9,7 @@ describe('DebugComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [DebugComponent],
-      imports:      [ FontAwesomeModule ]
+      imports: [FontAwesomeModule],
     });
     fixture = TestBed.createComponent(DebugComponent);
     component = fixture.componentInstance;
diff --git a/src/app/toolbar/debug/debug.component.ts b/src/app/toolbar/debug/debug.component.ts
index e39ad43..4e5c4d1 100644
--- a/src/app/toolbar/debug/debug.component.ts
+++ b/src/app/toolbar/debug/debug.component.ts
@@ -5,14 +5,10 @@ import { BrowsingService } from 'src/app/services/browsing.service';
 @Component({
   selector: 'app-debug',
   templateUrl: './debug.component.html',
-  styleUrls: ['./debug.component.css']
+  styleUrls: ['./debug.component.css'],
 })
 export class DebugComponent {
   faBug = faBug;
 
-  constructor(
-    public browsingService :BrowsingService
-  ) {
-
-  }
+  constructor(public browsingService: BrowsingService) {}
 }
diff --git a/src/app/toolbar/forward/forward.component.spec.ts b/src/app/toolbar/forward/forward.component.spec.ts
index 32624d0..6b4d7ee 100644
--- a/src/app/toolbar/forward/forward.component.spec.ts
+++ b/src/app/toolbar/forward/forward.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ForwardComponent } from './forward.component';
 
 describe('ForwardComponent', () => {
@@ -9,7 +9,7 @@ describe('ForwardComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ForwardComponent],
-      imports:      [ FontAwesomeModule ]
+      imports: [FontAwesomeModule],
     });
     fixture = TestBed.createComponent(ForwardComponent);
     component = fixture.componentInstance;
diff --git a/src/app/toolbar/forward/forward.component.ts b/src/app/toolbar/forward/forward.component.ts
index fc76925..918cec5 100644
--- a/src/app/toolbar/forward/forward.component.ts
+++ b/src/app/toolbar/forward/forward.component.ts
@@ -5,14 +5,10 @@ import { BrowsingService } from 'src/app/services/browsing.service';
 @Component({
   selector: 'app-forward',
   templateUrl: './forward.component.html',
-  styleUrls: ['./forward.component.css']
+  styleUrls: ['./forward.component.css'],
 })
 export class ForwardComponent {
   faArrowRight = faArrowRight;
-  
-  constructor(
-    public browsingService :BrowsingService
-      ) {
 
-  }
+  constructor(public browsingService: BrowsingService) {}
 }
diff --git a/src/app/toolbar/refresh/refresh.component.ts b/src/app/toolbar/refresh/refresh.component.ts
index d74a3e4..28c85f1 100644
--- a/src/app/toolbar/refresh/refresh.component.ts
+++ b/src/app/toolbar/refresh/refresh.component.ts
@@ -5,14 +5,9 @@ import { BrowsingService } from 'src/app/services/browsing.service';
 @Component({
   selector: 'app-refresh',
   templateUrl: './refresh.component.html',
-  styleUrls: ['./refresh.component.css']
+  styleUrls: ['./refresh.component.css'],
 })
 export class RefreshComponent {
-  faRefresh=faRefresh;
-
-  constructor(
-    public browsingService :BrowsingService
-  ) {
-
-  }
+  faRefresh = faRefresh;
+  constructor(public browsingService: BrowsingService) {}
 }
diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html
index 1a01fa2..d5dfaa3 100644
--- a/src/app/toolbar/toolbar.component.html
+++ b/src/app/toolbar/toolbar.component.html
@@ -4,4 +4,5 @@
   <app-refresh></app-refresh>
   <app-adress></app-adress>
   <app-debug></app-debug>
+  <app-cookieviz-btn></app-cookieviz-btn>
 </div>
diff --git a/src/app/toolbar/toolbar.component.spec.ts b/src/app/toolbar/toolbar.component.spec.ts
index 7cab40c..8640e48 100644
--- a/src/app/toolbar/toolbar.component.spec.ts
+++ b/src/app/toolbar/toolbar.component.spec.ts
@@ -7,7 +7,7 @@ import { RefreshComponent } from './refresh/refresh.component';
 import { AdressComponent } from './adress/adress.component';
 import { DebugComponent } from './debug/debug.component';
 import { FormsModule } from '@angular/forms';
-import { FontAwesomeModule  } from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 describe('ToolbarComponent', () => {
   let component: ToolbarComponent;
@@ -21,9 +21,9 @@ describe('ToolbarComponent', () => {
         ForwardComponent,
         RefreshComponent,
         DebugComponent,
-        AdressComponent
+        AdressComponent,
       ],
-      imports:      [ FontAwesomeModule, FormsModule ]
+      imports: [FontAwesomeModule, FormsModule],
     });
     fixture = TestBed.createComponent(ToolbarComponent);
     component = fixture.componentInstance;
diff --git a/src/index.html b/src/index.html
index 54c5b81..fcf9ece 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Browser</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Browser</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index c58dc05..17a5cd4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,6 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..e50a47e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1 @@
-/* You can add global styles to this file, and also import other style files */
+/* You can add global styles to this file, and also import other style files */
\ No newline at end of file

From 656c5b96f72664b17e7ffbc0577ca92172be706a Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Tue, 5 Dec 2023 22:55:11 +0100
Subject: [PATCH 06/12] add: cookieviz view

---
 electron/cookies.js                           |  0
 electron/handleEvents.js                      | 22 ++++++++++---
 electron/main.js                              | 33 +------------------
 src/app/app.component.html                    |  2 +-
 src/app/app.module.ts                         | 16 +++++++--
 src/app/cookieviz/cookieviz.component.html    |  7 ++++
 src/app/cookieviz/cookieviz.component.ts      |  5 ++-
 src/app/services/browsing.service.ts          | 15 +++++++--
 .../cookieviz-btn.component.html              |  8 +++--
 .../cookieviz-btn/cookieviz-btn.component.ts  |  3 ++
 10 files changed, 65 insertions(+), 46 deletions(-)
 delete mode 100644 electron/cookies.js

diff --git a/electron/cookies.js b/electron/cookies.js
deleted file mode 100644
index e69de29..0000000
diff --git a/electron/handleEvents.js b/electron/handleEvents.js
index b7046b2..6830555 100644
--- a/electron/handleEvents.js
+++ b/electron/handleEvents.js
@@ -1,9 +1,8 @@
-const { ipcMain, session, ipcRenderer } = require("electron");
+const { ipcMain, session, ipcRenderer, BrowserWindow } = require("electron");
 
 function initEventsHandler(mainWin, browserView) {
   const winContent = mainWin.webContents;
   const browserContent = browserView.webContents;
-  let cookieViz = new Map();
 
   browserContent.on("did-navigate", async (event, url) => {
     console.log("URL changed:", url);
@@ -12,8 +11,23 @@ function initEventsHandler(mainWin, browserView) {
     cookies.forEach((cookie) => {
       parsedcookies.push(cookie.domain);
     });
-    cookieViz.set(url, parsedcookies);
-    winContent.send("cookies", cookieViz);
+    winContent.send("cookies", { url: url, cookies: parsedcookies });
+  });
+
+  ipcMain.handle("open-cookie-win", () => {
+    const cookieWindow = new BrowserWindow({
+      title: "COOKIEVIZ 2.0",
+      width: 640,
+      height: 360,
+      webPreferences: {
+        contextIsolation: false,
+        nodeIntegration: true,
+        webSecurity: false,
+      },
+      backgroundColor: "gray",
+      resizable: false,
+    });
+    cookieWindow.loadURL("http://localhost:4200/index.html#cookies");
   });
 
   ipcMain.handle("toogle-dev-tool", () => {
diff --git a/electron/main.js b/electron/main.js
index c24a58a..896157e 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -1,10 +1,4 @@
-const {
-  app,
-  BrowserView,
-  BrowserWindow,
-  session,
-  ipcMain,
-} = require("electron");
+const { app, BrowserView, BrowserWindow } = require("electron");
 const { initEventsHandler } = require("./handleEvents");
 const isDev = require("electron-is-dev");
 
@@ -19,19 +13,6 @@ app.whenReady().then(() => {
     },
   });
 
-  // const cookieWindow = new BrowserWindow({
-  //   title: "COOKIEVIZ 2.0",
-  //   width: 640,
-  //   height: 360,
-  //   webPreferences: {
-  //     contextIsolation: false,
-  //     nodeIntegration: true,
-  //     webSecurity: false,
-  //   },
-  //   backgroundColor: "gray",
-  //   resizable: false,
-  // });
-
   if (isDev) {
     browserWindow.loadURL("http://localhost:4200/");
   } else {
@@ -39,20 +20,8 @@ app.whenReady().then(() => {
   }
 
   const browserView = new BrowserView();
-  //   const cookieView = new BrowserView();
-
   initEventsHandler(browserWindow, browserView);
 
-  // cookieviz handler
-  // browserView.webContents.on("did-navigate", async (event, url) => {
-  //   browserView.webContents.send("cookies", "pong");
-  //   browserWindow.webContents.send("cookies", "pong");
-  //   browserView.webContents.emit("cookies", "pong");
-  //   browserWindow.webContents.emit("cookies", "pong");
-  //   ipcMain.emit("cookies", "pong");
-  //   console.log("message emitted");
-  // });
-
   browserWindow.once("ready-to-show", () => {
     browserWindow.setBrowserView(browserView);
     const winSize = browserWindow.webContents
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 341d2f9..a3cfdea 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<app-toolbar></app-toolbar>
+<base href="" /> <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4eb1305..c1c7386 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-
 import { AppComponent } from './app.component';
 import { ToolbarComponent } from './toolbar/toolbar.component';
 import { BackComponent } from './toolbar/back/back.component';
@@ -10,9 +9,14 @@ import { ForwardComponent } from './toolbar/forward/forward.component';
 import { RefreshComponent } from './toolbar/refresh/refresh.component';
 import { AdressComponent } from './toolbar/adress/adress.component';
 import { DebugComponent } from './toolbar/debug/debug.component';
-import { CookievizComponent } from './cookieviz/cookieviz.component';
 import { CookievizBtnComponent } from './toolbar/cookieviz-btn/cookieviz-btn.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CookievizComponent } from './cookieviz/cookieviz.component';
 
+const routes: Routes = [
+  { path: '', component: ToolbarComponent },
+  { path: 'cookies', component: CookievizComponent },
+];
 @NgModule({
   declarations: [
     AppComponent,
@@ -24,7 +28,13 @@ import { CookievizBtnComponent } from './toolbar/cookieviz-btn/cookieviz-btn.com
     DebugComponent,
     CookievizBtnComponent,
   ],
-  imports: [BrowserModule, FormsModule, FontAwesomeModule],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    FontAwesomeModule,
+    RouterModule.forRoot(routes, { useHash: true }),
+  ],
+  exports: [RouterModule],
   providers: [],
   bootstrap: [AppComponent],
 })
diff --git a/src/app/cookieviz/cookieviz.component.html b/src/app/cookieviz/cookieviz.component.html
index 68906aa..4859938 100644
--- a/src/app/cookieviz/cookieviz.component.html
+++ b/src/app/cookieviz/cookieviz.component.html
@@ -1 +1,8 @@
 <p>cookieviz works!</p>
+<p>cookie : {{ browsingService.getCookies().length }}</p>
+<ul>
+  <li *ngFor="let cookie of browsingService.cookies.entries()">
+    <p>3</p>
+    <h3>{{ cookie }}</h3>
+  </li>
+</ul>
diff --git a/src/app/cookieviz/cookieviz.component.ts b/src/app/cookieviz/cookieviz.component.ts
index 19ebd84..cd28b9b 100644
--- a/src/app/cookieviz/cookieviz.component.ts
+++ b/src/app/cookieviz/cookieviz.component.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { BrowsingService } from '../services/browsing.service';
 
 @Component({
   selector: 'app-cookieviz',
   templateUrl: './cookieviz.component.html',
   styleUrls: ['./cookieviz.component.css'],
 })
-export class CookievizComponent {}
+export class CookievizComponent {
+  constructor(public browsingService: BrowsingService) {}
+}
diff --git a/src/app/services/browsing.service.ts b/src/app/services/browsing.service.ts
index c75a1c6..922fac1 100644
--- a/src/app/services/browsing.service.ts
+++ b/src/app/services/browsing.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Cookie, IpcRenderer, ipcMain } from 'electron';
+import { IpcRenderer } from 'electron';
 
 @Injectable({
   providedIn: 'root',
@@ -10,6 +10,7 @@ export class BrowsingService {
   url = 'https://amiens.unilasalle.fr';
   canGoBack = false;
   canGoForward = false;
+  public cookies: Map<String, Array<String>> = new Map();
 
   toogleDevTool() {
     this.ipcRenderer.invoke('toogle-dev-tool');
@@ -52,7 +53,17 @@ export class BrowsingService {
       .invoke('can-go-forward')
       .then((canGoForward) => (this.canGoForward = canGoForward));
   }
+  openCookieWindow() {
+    this.ipcRenderer.invoke('open-cookie-win');
+  }
 
+  getCookies() {
+    let domains = new Array<String>();
+    this.cookies.forEach((v, s) => {
+      domains = domains.concat(v);
+    });
+    return domains;
+  }
   constructor() {
     if (window.require) {
       this.ipcRenderer = window.require('electron').ipcRenderer;
@@ -63,7 +74,7 @@ export class BrowsingService {
     }
 
     this.ipcRenderer.on('cookies', (event, data) => {
-      console.log('pong : ', data);
+      this.cookies.set(data.url, data.cookies);
     });
   }
 }
diff --git a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html
index 5f91157..32fa02b 100644
--- a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html
+++ b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html
@@ -1,3 +1,5 @@
-<button (click)="browsingService.refresh()">
-  <fa-icon [icon]="faCookie"></fa-icon>
-</button>
+<a>
+  <button (click)="browsingService.openCookieWindow(); log()">
+    <fa-icon [icon]="faCookie"></fa-icon>
+  </button>
+</a>
diff --git a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts
index de8e13e..954ee68 100644
--- a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts
+++ b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts
@@ -9,5 +9,8 @@ import { BrowsingService } from 'src/app/services/browsing.service';
 })
 export class CookievizBtnComponent {
   faCookie = faCookie;
+  log() {
+    console.log(this.browsingService.getCookies());
+  }
   constructor(public browsingService: BrowsingService) {}
 }

From ff6ff47c3e7663b8810a2da111fea90f9e73921f Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Wed, 6 Dec 2023 00:13:47 +0100
Subject: [PATCH 07/12] fix: now child window can receive updates

---
 electron/handleEvents.js                      | 22 +++++--------------
 electron/main.js                              | 17 +++++++++++++-
 src/app/cookieviz/cookieviz.component.html    | 12 +++++-----
 src/app/cookieviz/cookieviz.component.ts      | 11 +++++++++-
 src/app/services/browsing.service.ts          | 18 +++++++++------
 .../cookieviz-btn.component.html              |  2 +-
 .../cookieviz-btn/cookieviz-btn.component.ts  |  3 ---
 7 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/electron/handleEvents.js b/electron/handleEvents.js
index 6830555..7636689 100644
--- a/electron/handleEvents.js
+++ b/electron/handleEvents.js
@@ -1,9 +1,9 @@
-const { ipcMain, session, ipcRenderer, BrowserWindow } = require("electron");
+const { ipcMain, session } = require("electron");
 
-function initEventsHandler(mainWin, browserView) {
+function initEventsHandler(mainWin, browserView, cookieWin) {
   const winContent = mainWin.webContents;
   const browserContent = browserView.webContents;
-
+  const cookieContent = cookieWin.webContents;
   browserContent.on("did-navigate", async (event, url) => {
     console.log("URL changed:", url);
     let cookies = await session.defaultSession.cookies.get({});
@@ -12,22 +12,12 @@ function initEventsHandler(mainWin, browserView) {
       parsedcookies.push(cookie.domain);
     });
     winContent.send("cookies", { url: url, cookies: parsedcookies });
+    cookieContent.send("cookies", { url: url, cookies: parsedcookies });
   });
 
   ipcMain.handle("open-cookie-win", () => {
-    const cookieWindow = new BrowserWindow({
-      title: "COOKIEVIZ 2.0",
-      width: 640,
-      height: 360,
-      webPreferences: {
-        contextIsolation: false,
-        nodeIntegration: true,
-        webSecurity: false,
-      },
-      backgroundColor: "gray",
-      resizable: false,
-    });
-    cookieWindow.loadURL("http://localhost:4200/index.html#cookies");
+    cookieWin.loadURL("http://localhost:4200/index.html#cookies");
+    cookieWin.show();
   });
 
   ipcMain.handle("toogle-dev-tool", () => {
diff --git a/electron/main.js b/electron/main.js
index 896157e..0b727b0 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -12,6 +12,21 @@ app.whenReady().then(() => {
       webSecurity: false,
     },
   });
+  const cookieWindow = new BrowserWindow({
+    parent: browserWindow,
+    title: "COOKIEVIZ 2.0",
+    width: 640,
+    height: 360,
+    webPreferences: {
+      contextIsolation: false,
+      nodeIntegration: true,
+      webSecurity: false,
+    },
+    backgroundColor: "gray",
+    resizable: false,
+    show: false,
+    closable: false,
+  });
 
   if (isDev) {
     browserWindow.loadURL("http://localhost:4200/");
@@ -20,7 +35,7 @@ app.whenReady().then(() => {
   }
 
   const browserView = new BrowserView();
-  initEventsHandler(browserWindow, browserView);
+  initEventsHandler(browserWindow, browserView, cookieWindow);
 
   browserWindow.once("ready-to-show", () => {
     browserWindow.setBrowserView(browserView);
diff --git a/src/app/cookieviz/cookieviz.component.html b/src/app/cookieviz/cookieviz.component.html
index 4859938..79b3480 100644
--- a/src/app/cookieviz/cookieviz.component.html
+++ b/src/app/cookieviz/cookieviz.component.html
@@ -1,8 +1,6 @@
 <p>cookieviz works!</p>
-<p>cookie : {{ browsingService.getCookies().length }}</p>
-<ul>
-  <li *ngFor="let cookie of browsingService.cookies.entries()">
-    <p>3</p>
-    <h3>{{ cookie }}</h3>
-  </li>
-</ul>
+<p>{{ cookies }}</p>
+<button (click)="log()">refresh</button>
+<!-- <tr *ngFor="let cookie of cookies.values() | async">
+  <td>{{ cookie }}</td>
+</tr> -->
diff --git a/src/app/cookieviz/cookieviz.component.ts b/src/app/cookieviz/cookieviz.component.ts
index cd28b9b..b5259a3 100644
--- a/src/app/cookieviz/cookieviz.component.ts
+++ b/src/app/cookieviz/cookieviz.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { BrowsingService } from '../services/browsing.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-cookieviz',
@@ -7,5 +8,13 @@ import { BrowsingService } from '../services/browsing.service';
   styleUrls: ['./cookieviz.component.css'],
 })
 export class CookievizComponent {
-  constructor(public browsingService: BrowsingService) {}
+  cookies: Observable<Map<String, String[]>>;
+  log() {
+    console.log('cookie refresh');
+    console.log(this.cookies);
+  }
+
+  constructor(public browsingService: BrowsingService) {
+    this.cookies = browsingService.getCookies();
+  }
 }
diff --git a/src/app/services/browsing.service.ts b/src/app/services/browsing.service.ts
index 922fac1..7a158fd 100644
--- a/src/app/services/browsing.service.ts
+++ b/src/app/services/browsing.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { IpcRenderer } from 'electron';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -10,7 +11,7 @@ export class BrowsingService {
   url = 'https://amiens.unilasalle.fr';
   canGoBack = false;
   canGoForward = false;
-  public cookies: Map<String, Array<String>> = new Map();
+  private cookies$ = new BehaviorSubject(new Map<String, String[]>());
 
   toogleDevTool() {
     this.ipcRenderer.invoke('toogle-dev-tool');
@@ -56,14 +57,16 @@ export class BrowsingService {
   openCookieWindow() {
     this.ipcRenderer.invoke('open-cookie-win');
   }
+  setCookies(base: String, cookies: String[]) {
+    let c = this.cookies$.getValue();
+    c.set(base, cookies);
+    this.cookies$.next(c);
+  }
 
   getCookies() {
-    let domains = new Array<String>();
-    this.cookies.forEach((v, s) => {
-      domains = domains.concat(v);
-    });
-    return domains;
+    return this.cookies$.asObservable();
   }
+
   constructor() {
     if (window.require) {
       this.ipcRenderer = window.require('electron').ipcRenderer;
@@ -74,7 +77,8 @@ export class BrowsingService {
     }
 
     this.ipcRenderer.on('cookies', (event, data) => {
-      this.cookies.set(data.url, data.cookies);
+      this.setCookies(data.url, data.cookies);
+      console.log(this.cookies$.getValue());
     });
   }
 }
diff --git a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html
index 32fa02b..d34a9e8 100644
--- a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html
+++ b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.html
@@ -1,5 +1,5 @@
 <a>
-  <button (click)="browsingService.openCookieWindow(); log()">
+  <button (click)="browsingService.openCookieWindow()">
     <fa-icon [icon]="faCookie"></fa-icon>
   </button>
 </a>
diff --git a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts
index 954ee68..de8e13e 100644
--- a/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts
+++ b/src/app/toolbar/cookieviz-btn/cookieviz-btn.component.ts
@@ -9,8 +9,5 @@ import { BrowsingService } from 'src/app/services/browsing.service';
 })
 export class CookievizBtnComponent {
   faCookie = faCookie;
-  log() {
-    console.log(this.browsingService.getCookies());
-  }
   constructor(public browsingService: BrowsingService) {}
 }

From e1f719816fcd00eb48d9a235844858d00cfe71ce Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Mon, 15 Jan 2024 11:00:29 +0100
Subject: [PATCH 08/12] add highcharts

---
 angular.json                               |   2 +-
 electron/main.js                           |   6 +-
 package-lock.json                          | 919 ++++++++++++++++++++-
 package.json                               |   9 +
 src/app/app.module.ts                      |   3 +
 src/app/cookieviz/cookieviz.component.html |   5 -
 src/app/cookieviz/cookieviz.component.ts   |   7 +-
 7 files changed, 923 insertions(+), 28 deletions(-)

diff --git a/angular.json b/angular.json
index 02461c4..8a374a3 100644
--- a/angular.json
+++ b/angular.json
@@ -95,4 +95,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/electron/main.js b/electron/main.js
index 0b727b0..8318061 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -15,15 +15,15 @@ app.whenReady().then(() => {
   const cookieWindow = new BrowserWindow({
     parent: browserWindow,
     title: "COOKIEVIZ 2.0",
-    width: 640,
-    height: 360,
+    width: 720,
+    height: 720,
     webPreferences: {
       contextIsolation: false,
       nodeIntegration: true,
       webSecurity: false,
     },
     backgroundColor: "gray",
-    resizable: false,
+    resizable: true,
     show: false,
     closable: false,
   });
diff --git a/package-lock.json b/package-lock.json
index a315ff4..4e52218 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,18 +17,27 @@
         "@angular/platform-browser": "^16.1.0",
         "@angular/platform-browser-dynamic": "^16.1.0",
         "@angular/router": "^16.1.0",
+        "@cosmograph/cosmos": "^1.4.1",
         "@fortawesome/angular-fontawesome": "^0.13.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@memgraph/orb": "^0.4.1",
+        "d3": "^7.8.5",
         "electron-is-dev": "^2.0.0",
+        "highcharts": "^11.3.0",
+        "highcharts-angular": "^4.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
+        "vis-network": "^9.1.9",
         "zone.js": "~0.13.0"
       },
       "devDependencies": {
         "@angular-devkit/build-angular": "^16.1.0",
         "@angular/cli": "~16.1.0",
         "@angular/compiler-cli": "^16.1.0",
+        "@types/cytoscape": "^3.19.16",
+        "@types/d3": "^7.4.3",
         "@types/jasmine": "~4.3.0",
+        "@types/leaflet": "^1.9.8",
         "electron": "^27.0.2",
         "electron-builder": "^24.6.4",
         "jasmine-core": "~4.6.0",
@@ -2467,6 +2476,28 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@cosmograph/cosmos": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@cosmograph/cosmos/-/cosmos-1.4.1.tgz",
+      "integrity": "sha512-THHc+oiX8I12SzhzEUXZneSGYhv5s4A2+2GbktZU8FK+xJe03MB1TESVBt3ofD+QIFz6DpdKhJdBccEqLXvnRA==",
+      "dependencies": {
+        "d3-array": "^3.2.0",
+        "d3-color": "^3.1.0",
+        "d3-ease": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-selection": "^3.0.0",
+        "d3-transition": "^3.0.1",
+        "d3-zoom": "^3.0.0",
+        "gl-bench": "^1.0.42",
+        "gl-matrix": "^3.4.3",
+        "random": "^4.1.0",
+        "regl": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12.2.0",
+        "npm": ">=7.0.0"
+      }
+    },
     "node_modules/@develar/schema-utils": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/@develar/schema-utils/-/schema-utils-2.6.5.tgz",
@@ -2524,6 +2555,18 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@electron/asar": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.7.tgz",
@@ -3114,18 +3157,28 @@
       }
     },
     "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
-      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
       "hasInstallScript": true,
       "peer": true,
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.2"
+        "@fortawesome/fontawesome-common-types": "6.5.1"
       },
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-svg-core/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+      "hasInstallScript": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
@@ -3411,6 +3464,23 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@memgraph/orb": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@memgraph/orb/-/orb-0.4.1.tgz",
+      "integrity": "sha512-La17n6lIlGU23v+HlE9YzrpWGgnn7Rtsh4AC5CQ/QfZOpns3xz8amSVBZpBhyFO5gDcc7x+w7ZkSH3fJsYhRaw==",
+      "dependencies": {
+        "d3-drag": "3.0.0",
+        "d3-ease": "3.0.1",
+        "d3-force": "3.0.0",
+        "d3-selection": "3.0.0",
+        "d3-transition": "3.0.1",
+        "d3-zoom": "3.0.0",
+        "leaflet": "1.8.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/@ngtools/webpack": {
       "version": "16.2.8",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.2.8.tgz",
@@ -3871,6 +3941,265 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cytoscape": {
+      "version": "3.19.16",
+      "resolved": "https://registry.npmjs.org/@types/cytoscape/-/cytoscape-3.19.16.tgz",
+      "integrity": "sha512-A3zkjaZ6cOGyqEvrVuC1YUgiRSJhDZOj8Qhd1ALH2/+YxH2za1BOmR4RWQsKYHsc+aMP/IWoqg1COuUbZ39t/g==",
+      "dev": true
+    },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "dev": true
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
+      "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==",
+      "dev": true
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "dev": true
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.9.tgz",
+      "integrity": "sha512-IKtvyFdb4Q0LWna6ymywQsEYjK/94SGhPrMfEr1TIc5OBeziTi+1jcCvttts8e0UWZIxpasjnQk9MNk/3iS+kA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "dev": true
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.6.tgz",
+      "integrity": "sha512-qlmD/8aMk5xGorUvTUWHCiumvgaUXYldYjNVOWtYoTYY/L+WwIEAmJxUmTgr9LoGNG0PPAOmqMDJVDPc7DOpPw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.2.tgz",
+      "integrity": "sha512-WAIEVlOCdd/NKRYTsqCpOMHQHemKBEINf8YXMYOtXH0GA7SY0dqMB78P3Uhgfy+4X+/Mlw2wDtlETkN6kQUCMA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "dev": true
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
+      "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.10.tgz",
+      "integrity": "sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.8.tgz",
+      "integrity": "sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.10.tgz",
@@ -3939,6 +4268,18 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.13",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz",
+      "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ==",
+      "dev": true
+    },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.45",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz",
+      "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==",
+      "peer": true
+    },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz",
@@ -3981,6 +4322,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.8",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
+      "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.4.tgz",
@@ -4993,13 +5343,14 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
       "dev": true,
       "dependencies": {
-        "follow-redirects": "^1.14.9",
-        "form-data": "^4.0.0"
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
     "node_modules/axios/node_modules/form-data": {
@@ -5996,6 +6347,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/component-emitter": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
+      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -6516,6 +6876,395 @@
       "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
       "dev": true
     },
+    "node_modules/d3": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
+      "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -6662,6 +7411,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -8488,6 +9245,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gl-bench": {
+      "version": "1.0.42",
+      "resolved": "https://registry.npmjs.org/gl-bench/-/gl-bench-1.0.42.tgz",
+      "integrity": "sha512-zuMsA/NCPmI8dPy6q3zTUH8OUM5cqKg7uVWwqzrtXJPBqoypM0XeFWEc8iFOqbf/1qtXieWOrbmgFEByKTQt4Q=="
+    },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -8752,6 +9519,24 @@
       "integrity": "sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==",
       "dev": true
     },
+    "node_modules/highcharts": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-11.3.0.tgz",
+      "integrity": "sha512-Dk+Qfk/xit8KnXKPDxmcVcq48ZlcVSq7oYJR5VZlAVWnJ0BY3JFFi1GOvgSNUzlh2wzsfenihWpkAkWoag4Xqg=="
+    },
+    "node_modules/highcharts-angular": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/highcharts-angular/-/highcharts-angular-4.0.0.tgz",
+      "integrity": "sha512-0ghWnKvab6u+AgSDR1mgmWa2RLZHeAQ1tHyfqx/8nJr6iy1NA5m6kVRERF6NAofrLQoZ0v+lNP2AlN/pim0d9A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "highcharts": ">=9.0.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
@@ -9317,6 +10102,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
@@ -10308,6 +11101,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/keycharm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
+      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
+      "peer": true
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10351,6 +11150,11 @@
       "integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==",
       "dev": true
     },
+    "node_modules/leaflet": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
+      "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
+    },
     "node_modules/less": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
@@ -12539,6 +13343,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -12633,6 +13443,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/random": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/random/-/random-4.1.0.tgz",
+      "integrity": "sha512-6Ajb7XmMSE9EFAMGC3kg9mvE7fGlBip25mYYuSMzw/uUSrmGilvZo2qwX3RnTRjwXkwkS+4swse9otZ92VjAtQ==",
+      "dependencies": {
+        "seedrandom": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -12981,6 +13802,11 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/regl": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/regl/-/regl-2.1.0.tgz",
+      "integrity": "sha512-oWUce/aVoEvW5l2V0LK7O5KJMzUSKeiOwFuJehzpSFd43dO5spP9r+sSUfhKtsky4u6MCqWJaRL+abzExynfTg=="
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -13166,6 +13992,11 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/rollup": {
       "version": "3.29.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
@@ -13214,6 +14045,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -13283,8 +14119,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sanitize-filename": {
       "version": "1.6.3",
@@ -13386,6 +14221,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -15016,7 +15856,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -15074,6 +15913,54 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/vis-data": {
+      "version": "7.1.9",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.9.tgz",
+      "integrity": "sha512-COQsxlVrmcRIbZMMTYwD+C2bxYCFDNQ2EHESklPiInbD/Pk3JZ6qNL84Bp9wWjYjAzXfSlsNaFtRk+hO9yBPWA==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "vis-util": "^5.0.1"
+      }
+    },
+    "node_modules/vis-network": {
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-9.1.9.tgz",
+      "integrity": "sha512-Ft+hLBVyiLstVYSb69Q1OIQeh3FeUxHJn0WdFcq+BFPqs+Vq1ibMi2sb//cxgq1CP7PH4yOXnHxEH/B2VzpZYA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.0",
+        "component-emitter": "^1.3.0",
+        "keycharm": "^0.2.0 || ^0.3.0 || ^0.4.0",
+        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "vis-data": "^6.3.0 || ^7.0.0",
+        "vis-util": "^5.0.1"
+      }
+    },
+    "node_modules/vis-util": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.7.tgz",
+      "integrity": "sha512-E3L03G3+trvc/X4LXvBfih3YIHcKS2WrP0XTdZefr6W6Qi/2nNCqZfe4JFfJU6DcQLm6Gxqj2Pfl+02859oL5A==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.0",
+        "component-emitter": "^1.3.0 || ^2.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "4.4.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
@@ -15161,12 +16048,12 @@
       }
     },
     "node_modules/wait-on": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.1.0.tgz",
-      "integrity": "sha512-U7TF/OYYzAg+OoiT/B8opvN48UHt0QYMi4aD3PjRFpybQ+o6czQF8Ig3SKCCMJdxpBrCalIJ4O00FBof27Fu9Q==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.2.0.tgz",
+      "integrity": "sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==",
       "dev": true,
       "dependencies": {
-        "axios": "^0.27.2",
+        "axios": "^1.6.1",
         "joi": "^17.11.0",
         "lodash": "^4.17.21",
         "minimist": "^1.2.8",
diff --git a/package.json b/package.json
index 90c43a2..b169667 100644
--- a/package.json
+++ b/package.json
@@ -28,18 +28,27 @@
     "@angular/platform-browser": "^16.1.0",
     "@angular/platform-browser-dynamic": "^16.1.0",
     "@angular/router": "^16.1.0",
+    "@cosmograph/cosmos": "^1.4.1",
     "@fortawesome/angular-fontawesome": "^0.13.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@memgraph/orb": "^0.4.1",
+    "d3": "^7.8.5",
     "electron-is-dev": "^2.0.0",
+    "highcharts": "^11.3.0",
+    "highcharts-angular": "^4.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "vis-network": "^9.1.9",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.1.0",
     "@angular/cli": "~16.1.0",
     "@angular/compiler-cli": "^16.1.0",
+    "@types/cytoscape": "^3.19.16",
+    "@types/d3": "^7.4.3",
     "@types/jasmine": "~4.3.0",
+    "@types/leaflet": "^1.9.8",
     "electron": "^27.0.2",
     "electron-builder": "^24.6.4",
     "jasmine-core": "~4.6.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c1c7386..474782f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,11 +12,13 @@ import { DebugComponent } from './toolbar/debug/debug.component';
 import { CookievizBtnComponent } from './toolbar/cookieviz-btn/cookieviz-btn.component';
 import { Routes, RouterModule } from '@angular/router';
 import { CookievizComponent } from './cookieviz/cookieviz.component';
+import { HighchartsChartModule } from 'highcharts-angular';
 
 const routes: Routes = [
   { path: '', component: ToolbarComponent },
   { path: 'cookies', component: CookievizComponent },
 ];
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -33,6 +35,7 @@ const routes: Routes = [
     FormsModule,
     FontAwesomeModule,
     RouterModule.forRoot(routes, { useHash: true }),
+    HighchartsChartModule,
   ],
   exports: [RouterModule],
   providers: [],
diff --git a/src/app/cookieviz/cookieviz.component.html b/src/app/cookieviz/cookieviz.component.html
index 79b3480..4a43bc1 100644
--- a/src/app/cookieviz/cookieviz.component.html
+++ b/src/app/cookieviz/cookieviz.component.html
@@ -1,6 +1 @@
-<p>cookieviz works!</p>
-<p>{{ cookies }}</p>
 <button (click)="log()">refresh</button>
-<!-- <tr *ngFor="let cookie of cookies.values() | async">
-  <td>{{ cookie }}</td>
-</tr> -->
diff --git a/src/app/cookieviz/cookieviz.component.ts b/src/app/cookieviz/cookieviz.component.ts
index b5259a3..58e97f5 100644
--- a/src/app/cookieviz/cookieviz.component.ts
+++ b/src/app/cookieviz/cookieviz.component.ts
@@ -1,14 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { BrowsingService } from '../services/browsing.service';
 import { Observable } from 'rxjs';
-
 @Component({
   selector: 'app-cookieviz',
   templateUrl: './cookieviz.component.html',
   styleUrls: ['./cookieviz.component.css'],
 })
 export class CookievizComponent {
-  cookies: Observable<Map<String, String[]>>;
+  public cookies: Observable<Map<String, String[]>> | undefined;
+  @ViewChild('container') container: ElementRef | undefined;
+
   log() {
     console.log('cookie refresh');
     console.log(this.cookies);

From 4b10d26cb8a3492c5ac0ecc0d838533ccdab70df Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Mon, 15 Jan 2024 11:07:24 +0100
Subject: [PATCH 09/12] highchart test works

---
 src/app/app.module.ts                      |  1 -
 src/app/cookieviz/cookieviz.component.html |  2 ++
 src/app/cookieviz/cookieviz.component.ts   | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 474782f..73f53f6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -35,7 +35,6 @@ const routes: Routes = [
     FormsModule,
     FontAwesomeModule,
     RouterModule.forRoot(routes, { useHash: true }),
-    HighchartsChartModule,
   ],
   exports: [RouterModule],
   providers: [],
diff --git a/src/app/cookieviz/cookieviz.component.html b/src/app/cookieviz/cookieviz.component.html
index 4a43bc1..8ac550e 100644
--- a/src/app/cookieviz/cookieviz.component.html
+++ b/src/app/cookieviz/cookieviz.component.html
@@ -1 +1,3 @@
 <button (click)="log()">refresh</button>
+<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions">
+</highcharts-chart>
diff --git a/src/app/cookieviz/cookieviz.component.ts b/src/app/cookieviz/cookieviz.component.ts
index 58e97f5..1ecf381 100644
--- a/src/app/cookieviz/cookieviz.component.ts
+++ b/src/app/cookieviz/cookieviz.component.ts
@@ -1,14 +1,31 @@
 import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { BrowsingService } from '../services/browsing.service';
 import { Observable } from 'rxjs';
+import { HighchartsChartModule } from 'highcharts-angular';
+import * as Highcharts from 'highcharts';
+
 @Component({
+  standalone: true,
   selector: 'app-cookieviz',
   templateUrl: './cookieviz.component.html',
   styleUrls: ['./cookieviz.component.css'],
+  imports: [HighchartsChartModule],
 })
 export class CookievizComponent {
   public cookies: Observable<Map<String, String[]>> | undefined;
   @ViewChild('container') container: ElementRef | undefined;
+  Highcharts: typeof Highcharts = Highcharts;
+  updateFlag = false;
+  data = [1, 2, 3, 4];
+
+  chartOptions: Highcharts.Options = {
+    series: [
+      {
+        type: 'line',
+        data: this.data,
+      },
+    ],
+  };
 
   log() {
     console.log('cookie refresh');

From 35372b5f4caa16ff6ba3a92dd6c8bdc7486e702f Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Mon, 15 Jan 2024 18:22:27 +0100
Subject: [PATCH 10/12] visualize cookies

---
 src/app/app.module.ts                      |  1 -
 src/app/cookieviz/cookieviz.component.html |  6 ++-
 src/app/cookieviz/cookieviz.component.ts   | 58 ++++++++++++++++++++--
 src/app/services/browsing.service.ts       |  4 +-
 4 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 73f53f6..19abcbb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,7 +12,6 @@ import { DebugComponent } from './toolbar/debug/debug.component';
 import { CookievizBtnComponent } from './toolbar/cookieviz-btn/cookieviz-btn.component';
 import { Routes, RouterModule } from '@angular/router';
 import { CookievizComponent } from './cookieviz/cookieviz.component';
-import { HighchartsChartModule } from 'highcharts-angular';
 
 const routes: Routes = [
   { path: '', component: ToolbarComponent },
diff --git a/src/app/cookieviz/cookieviz.component.html b/src/app/cookieviz/cookieviz.component.html
index 8ac550e..77040ed 100644
--- a/src/app/cookieviz/cookieviz.component.html
+++ b/src/app/cookieviz/cookieviz.component.html
@@ -1,3 +1,7 @@
 <button (click)="log()">refresh</button>
-<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions">
+<highcharts-chart
+  [Highcharts]="Highcharts"
+  [options]="chartOptions"
+  [(update)]="updateFlag"
+>
 </highcharts-chart>
diff --git a/src/app/cookieviz/cookieviz.component.ts b/src/app/cookieviz/cookieviz.component.ts
index 1ecf381..03c92e9 100644
--- a/src/app/cookieviz/cookieviz.component.ts
+++ b/src/app/cookieviz/cookieviz.component.ts
@@ -1,8 +1,10 @@
-import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { BrowsingService } from '../services/browsing.service';
 import { Observable } from 'rxjs';
 import { HighchartsChartModule } from 'highcharts-angular';
 import * as Highcharts from 'highcharts';
+import HighchartsNetworkgraph from 'highcharts/modules/networkgraph';
+HighchartsNetworkgraph(Highcharts);
 
 @Component({
   standalone: true,
@@ -13,15 +15,43 @@ import * as Highcharts from 'highcharts';
 })
 export class CookievizComponent {
   public cookies: Observable<Map<String, String[]>> | undefined;
+  data: Array<Array<String>> = [];
   @ViewChild('container') container: ElementRef | undefined;
   Highcharts: typeof Highcharts = Highcharts;
   updateFlag = false;
-  data = [1, 2, 3, 4];
 
   chartOptions: Highcharts.Options = {
+    title: {
+      text: 'CookieVis 2.0',
+    },
+    chart: {
+      type: 'networkgraph',
+    },
+    plotOptions: {
+      networkgraph: {
+        layoutAlgorithm: {
+          enableSimulation: true,
+          integration: 'verlet',
+          linkLength: 100,
+        },
+        link: {
+          color: 'red',
+        },
+      },
+    },
     series: [
       {
-        type: 'line',
+        marker: {
+          radius: 15,
+        },
+        dataLabels: {
+          enabled: true,
+          textPath: {
+            enabled: true,
+          },
+          linkFormat: '',
+        },
+        type: 'networkgraph',
         data: this.data,
       },
     ],
@@ -29,10 +59,30 @@ export class CookievizComponent {
 
   log() {
     console.log('cookie refresh');
-    console.log(this.cookies);
+    this.updateFlag = true;
   }
 
   constructor(public browsingService: BrowsingService) {
     this.cookies = browsingService.getCookies();
+    this.cookies?.subscribe((d) => {
+      this.data = [];
+      console.log(d);
+      d.forEach((v, k) => {
+        v.forEach((e) => {
+          this.data.push([e, k]);
+        });
+      });
+
+      this.chartOptions.series = [
+        {
+          marker: {
+            radius: 10,
+          },
+          type: 'networkgraph',
+          data: this.data,
+        },
+      ];
+      this.updateFlag = true;
+    });
   }
 }
diff --git a/src/app/services/browsing.service.ts b/src/app/services/browsing.service.ts
index 7a158fd..75aab42 100644
--- a/src/app/services/browsing.service.ts
+++ b/src/app/services/browsing.service.ts
@@ -34,7 +34,6 @@ export class BrowsingService {
 
   goToPage(url: string) {
     this.ipcRenderer.invoke('go-to-page', url).then(() => this.updateHistory());
-    // this.ipcRenderer.invoke('cookie-update');
   }
 
   setToCurrentUrl() {
@@ -76,9 +75,8 @@ export class BrowsingService {
       this.ipcRenderer = ipc;
     }
 
-    this.ipcRenderer.on('cookies', (event, data) => {
+    this.ipcRenderer.on('cookies', (_, data) => {
       this.setCookies(data.url, data.cookies);
-      console.log(this.cookies$.getValue());
     });
   }
 }

From b011964ce5f6b59258c5e63c11a359a9985a72eb Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Thu, 18 Jan 2024 21:47:38 +0100
Subject: [PATCH 11/12] keep only relevant cookies

---
 electron/handleEvents.js | 9 +++++++--
 electron/main.js         | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/electron/handleEvents.js b/electron/handleEvents.js
index 7636689..b6ba702 100644
--- a/electron/handleEvents.js
+++ b/electron/handleEvents.js
@@ -4,14 +4,19 @@ function initEventsHandler(mainWin, browserView, cookieWin) {
   const winContent = mainWin.webContents;
   const browserContent = browserView.webContents;
   const cookieContent = cookieWin.webContents;
+  let lastHost = "";
+
   browserContent.on("did-navigate", async (event, url) => {
-    console.log("URL changed:", url);
+    let host = new URL(url).host;
+    if (lastHost !== host) {
+      lastHost = host;
+      await session.defaultSession.clearStorageData({ storages: ["cookies"] });
+    }
     let cookies = await session.defaultSession.cookies.get({});
     let parsedcookies = new Array();
     cookies.forEach((cookie) => {
       parsedcookies.push(cookie.domain);
     });
-    winContent.send("cookies", { url: url, cookies: parsedcookies });
     cookieContent.send("cookies", { url: url, cookies: parsedcookies });
   });
 
diff --git a/electron/main.js b/electron/main.js
index 8318061..2312d60 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -12,6 +12,7 @@ app.whenReady().then(() => {
       webSecurity: false,
     },
   });
+
   const cookieWindow = new BrowserWindow({
     parent: browserWindow,
     title: "COOKIEVIZ 2.0",
@@ -22,10 +23,9 @@ app.whenReady().then(() => {
       nodeIntegration: true,
       webSecurity: false,
     },
-    backgroundColor: "gray",
     resizable: true,
     show: false,
-    closable: false,
+    closable: true,
   });
 
   if (isDev) {

From a5da4455be66029eb3339fef1b712c5af4f1baf2 Mon Sep 17 00:00:00 2001
From: Yassine AMAGHZAZ <yassine.amaghzaz@gmail.com>
Date: Thu, 18 Jan 2024 22:15:32 +0100
Subject: [PATCH 12/12] fix width and style

---
 electron/main.js                           |  4 +-
 src/app/cookieviz/cookieviz.component.html |  1 -
 src/app/cookieviz/cookieviz.component.ts   | 53 ++++++++++++----------
 3 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index 2312d60..9006d02 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -23,9 +23,9 @@ app.whenReady().then(() => {
       nodeIntegration: true,
       webSecurity: false,
     },
-    resizable: true,
+    resizable: false,
     show: false,
-    closable: true,
+    closable: false,
   });
 
   if (isDev) {
diff --git a/src/app/cookieviz/cookieviz.component.html b/src/app/cookieviz/cookieviz.component.html
index 77040ed..e39fd13 100644
--- a/src/app/cookieviz/cookieviz.component.html
+++ b/src/app/cookieviz/cookieviz.component.html
@@ -1,4 +1,3 @@
-<button (click)="log()">refresh</button>
 <highcharts-chart
   [Highcharts]="Highcharts"
   [options]="chartOptions"
diff --git a/src/app/cookieviz/cookieviz.component.ts b/src/app/cookieviz/cookieviz.component.ts
index 03c92e9..4af30ce 100644
--- a/src/app/cookieviz/cookieviz.component.ts
+++ b/src/app/cookieviz/cookieviz.component.ts
@@ -16,16 +16,20 @@ HighchartsNetworkgraph(Highcharts);
 export class CookievizComponent {
   public cookies: Observable<Map<String, String[]>> | undefined;
   data: Array<Array<String>> = [];
+  nodes: Array<any> = [];
   @ViewChild('container') container: ElementRef | undefined;
   Highcharts: typeof Highcharts = Highcharts;
   updateFlag = false;
 
+  // chart custom config
   chartOptions: Highcharts.Options = {
     title: {
       text: 'CookieVis 2.0',
     },
     chart: {
       type: 'networkgraph',
+      width: 690,
+      height: 670,
     },
     plotOptions: {
       networkgraph: {
@@ -34,52 +38,55 @@ export class CookievizComponent {
           integration: 'verlet',
           linkLength: 100,
         },
-        link: {
-          color: 'red',
-        },
       },
     },
     series: [
       {
-        marker: {
-          radius: 15,
-        },
-        dataLabels: {
-          enabled: true,
-          textPath: {
-            enabled: true,
-          },
-          linkFormat: '',
-        },
         type: 'networkgraph',
         data: this.data,
       },
     ],
   };
 
-  log() {
-    console.log('cookie refresh');
-    this.updateFlag = true;
-  }
-
   constructor(public browsingService: BrowsingService) {
     this.cookies = browsingService.getCookies();
     this.cookies?.subscribe((d) => {
+      // clear old nodes
       this.data = [];
-      console.log(d);
+      this.nodes = [];
       d.forEach((v, k) => {
+        // add child nodes
         v.forEach((e) => {
           this.data.push([e, k]);
         });
+        // add parent nodes
+        this.nodes.push({
+          id: k,
+          dataLabels: {
+            enabled: true,
+            linkFormat: '',
+            style: {
+              fontSize: '1em',
+              fontWeight: 'normal',
+            },
+            crop: true,
+          },
+          marker: {
+            radius: 7,
+            fillColor: 'red',
+          },
+        });
       });
-
+      // update network graph
       this.chartOptions.series = [
         {
-          marker: {
-            radius: 10,
-          },
           type: 'networkgraph',
+          nodes: this.nodes,
           data: this.data,
+          marker: {
+            radius: 5,
+            fillColor: 'black',
+          },
         },
       ];
       this.updateFlag = true;