From 77da826bc08309738f3e536503045b9cb55824b0 Mon Sep 17 00:00:00 2001
From: AndiMajore <andi.majore@googlemail.com>
Date: Sat, 8 Apr 2023 12:11:43 +0200
Subject: [PATCH] changed reset button to dropdown
---
.../analysis-panel.component.html | 2 +-
.../analysis-panel.component.ts | 11 ++-
.../center-view-inverse.component.html | 50 ++++++++-----
.../center-view-inverse.component.scss | 36 ++++++++++
.../center-view-inverse.component.ts | 7 +-
.../network-menu-left.component.html | 2 +-
.../network-menu-left.component.ts | 8 ++-
.../center-view/center-view.component.html | 70 ++++++++++++++-----
.../center-view/center-view.component.scss | 36 ++++++++++
.../center-view/center-view.component.ts | 10 ++-
.../network-menu/network-menu.component.html | 2 +-
.../network-menu/network-menu.component.ts | 8 ++-
.../components/network/network.component.html | 4 +-
.../components/network/network.component.ts | 11 ++-
.../explorer-page.component.html | 4 +-
.../explorer-page/explorer-page.component.ts | 8 +++
16 files changed, 221 insertions(+), 48 deletions(-)
diff --git a/src/app/components/analysis-panel/analysis-panel.component.html b/src/app/components/analysis-panel/analysis-panel.component.html
index bcc633e7..f882f3e6 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/src/app/components/analysis-panel/analysis-panel.component.html
@@ -382,7 +382,7 @@
<div class="tab-content" [class.is-visible]="tab === 'network'">
<!-- network start -->
- <app-network networkType="analysis" [nodeData]="nodeData"></app-network>
+ <app-network (resetEmitter)="reset()" networkType="analysis" [nodeData]="nodeData"></app-network>
<!-- network end -->
</div>
<div
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 899f07b8..f8416354 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -32,7 +32,7 @@ import {NetworkHandlerService} from 'src/app/services/network-handler/network-ha
import {LegendService} from 'src/app/services/legend-service/legend-service.service';
import {LoadingScreenService} from 'src/app/services/loading-screen/loading-screen.service';
import {version} from '../../../version';
-import {downloadCSV} from 'src/app/utils'
+import {downloadCSV} from 'src/app/utils';
declare var vis: any;
@@ -132,6 +132,13 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
await this.refresh();
}
+ @Output() resetEmitter: EventEmitter<boolean> = new EventEmitter();
+
+ public reset() {
+ this.resetEmitter.emit(true);
+ this.close();
+ }
+
private rankTable(table: Array<Drug & Scored> | Array<Node & Scored & Seeded>) {
let lastRank = 1;
for (let idx = 0; idx < table.length; idx++) {
@@ -689,7 +696,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
if (node.drugstoneType === view) {
data.push(node);
}
- })
+ });
if ('score' in data[0]) {
data = data.sort((a, b) => b['score'] - a['score']);
diff --git a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.html b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.html
index 63b5a807..e19acc1e 100644
--- a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.html
+++ b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.html
@@ -1,19 +1,37 @@
-<button
- (click)="fitNetwork()"
- class="button is-primary is-rounded has-tooltip"
- pTooltip="Reset the network zoom and position."
- [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
- tooltipPosition="right"
- [ngClass]="{
- 'is-small': drugstoneConfig.smallStyle
- }"
->
- <span
- [ngClass]="{
+<div class="control dropdown is-hoverable">
+ <div class="dropdown-trigger">
+ <button
+ aria-haspopup="true"
+ attr.aria-controls="controls-menu-button"
+ class="button is-rounded is-small is-outlined highlight-primary">
+ <span
+ [ngClass]="{
'text-normal': drugstoneConfig.smallStyle
}"
- >
- Reset View
+ >
+ Reset
</span>
- <app-fa-solid-icon icon="sync-alt" classString="is-small last-item-in-button"></app-fa-solid-icon>
-</button>
+ <app-fa-solid-icon icon="sync-alt" classString="is-small last-item-in-button"></app-fa-solid-icon>
+ </button>
+ <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu">
+ <div class="dropdown-content inner-dropdown">
+ <a class="dropdown-item has-tooltip" pTooltip="Reset the network zoom and position."
+ (click)="fitNetwork()"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
+ tooltipPosition="right"
+ [ngClass]="{
+ 'is-small': drugstoneConfig.smallStyle
+ }">Reset View
+ </a>
+ <a class="dropdown-item has-tooltip" pTooltip="Reset everything to the initial state."
+ (click)="fullReset()"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
+ tooltipPosition="right"
+ [ngClass]="{
+ 'is-small': drugstoneConfig.smallStyle
+ }">Full Reset
+ </a>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.scss b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.scss
index e69de29b..c160cea2 100644
--- a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.scss
+++ b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.scss
@@ -0,0 +1,36 @@
+@import "src/stylesheets/variables";
+
+div.dropdown-list {
+ right: 0;
+ left: auto !important;
+ background-color: var(--drgstn-background);
+ min-width: $menu-width !important;
+ width: auto;
+}
+
+div.control.dropdown {
+ margin-bottom: 0.4rem;
+}
+
+.dropdown-menu {
+ z-index: $menu-z-index !important;
+}
+
+.inner-dropdown {
+ padding-bottom: 0 !important;
+
+ .dropdown-menu {
+ margin-left: calc(150px - 15px);
+ width: 150px;
+ margin-top: -45px;
+
+ .dropdown-content {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+
+ .dropdown-item {
+ padding: .375rem !important;
+ }
+ }
+ }
+}
diff --git a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.ts b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.ts
index 37464a4e..32755e00 100644
--- a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.ts
+++ b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
@@ -18,4 +18,9 @@ export class CenterViewInverseComponent implements OnInit {
this.networkHandler.activeNetwork.networkInternal.fit();
}
+ @Output() resetEmitter: EventEmitter<boolean> = new EventEmitter();
+
+ public fullReset() {
+ this.resetEmitter.emit(true);
+ }
}
diff --git a/src/app/components/network/network-menu-left/network-menu-left.component.html b/src/app/components/network/network-menu-left/network-menu-left.component.html
index 51d62e72..e630b361 100644
--- a/src/app/components/network/network-menu-left/network-menu-left.component.html
+++ b/src/app/components/network/network-menu-left/network-menu-left.component.html
@@ -38,7 +38,7 @@
*ngIf="drugstoneConfig.config.showNetworkMenuButtonScreenshot"
>
<div class="network-footer-toolbar-element">
- <app-center-view-inverse></app-center-view-inverse>
+ <app-center-view-inverse (resetEmitter)="reset()"></app-center-view-inverse>
</div>
</div>
<div
diff --git a/src/app/components/network/network-menu-left/network-menu-left.component.ts b/src/app/components/network/network-menu-left/network-menu-left.component.ts
index 42f4c2aa..ff34ad8c 100644
--- a/src/app/components/network/network-menu-left/network-menu-left.component.ts
+++ b/src/app/components/network/network-menu-left/network-menu-left.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
@@ -11,7 +11,13 @@ export class NetworkMenuLeftComponent implements OnInit {
constructor(public drugstoneConfig: DrugstoneConfigService, public networkHandler: NetworkHandlerService) { }
+ @Output() resetEmitter: EventEmitter<boolean> = new EventEmitter();
+
ngOnInit(): void {
}
+ public reset() {
+ this.resetEmitter.emit(true);
+ }
+
}
diff --git a/src/app/components/network/network-menu/center-view/center-view.component.html b/src/app/components/network/network-menu/center-view/center-view.component.html
index ab4fd86a..a1d03189 100644
--- a/src/app/components/network/network-menu/center-view/center-view.component.html
+++ b/src/app/components/network/network-menu/center-view/center-view.component.html
@@ -1,18 +1,56 @@
-<button
- (click)="fitNetwork()"
- class="button is-primary is-rounded has-tooltip"
- pTooltip="Reset the network zoom and position."
- [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
- tooltipPosition="left"
- [ngClass]="{
- 'is-small': drugstoneConfig.smallStyle
- }"
->
- <app-fa-solid-icon icon="sync-alt"></app-fa-solid-icon>
- <span
- [ngClass]="{
+<!--<button-->
+<!-- (click)="fitNetwork()"-->
+<!-- class="button is-primary is-rounded has-tooltip"-->
+<!-- pTooltip="Reset the network zoom and position."-->
+<!-- [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"-->
+<!-- tooltipPosition="right"-->
+<!-- [ngClass]="{-->
+<!-- 'is-small': drugstoneConfig.smallStyle-->
+<!-- }"-->
+<!-->-->
+<!-- <span-->
+<!-- [ngClass]="{-->
+<!-- 'text-normal': drugstoneConfig.smallStyle-->
+<!-- }"-->
+<!-- >-->
+<!-- Reset View-->
+<!-- </span>-->
+<!-- <app-fa-solid-icon icon="sync-alt" classString="is-small last-item-in-button"></app-fa-solid-icon>-->
+<div class="control dropdown is-hoverable">
+ <div class="dropdown-trigger">
+ <button
+ aria-haspopup="true"
+ attr.aria-controls="controls-menu-button"
+ class="button is-rounded is-small is-outlined highlight-primary">
+ <span
+ [ngClass]="{
'text-normal': drugstoneConfig.smallStyle
}"
- >Reset View</span
- >
-</button>
+ >
+ Reset
+ </span>
+ <app-fa-solid-icon icon="sync-alt" classString="is-small last-item-in-button"></app-fa-solid-icon>
+ </button>
+ <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu">
+ <div class="dropdown-content inner-dropdown">
+ <a class="dropdown-item has-tooltip" pTooltip="Reset the network zoom and position."
+ (click)="fitNetwork()"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ tooltipPosition="left"
+ [ngClass]="{
+ 'is-small': drugstoneConfig.smallStyle
+ }">Reset View
+ </a>
+ <a class="dropdown-item has-tooltip" pTooltip="Reset everything to the initial state."
+ (click)="fullReset()"
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ tooltipPosition="left"
+ [ngClass]="{
+ 'is-small': drugstoneConfig.smallStyle
+ }">Full Reset
+ </a>
+ </div>
+ </div>
+ <!--</button>-->
+ </div>
+</div>
diff --git a/src/app/components/network/network-menu/center-view/center-view.component.scss b/src/app/components/network/network-menu/center-view/center-view.component.scss
index e69de29b..c160cea2 100644
--- a/src/app/components/network/network-menu/center-view/center-view.component.scss
+++ b/src/app/components/network/network-menu/center-view/center-view.component.scss
@@ -0,0 +1,36 @@
+@import "src/stylesheets/variables";
+
+div.dropdown-list {
+ right: 0;
+ left: auto !important;
+ background-color: var(--drgstn-background);
+ min-width: $menu-width !important;
+ width: auto;
+}
+
+div.control.dropdown {
+ margin-bottom: 0.4rem;
+}
+
+.dropdown-menu {
+ z-index: $menu-z-index !important;
+}
+
+.inner-dropdown {
+ padding-bottom: 0 !important;
+
+ .dropdown-menu {
+ margin-left: calc(150px - 15px);
+ width: 150px;
+ margin-top: -45px;
+
+ .dropdown-content {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+
+ .dropdown-item {
+ padding: .375rem !important;
+ }
+ }
+ }
+}
diff --git a/src/app/components/network/network-menu/center-view/center-view.component.ts b/src/app/components/network/network-menu/center-view/center-view.component.ts
index 734fcf92..27839a15 100644
--- a/src/app/components/network/network-menu/center-view/center-view.component.ts
+++ b/src/app/components/network/network-menu/center-view/center-view.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
@@ -9,8 +9,12 @@ import { NetworkHandlerService } from 'src/app/services/network-handler/network-
})
export class CenterViewComponent implements OnInit {
+
+
constructor(public networkHandler: NetworkHandlerService, public drugstoneConfig: DrugstoneConfigService) { }
+ @Output() resetEmitter: EventEmitter<boolean> = new EventEmitter();
+
ngOnInit(): void {
}
@@ -18,4 +22,8 @@ export class CenterViewComponent implements OnInit {
this.networkHandler.activeNetwork.networkInternal.fit();
}
+ public fullReset() {
+ this.resetEmitter.emit(true);
+ }
+
}
diff --git a/src/app/components/network/network-menu/network-menu.component.html b/src/app/components/network/network-menu/network-menu.component.html
index 4da926a7..878a0b97 100644
--- a/src/app/components/network/network-menu/network-menu.component.html
+++ b/src/app/components/network/network-menu/network-menu.component.html
@@ -38,7 +38,7 @@
*ngIf="drugstoneConfig.config.showNetworkMenuButtonCenter"
>
<div class="network-footer-toolbar-element">
- <app-center-view></app-center-view>
+ <app-center-view (resetEmitter)="reset()"></app-center-view>
</div>
</div>
<div
diff --git a/src/app/components/network/network-menu/network-menu.component.ts b/src/app/components/network/network-menu/network-menu.component.ts
index 24e9f36e..f095342a 100644
--- a/src/app/components/network/network-menu/network-menu.component.ts
+++ b/src/app/components/network/network-menu/network-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
@@ -11,7 +11,13 @@ export class NetworkMenuComponent implements OnInit {
constructor(public drugstoneConfig: DrugstoneConfigService, public networkHandler: NetworkHandlerService) { }
+ @Output() resetEmitter: EventEmitter<boolean> = new EventEmitter();
+
ngOnInit(): void {
}
+ public reset() {
+ this.resetEmitter.emit(true);
+ }
+
}
diff --git a/src/app/components/network/network.component.html b/src/app/components/network/network.component.html
index e198d47e..30ba1e23 100644
--- a/src/app/components/network/network.component.html
+++ b/src/app/components/network/network.component.html
@@ -81,14 +81,14 @@
</div>
</div>
- <app-network-menu
+ <app-network-menu (resetEmitter)="reset()"
*ngIf="
drugstoneConfig.config.showNetworkMenu &&
drugstoneConfig.config.showNetworkMenu === 'right'
"
></app-network-menu>
- <app-network-menu-left
+ <app-network-menu-left (resetEmitter)="reset()"
*ngIf="
drugstoneConfig.config.showNetworkMenu &&
drugstoneConfig.config.showNetworkMenu === 'left'
diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index 372f0dca..977af0bc 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import domtoimage from 'dom-to-image';
import {InteractionDatabase} from 'src/app/config';
import {DrugstoneConfigService} from 'src/app/services/drugstone-config/drugstone-config.service';
@@ -113,6 +113,12 @@ export class NetworkComponent implements OnInit {
return this.nodeData.nodes.length > 100 || this.nodeData.edges.length > 100;
}
+ @Output() resetEmitter: EventEmitter<boolean> = new EventEmitter();
+
+ public reset() {
+ this.resetEmitter.emit(true);
+ }
+
rectangleSelect(select: boolean) {
this.selectMode = select;
@@ -135,6 +141,7 @@ export class NetworkComponent implements OnInit {
public rect = undefined;
+
selectNodesFromHighlight() {
// const fromX;
// const toX;
@@ -157,7 +164,6 @@ export class NetworkComponent implements OnInit {
}
}
this.net.selectNodes(nodesIdInDrawing);
- console.log(selection);
}
getStartToEnd(start, theLen) {
@@ -174,7 +180,6 @@ export class NetworkComponent implements OnInit {
this.canvas = this.net.canvas.frame.canvas;
this.canvas.oncontextmenu = () => false;
this.ctx = this.canvas.getContext('2d');
- console.log(this.ctx)
this.canvas.addEventListener('mousemove', this.dragMouseMove.bind(this));
this.canvas.addEventListener('mousedown', this.dragMouseDown.bind(this));
this.canvas.addEventListener('mouseup', this.dragMouseUp.bind(this));
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index d6f7b11e..33737716 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -617,7 +617,7 @@
<div class="drugstone network column" id="main-column">
<!-- analysis panel with analysis network -->
<div *ngIf="selectedToken">
- <app-analysis-panel
+ <app-analysis-panel (resetEmitter)="reset()"
[(token)]="selectedToken"
[(tokenType)]="selectedAnalysisTokenType"
(showDetailsChange)="
@@ -627,7 +627,7 @@
></app-analysis-panel>
</div>
<!-- explorer network -->
- <app-network networkType="explorer" [nodeData]="nodeData"></app-network>
+ <app-network (resetEmitter)="reset()" networkType="explorer" [nodeData]="nodeData"></app-network>
</div>
<!-- End network block -->
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 1f9c0ff4..769a8908 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -46,6 +46,13 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
@Input()
public id: undefined | string;
+
+ public reset() {
+ this.config = this.config
+ this.network = this.network
+ this.groups = this.groups
+ }
+
@Input()
public set config(config: string | undefined) {
if (config == null) {
@@ -57,6 +64,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
}
+
@Input()
public set groups(groups: string | undefined) {
if (groups == null) {
--
GitLab