From c3780adab2d1f01307bd36b99226b19d8196b88a Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 28 Jul 2022 06:52:08 +0200
Subject: [PATCH 1/2] Reduce mobile menus padding

---
 .../app/components/master-page/master-page.component.scss    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index c6a9aaeff..607e4abf8 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -15,6 +15,11 @@ li.nav-item {
   margin: auto 10px;
   padding-left: 10px;
   padding-right: 10px;
+  @media (max-width: 992px) {
+    margin: auto 7px;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
 }
 
 @media (min-width: 992px) {

From 94a536af28710f2441daeb0c17333f6d62fd3e9e Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 28 Jul 2022 07:45:37 +0200
Subject: [PATCH 2/2] Update mouse UX on LN map in dashboard (wip)

---
 .../nodes-channels-map.component.scss         |  6 +---
 .../nodes-channels-map.component.ts           | 29 +++++++++++++++----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
index 060032151..7914a5364 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
@@ -36,6 +36,7 @@
 
 .widget > .chart {
   -webkit-mask: linear-gradient(180deg, #11131f00 0%, #11131fff 20%);
+  min-height: 250px;
 }
 
 .chart {
@@ -43,23 +44,18 @@
   width: 100%;
   height: 100%;
   padding-right: 10px;
-
   @media (max-width: 992px) {
     padding-bottom: 25px;
   }
-
   @media (max-width: 829px) {
     padding-bottom: 50px;
   }
-
   @media (max-width: 767px) {
     padding-bottom: 25px;
   }
-
   @media (max-width: 629px) {
     padding-bottom: 55px;
   }
-
   @media (max-width: 567px) {
     padding-bottom: 55px;
   }
diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
index 7963cf544..16accda94 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { SeoService } from 'src/app/services/seo.service';
 import { ApiService } from 'src/app/services/api.service';
 import { Observable, switchMap, tap, zip } from 'rxjs';
@@ -26,7 +26,7 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
   chartOptions: EChartsOption = {};
   chartInitOptions = {
     renderer: 'canvas',
-  };
+  }; 
 
   constructor(
     private seoService: SeoService,
@@ -98,6 +98,7 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
     }
 
     this.chartOptions = {
+      silent: true,
       title: title ?? undefined,
       geo3D: {
         map: 'world',
@@ -110,9 +111,10 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
           }
         },
         viewControl: {
-          center: this.style === 'widget' ? [0, 0, -1] : undefined,
-          minDistance: 0.1,
-          distance: this.style === 'widget' ? 45 : 60,
+          center: this.style === 'widget' ? [0, 0, -10] : undefined,
+          minDistance: this.style === 'widget' ? 22 : 0.1,
+          maxDistance: this.style === 'widget' ? 22 : 60,
+          distance: this.style === 'widget' ? 22 : 60,
           alpha: 90,
           panMouseButton: 'left',
           rotateMouseButton: undefined,
@@ -167,6 +169,14 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
     };
   }
 
+  @HostListener('window:wheel', ['$event'])
+  onWindowScroll(e): void {
+    // Not very smooth when using the mouse
+    if (this.style === 'widget' && e.target.tagName === 'CANVAS') {
+      window.scrollBy({left: 0, top: e.deltaY, behavior: 'auto'});
+    }
+  }
+
   onChartInit(ec) {
     if (this.chartInstance !== undefined) {
       return;
@@ -174,6 +184,15 @@ export class NodesChannelsMap implements OnInit, OnDestroy {
 
     this.chartInstance = ec;
 
+    if (this.style === 'widget') {
+      this.chartInstance.getZr().on('click', (e) => {
+        this.zone.run(() => {
+          const url = new RelativeUrlPipe(this.stateService).transform(`/graphs/lightning/nodes-channels-map`);
+          this.router.navigate([url]);
+        });
+      });
+    }
+    
     this.chartInstance.on('click', (e) => {
       if (e.data && e.data.publicKey) {
         this.zone.run(() => {