diff --git a/package-lock.json b/package-lock.json
index c2628c964788b77823c1a7acc3a17169d941ba53..a2a57a10066f427b62ba6d8a8d4728455ff31bad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "netex",
- "version": "1.1.16-rc3",
+ "version": "1.1.16-rc8",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "netex",
- "version": "1.1.16-rc3",
+ "version": "1.1.16-rc8",
"dependencies": {
"@angular/animations": "^12.2.16",
"@angular/cdk": "^12.2.13",
diff --git a/package.json b/package.json
index 4ca9f99eae8a98475ee75905ab13ca019cd4ffa2..6f7979b59f00671ff89ae4e0b220c580cea5a792 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "netex",
- "version": "1.1.16-rc3",
+ "version": "1.1.16-rc8",
"scripts": {
"ng": "ng",
"start:dev": "ng serve --configuration=dev",
diff --git a/releases/latest b/releases/latest
index d977e43d8cea9401895badf478456ad6017730ab..e8b2b4f786d4c75fa3bb871504b966bcecb64798 100644
--- a/releases/latest
+++ b/releases/latest
@@ -1 +1 @@
-1.1.16-rc3
+1.1.16-rc8
diff --git a/src/app/components/analysis-panel/analysis-panel.component.scss b/src/app/components/analysis-panel/analysis-panel.component.scss
index 640a0499d45c311f221132604171d4d2361bf4bd..eefa3efa52cfe0b0050150a8090811874338e4a9 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.scss
+++ b/src/app/components/analysis-panel/analysis-panel.component.scss
@@ -82,6 +82,8 @@
}
div.dropdown-list {
+ padding: 0 !important;
+ border-radius: 5px !important;
right: 0;
left: auto !important;
background-color: var(--drgstn-background);
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 6ae0dec86427d0a4b4d010c7c57aaa480639436f..39cd9c5459fc04ff6906242e167be09799001ae2 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -76,19 +76,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
// private drugEdges: any[] = [];
public tab: 'meta' | 'network' | 'table' = 'network';
- // public adjacentDrugs = false;
- // public adjacentDrugList: Node[] = [];
- // public adjacentDrugEdgesList: Node[] = [];
- //
- // public adjacentDisordersProtein = false;
- // public adjacentDisordersDrug = false;
- //
- // public adjacentProteinDisorderList: Node[] = [];
- // public adjacentProteinDisorderEdgesList: Node[] = [];
- //
- // public adjacentDrugDisorderList: Node[] = [];
- // public adjacentDrugDisorderEdgesList: Node[] = [];
-
private proteins: any;
public effects: any;
@@ -136,6 +123,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
public reset() {
this.resetEmitter.emit(true);
+ this.networkHandler.activeNetwork.selectedTissue = null;
+ this.networkHandler.activeNetwork.expressionExpanded = false;
this.close();
}
@@ -248,10 +237,17 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
});
});
}).then(() => {
+ this.networkHandler.activeNetwork.networkInternal.on('dragEnd', (properties) => {
+ const node_ids = this.networkHandler.activeNetwork.networkInternal.getSelectedNodes();
+ if (node_ids.length === 0) {
+ return;
+ }
+ this.analysis.addNodesByIdsToSelection(node_ids);
+ this.networkHandler.activeNetwork.networkInternal.unselectAll();
+ });
this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => {
this.showDetailsChange.emit(null);
});
-
this.networkHandler.activeNetwork.networkInternal.on('doubleClick', (properties) => {
const nodeIds: Array<string> = properties.nodes;
if (nodeIds.length > 0) {
@@ -485,7 +481,14 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
setTimeout(() => {
this.networkHandler.activeNetwork.networkInternal.setData(this.nodeData);
}, 1000);
-
+ this.networkHandler.activeNetwork.networkInternal.on('dragEnd', (properties) => {
+ const node_ids = this.networkHandler.activeNetwork.networkInternal.getSelectedNodes();
+ if (node_ids.length === 0) {
+ return;
+ }
+ this.analysis.addNodesByIdsToSelection(node_ids);
+ this.networkHandler.activeNetwork.networkInternal.unselectAll();
+ });
this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => {
this.showDetailsChange.emit(null);
});
@@ -616,8 +619,10 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
private async refresh() {
if (this.token) {
if (this.tokenType === 'view') {
+ this.networkHandler.showSeedsButton = false;
await this.refreshView();
} else {
+ this.networkHandler.showSeedsButton = true;
await this.refreshTask();
}
}
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 e19acc1e57d37ca1f61d93107a6e07196fc7691c..7410bc78f4dc71fd7b986513882f896a4bfe5217 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,37 +1,42 @@
-<div class="control dropdown is-hoverable">
+<div class="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">
+ class="button is-rounded is-outlined highlight-primary"
+ [ngClass]="{
+ 'is-small': drugstoneConfig.smallStyle
+ }"
+ >
<span
[ngClass]="{
- 'text-normal': drugstoneConfig.smallStyle
+ 'text-small': drugstoneConfig.smallStyle
}"
>
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-right'"
- tooltipPosition="right"
- [ngClass]="{
- 'is-small': drugstoneConfig.smallStyle
+ </div>
+ <div class="dropdown-menu dropdown-list" id="controls-menu-button" role="menu"
+ [ngClass]="{'inner-dropdown': !networkHandler.networkSidebarOpen, 'small-border': drugstoneConfig.smallStyle}">
+ <div class="dropdown-content">
+ <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]="{
+ 'text-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
+ </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]="{
+ 'text-small': drugstoneConfig.smallStyle
}">Full Reset
- </a>
- </div>
+ </a>
</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 c160cea29b0ed8d164a24ea46fa4df8dc93616ca..b035647b838862c998b4a379f1c21fca96fad4b7 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
@@ -1,36 +1,24 @@
@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.inner-dropdown {
+ margin-left: 105px;
+ width: 150px;
+ margin-top: -45px;
- .dropdown-menu {
- margin-left: calc(150px - 15px);
- width: 150px;
- margin-top: -45px;
+ .dropdown-content {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
- .dropdown-content {
- padding-left: 0.5rem;
- padding-right: 0.5rem;
-
- .dropdown-item {
- padding: .375rem !important;
- }
+ .dropdown-item {
+ padding: .375rem !important;
}
}
}
+
+.dropdown-menu.inner-dropdown.small-border {
+ margin-left: 75px;
+}
diff --git a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html
index aab025831e1487a7043e5fff04bb190719d5b6ef..720916987feb118d4b839d11ebe5050c626db7be 100644
--- a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html
+++ b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html
@@ -9,7 +9,7 @@
'is-small': drugstoneConfig.smallStyle
}"
>
- <span [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+ <span [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>Download</span
>
<app-fa-solid-icon icon="download" classString="is-small last-item-in-button"></app-fa-solid-icon>
@@ -20,8 +20,8 @@
id="{{ 'controls-' + buttonId }}"
role="menu"
[ngClass]="{
- 'inner-dropdown': !networkHandler.networkSidebarOpen
- }"
+ 'inner-dropdown': !networkHandler.networkSidebarOpen, 'small-border': drugstoneConfig.smallStyle}
+ "
>
<div class="dropdown-content">
<a
diff --git a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss
index ffd2eb881f29b0d6143a3e9ea460d3918d730b9d..cb7dfe779205d7021e29d210386811a29f598118 100644
--- a/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss
+++ b/src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss
@@ -6,7 +6,7 @@
}
.inner-dropdown.dropdown-menu {
- margin-left: calc(150px - 15px);
+ margin-left: 134px;
width: 150px;
margin-top: -45px;
@@ -18,5 +18,8 @@
padding: .375rem !important;
}
}
+}
+.inner-dropdown.small-border {
+ margin-left: 100px;
}
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 e630b36166f4d95c73151730476c2d065213629e..0083f17487ce726f2fc7580da964688f36e426d9 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
@@ -20,7 +20,7 @@
<div class="rows">
<div
class="row is-full m-1 is-pulled-right"
- *ngIf="networkHandler.activeNetwork.networkType === 'analysis'"
+ *ngIf="networkHandler.activeNetwork.networkType === 'analysis' && networkHandler.showSeedsButton"
>
<app-toggle-inplace-reversed
class="network-footer-toolbar-element"
@@ -100,7 +100,7 @@
class="button is-rounded"
[class.is-primary]="networkHandler.activeNetwork.selectedTissue"
aria-haspopup="true"
- aria-controls="dropdown-menu"
+ aria-controls="dropdown-menu-id"
pTooltip="Tissue expression data is provided by the GTEx project."
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
tooltipPosition="right"
@@ -136,7 +136,8 @@
></app-fa-solid-icon>
</button>
</div>
- <div class="dropdown-menu" id="dropdown-menu" role="menu">
+ <div class="dropdown-menu" id="dropdown-menu-id" role="menu" [ngClass]="{
+ 'small-border': drugstoneConfig.smallStyle}">
<div class="dropdown-content tissue-dropdown">
<div class="scroll-area">
<a
@@ -144,6 +145,7 @@
[class.is-active]="
!networkHandler.activeNetwork.selectedTissue
"
+ [ngClass]="{'text-small': drugstoneConfig.smallStyle}"
class="dropdown-item"
>
None
@@ -153,6 +155,7 @@
let tissue of networkHandler.activeNetwork.analysis.getTissues()
"
(click)="networkHandler.activeNetwork.selectTissue(tissue)"
+ [ngClass]="{'text-small': drugstoneConfig.smallStyle}"
[class.is-active]="
networkHandler.activeNetwork.selectedTissue &&
tissue.drugstoneId ===
diff --git a/src/app/components/network/network-menu-left/network-menu-left.component.scss b/src/app/components/network/network-menu-left/network-menu-left.component.scss
index f0dbe108ea5e437e48916722af01af9e377c5e99..71c3f40d2fab89581b0dd9aa3b0556dc0b8d292b 100644
--- a/src/app/components/network/network-menu-left/network-menu-left.component.scss
+++ b/src/app/components/network/network-menu-left/network-menu-left.component.scss
@@ -95,6 +95,7 @@
right: -12px;
padding: calc(.75em - 1px) !important;
height: 1em !important;
+
.dropdown-menu {
z-index: $network-tissue-options-z;
@@ -118,7 +119,7 @@
.inner-dropdown {
.dropdown-menu {
- margin-left: calc(150px - 24px);
+ margin-left: 125px;
width: 250px;
margin-top: -45px;
@@ -131,4 +132,9 @@
}
}
}
+ .dropdown-menu.small-border {
+ margin-left: 90px;
+ }
}
+
+
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 ff34ad8cbaccb7027f260b1b64612120d0dccb28..3ba66ba2185a607b26e5bacb2017aba363808c46 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
@@ -19,5 +19,4 @@ export class NetworkMenuLeftComponent implements OnInit {
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 a1d031893b9f22ca014a113d43d56491c13a4f51..8a2789584d4bfcfaae790a8280f63e57550fca21 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,55 +1,42 @@
-<!--<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 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
+ class="button is-rounded is-outlined highlight-primary"
[ngClass]="{
- 'text-normal': drugstoneConfig.smallStyle
- }"
+ 'is-small': drugstoneConfig.smallStyle
+ }"
>
+ <app-fa-solid-icon icon="sync-alt" classString="is-small"></app-fa-solid-icon>
+ <span
+ [ngClass]="{
+ 'text-small': drugstoneConfig.smallStyle
+ }"
+ >
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
+ </div>
+ <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu"
+ [ngClass]="{'inner-dropdown':!networkHandler.networkSidebarOpen}">
+ <div class="dropdown-content">
+ <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]="{
+ 'text-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
+ </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]="{
+ 'text-small': drugstoneConfig.smallStyle
}">Full Reset
- </a>
- </div>
+ </a>
</div>
<!--</button>-->
</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 c160cea29b0ed8d164a24ea46fa4df8dc93616ca..752bfb4371e2566437776aaf1f45b7df0b73ba37 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
@@ -1,36 +1,20 @@
@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;
+.inner-dropdown.dropdown-menu {
+ margin-left: calc(-150px - 43px) !important;
+ width: 150px;
+ margin-top: -45px;
- .dropdown-content {
- padding-left: 0.5rem;
- padding-right: 0.5rem;
+ .dropdown-content {
+ padding-left: 0.5rem !important;
+ padding-right: 0.5rem !important;
- .dropdown-item {
- padding: .375rem !important;
- }
+ .dropdown-item {
+ padding: .375rem 0 !important;
}
}
}
diff --git a/src/app/components/network/network-menu/download-button/download-button.component.html b/src/app/components/network/network-menu/download-button/download-button.component.html
index 909fdd694b9ce21b4b031f88aeed407d221336ce..dafc0a1092bae5c1f92d0d3870d764180e6b8dfc 100644
--- a/src/app/components/network/network-menu/download-button/download-button.component.html
+++ b/src/app/components/network/network-menu/download-button/download-button.component.html
@@ -10,7 +10,7 @@
}"
>
<app-fa-solid-icon icon="download"></app-fa-solid-icon>
- <span [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+ <span [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>Download</span
>
</button>
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 878a0b97c8a7b81529f0dd6bd8109d99f71b3e86..cf04a2a70b9f986f6e026d37e6353c7ec5adaa3a 100644
--- a/src/app/components/network/network-menu/network-menu.component.html
+++ b/src/app/components/network/network-menu/network-menu.component.html
@@ -20,7 +20,7 @@
<div class="rows">
<div
class="row is-full m-1"
- *ngIf="networkHandler.activeNetwork.networkType === 'analysis'"
+ *ngIf="networkHandler.activeNetwork.networkType === 'analysis' && networkHandler.showSeedsButton"
>
<app-toggle-inplace
class="network-footer-toolbar-element"
@@ -141,6 +141,7 @@
[class.is-active]="
!networkHandler.activeNetwork.selectedTissue
"
+ [ngClass]="{'text-small': drugstoneConfig.smallStyle}"
class="dropdown-item"
>
None
@@ -155,6 +156,7 @@
tissue.drugstoneId ===
networkHandler.activeNetwork.selectedTissue.drugstoneId
"
+ [ngClass]="{'text-small': drugstoneConfig.smallStyle}"
class="dropdown-item"
>
{{ tissue.name }}
diff --git a/src/app/components/network/network.component.scss b/src/app/components/network/network.component.scss
index 8a1d92232ac6dd45cebb691efdcfe5565706b2ba..e5c60f73c479c93dffe0ea3fb00be1b1011c38b6 100644
--- a/src/app/components/network/network.component.scss
+++ b/src/app/components/network/network.component.scss
@@ -12,6 +12,8 @@
}
div.dropdown-list {
+ padding: 0 !important;
+ border-radius: 5px !important;
right: 0;
left: auto !important;
background-color: var(--drgstn-background);
diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index 977af0bc27180f11b1c142b3e7bb406ceb5bdee1..47754e9ec0761a52dc863f3e4f141038ba9b7da7 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -116,144 +116,11 @@ export class NetworkComponent implements OnInit {
@Output() resetEmitter: EventEmitter<boolean> = new EventEmitter();
public reset() {
+ this.nodeGroupsWithExpression = new Set();
+ this.nodeRenderer = null;
this.resetEmitter.emit(true);
}
- rectangleSelect(select: boolean) {
-
- this.selectMode = select;
- const options = this.getOptions();
- if (!options.interaction) {
- options.interaction = {};
- }
- if (select) {
- options.interaction.zoomView = false;
- options.interaction.dragView = false;
- this.initDragSelect();
- } else {
- options.interaction.zoomView = true;
- options.interaction.dragView = true;
- this.removeDragSelect();
- }
- this.updateOptions(options);
- }
-
- public rect = undefined;
-
-
-
- selectNodesFromHighlight() {
- // const fromX;
- // const toX;
- // const fromY;
- // const toY;
- const nodesIdInDrawing = [];
- const xRange = this.getStartToEnd(this.rect.startX, this.rect.w);
- const yRange = this.getStartToEnd(this.rect.startY, this.rect.h);
-
- // @ts-ignore
- const allNodes = this.nodeData.nodes.get();
- const selection = [];
- for (let i = 0; i < allNodes.length; i++) {
- const curNode = allNodes[i];
- const nodePosition = this.net.getPositions([curNode.id]);
- const nodeXY = this.net.canvasToDOM({x: nodePosition[curNode.id].x, y: nodePosition[curNode.id].y});
- if (xRange.start <= nodeXY.x && nodeXY.x <= xRange.end && yRange.start <= nodeXY.y && nodeXY.y <= yRange.end) {
- nodesIdInDrawing.push(curNode.id);
- selection.push({id: curNode.id, label: curNode.label});
- }
- }
- this.net.selectNodes(nodesIdInDrawing);
- }
-
- getStartToEnd(start, theLen) {
- return theLen > 0 ? {start: start, end: start + theLen} : {start: start + theLen, end: start};
- }
-
- private ctx: CanvasRenderingContext2D;
- private canvas: HTMLCanvasElement;
- private net: any;
-
- initDragSelect() {
- if (this.net === undefined) {
- this.net = this.networkInternal;
- this.canvas = this.net.canvas.frame.canvas;
- this.canvas.oncontextmenu = () => false;
- this.ctx = this.canvas.getContext('2d');
- this.canvas.addEventListener('mousemove', this.dragMouseMove.bind(this));
- this.canvas.addEventListener('mousedown', this.dragMouseDown.bind(this));
- this.canvas.addEventListener('mouseup', this.dragMouseUp.bind(this));
- }
- }
-
-
- removeDragSelect() {
- this.net = undefined;
- if (this.canvas) {
- this.canvas.removeEventListener('mousemove', this.dragMouseMove.bind(this));
- this.canvas.removeEventListener('mousedown', this.dragMouseDown.bind(this));
- this.canvas.removeEventListener('mouseup', this.dragMouseUp.bind(this));
- }
- }
-
- private drag = false;
- public offsetLeft = 0;
- public offsetTop = 0;
-
- dragMouseMove(e) {
- if (this.drag) {
- this.restoreDrawingSurface();
- this.rect.w = (e.pageX - this.offsetLeft) - this.rect.startX;
- this.rect.h = (e.pageY - this.offsetTop) - this.rect.startY;
-
- this.ctx.setLineDash([5]);
- this.ctx.strokeStyle = 'rgb(0, 102, 0)';
- this.ctx.strokeRect(this.rect.startX, this.rect.startY, this.rect.w, this.rect.h);
- this.ctx.setLineDash([]);
- this.ctx.fillStyle = 'rgba(0, 255, 0, 0.2)';
- this.ctx.fillRect(this.rect.startX, this.rect.startY, this.rect.w, this.rect.h);
-
- }
- }
-
- private canvasCursor = 'default';
-
- dragMouseDown(e) {
- if (e.button === 0) {
- this.offsetLeft = e.target.getBoundingClientRect().left;
- this.offsetTop = e.target.getBoundingClientRect().top;
- this.saveDrawingSurface();
- this.rect = {};
- this.rect.startX = e.pageX - this.offsetLeft;
- this.rect.startY = e.pageY - this.offsetTop;
- this.drag = true;
- this.canvasCursor = 'crosshair';
- }
- }
-
-
- dragMouseUp(e) {
- if (e.button === 0) {
- this.restoreDrawingSurface();
- this.drag = false;
-
- this.canvasCursor = 'default';
- this.selectNodesFromHighlight();
- }
- }
-
- private drawingSurfaceImageData: ImageData;
-
- saveDrawingSurface() {
- this.drawingSurfaceImageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
- }
-
-
- restoreDrawingSurface() {
- this.ctx.putImageData(this.drawingSurfaceImageData, 0, 0);
- }
-
-
getResetInputNetwork(): NetworkData {
const nodes = [...this.inputNetwork.nodes];
nodes.forEach(n => {
@@ -265,6 +132,15 @@ export class NetworkComponent implements OnInit {
return {edges: this.inputNetwork.edges, nodes};
}
+ resetInputNetwork(){
+ const nodes = this.inputNetwork.nodes;
+ nodes.forEach(n => {
+ if (n._group) {
+ n.group = n._group;
+ delete n._group;
+ }
+ });
+ }
setLoading(bool: boolean): void {
this.loading = bool;
diff --git a/src/app/components/toast/toast.component.html b/src/app/components/toast/toast.component.html
index f1e62739b7c1043962fb7d45575820dc55d5776c..f1e23f42d2938ae93910987465c2b9bc91248aa0 100644
--- a/src/app/components/toast/toast.component.html
+++ b/src/app/components/toast/toast.component.html
@@ -1,6 +1,6 @@
<div class="toast-holder">
<div *ngFor="let toast of toasts | keyvalue">
- <div class="toast {{ getDrugstoneClass(toast.value.type) }}">
+ <div class="toast {{ getDrugstoneClass(toast.value.type) }}" (click)="click(toast.key)">
<a (click)="close(toast.key)" aria-label="close" class="close">
<app-fa-solid-icon
title="Close analysis"
diff --git a/src/app/components/toast/toast.component.ts b/src/app/components/toast/toast.component.ts
index 0f0f5731e26b77153c29f7b9e31126a854fa1507..45b35d17afe089637e64298a38a83da868a455e8 100644
--- a/src/app/components/toast/toast.component.ts
+++ b/src/app/components/toast/toast.component.ts
@@ -30,5 +30,9 @@ export class ToastComponent implements OnInit {
public close(id: number) {
this.toast.deleteToast(id);
}
-
+
+ public click(id: number) {
+ this.toast.toastClicked(id);
+ }
+
}
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index 64f1b369e4773129bde62c82a8443af24989320b..becf421885efb8a6bbd2b58839da8ee76ee1633c 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -266,7 +266,8 @@ export interface Algorithm {
export interface Toast {
message: string;
- type: 'success' | 'info' | 'warning' | 'danger'
+ type: 'success' | 'info' | 'warning' | 'danger';
+ callback?: () => void;
}
export interface LiveToasts {
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 337377169bf837b0264ad557c914857cd3b8b097..223148f5844599f5a57fdc93c9c6b8bb8bc0bc47 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -444,15 +444,6 @@
<app-fa-solid-icon icon="plus"></app-fa-solid-icon>
<span>Add Connected Components</span>
</a>
-<!-- <a-->
-<!-- (click)="analysis.rectangleSelect()"-->
-<!-- class="card-footer-item text-primary"-->
-<!-- tooltipPosition="top"-->
-<!-- pTooltip="Use rectangle select mode to select genes."-->
-<!-- >-->
-<!-- <app-fa-solid-icon icon="plus"></app-fa-solid-icon>-->
-<!-- <span>Select mode</span>-->
-<!-- </a>-->
</footer>
<footer class="card-footer">
<a
@@ -518,7 +509,7 @@
[ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
>
<p class="card-header-title">
- <app-fa-solid-icon icon="tasks"></app-fa-solid-icon>
+ <app-fa-solid-icon icon="eye"></app-fa-solid-icon>
Views ({{ analysis.viewTokens != null ? analysis.viewTokens.length : 0 }})
</p>
<a
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 769a89085742ca0bd7faa9c0d6ea0c5ce2aa10bd..d6da6cf58107acb48ee0e5c8ba7c44ec387dc372 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -48,9 +48,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public reset() {
- this.config = this.config
- this.network = this.network
- this.groups = this.groups
+ this.networkHandler.activeNetwork.selectTissue(null);
+ this.config = this.config;
+ this.network = this.network;
+ this.groups = this.groups;
}
@Input()
@@ -172,6 +173,19 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
return this.selectedToken;
}
+ public setViewToken(token: string | null) {
+ this.selectedViewToken = token;
+ }
+
+ public setTaskToken(token: string | null) {
+ this.selectedAnalysisToken = token;
+ }
+
+
+ public bind(f: (token: (string | null)) => void) {
+ return f.bind(this);
+ }
+
@Input() set taskId(token: string | null) {
if (token == null || token.length === 0) {
this.selectedAnalysisToken = null;
@@ -232,6 +246,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
ngOnInit() {
this.setWindowWidth(document.getElementById('appWindow').getBoundingClientRect().width);
+ this.analysis.setViewTokenCallback(this.setViewToken.bind(this));
+ this.analysis.setTaskTokenCallback(this.setTaskToken.bind(this));
}
async ngAfterViewInit() {
@@ -458,6 +474,23 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
});
+ this.networkHandler.activeNetwork.networkInternal.on('dragEnd', (properties) => {
+ let node_ids = this.networkHandler.activeNetwork.networkInternal.getSelectedNodes();
+ if (node_ids.length === 0) {
+ return;
+ }
+ this.analysis.addNodesByIdsToSelection(node_ids);
+ this.networkHandler.activeNetwork.networkInternal.unselectAll();
+ });
+ this.networkHandler.activeNetwork.networkInternal.on('dragEnd', (properties) => {
+ let node_ids = this.networkHandler.activeNetwork.networkInternal.getSelectedNodes();
+ if (node_ids.length === 0) {
+ return;
+ }
+ this.analysis.addNodesByIdsToSelection(node_ids);
+ this.networkHandler.activeNetwork.networkInternal.unselectAll();
+ });
+
this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => {
this.closeSummary();
});
@@ -542,67 +575,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.drugstoneConfig.smallStyle = this.windowWidth < 1250;
}
- public initNetworkListeners(resolve){
- this.networkHandler.activeNetwork.networkInternal.on('doubleClick', (properties) => {
- const nodeIds: Array<string> = properties.nodes;
- if (nodeIds != null && nodeIds.length > 0) {
- const nodeId = nodeIds[0];
- const node = this.nodeData.nodes.get(nodeId);
- if (node.drugstoneId === undefined || node.drugstoneType !== 'protein') {
- this.analysis.unmappedNodeToast();
- // skip if node is not a protein mapped to backend
- return;
- }
- const wrapper = getWrapperFromNode(node);
- if (this.analysis.inSelection(node)) {
- this.analysis.removeItems([wrapper]);
- } else {
- this.analysis.addItems([wrapper]);
- }
- }
- });
-
- this.networkHandler.activeNetwork.networkInternal.on('click', (properties) => {
- if (properties.nodes.length === 0 && properties.edges.length === 1) {
- // clicked on one edge
- const edgeId = properties.edges[0];
- this.networkHandler.activeNetwork.openEdgeSummary(edgeId);
- } else {
- // clicked not on one edge
- const nodeIds: Array<string> = properties.nodes;
- if (nodeIds != null && nodeIds.length > 0) {
- const nodeId = nodeIds[0];
- const node = this.nodeData.nodes.get(nodeId);
- const wrapper = getWrapperFromNode(node);
- this.openNodeSummary(wrapper, false);
- } else {
- this.closeSummary();
- }
- }
- });
-
- this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => {
- this.closeSummary();
- });
-
- if (this.networkHandler.activeNetwork.selectedWrapper) {
- this.zoomToNode(this.networkHandler.activeNetwork.selectedWrapper.id);
- }
-
- this.networkHandler.activeNetwork.currentViewNodes = this.nodeData.nodes;
- this.networkHandler.activeNetwork.currentViewEdges = this.nodeData.edges;
-
- this.networkHandler.activeNetwork.queryItems = [];
- this.networkHandler.activeNetwork.updateQueryItems();
- this.networkHandler.activeNetwork.currentViewProteins = this.networkHandler.activeNetwork.inputNetwork.nodes;
- // this.fillQueryItems(this.currentViewNodes);
- if (this.networkHandler.activeNetwork.selectedWrapper) {
- this.networkHandler.activeNetwork.networkInternal.selectNodes([this.networkHandler.activeNetwork.selectedWrapper.id]);
- }
-
- resolve(true);
- }
-
public async openNodeSummary(item: Wrapper, zoom: boolean) {
// close edge summary if open
this.networkHandler.activeNetwork.activeEdge = null;
diff --git a/src/app/services/analysis/analysis.service.ts b/src/app/services/analysis/analysis.service.ts
index b631e2e49861d23ba2fab6b751de0c61205d12f2..3afeaa51ae377d88ce8ac24170259fadd0cd720a 100644
--- a/src/app/services/analysis/analysis.service.ts
+++ b/src/app/services/analysis/analysis.service.ts
@@ -76,6 +76,10 @@ export class AnalysisService {
private tissues: Tissue[] = [];
+ private viewTokenCallback: (task: (string | null)) => void;
+
+ private taskTokenCallback: (task: (string | null)) => void;
+
constructor(
public toast: ToastService,
private http: HttpClient,
@@ -104,6 +108,14 @@ export class AnalysisService {
});
}
+ setViewTokenCallback(f): void {
+ this.viewTokenCallback = f;
+ }
+
+ setTaskTokenCallback(f): void {
+ this.taskTokenCallback = f;
+ }
+
setViewInfos(): void {
this.netex.getViewInfos(this.viewTokens).then(res => {
// @ts-ignore
@@ -213,6 +225,25 @@ export class AnalysisService {
}
}
+ public addNodesByIdsToSelection(ids: string[]) {
+ const wrappers: Wrapper[] = [];
+ const unmappedNodes = [];
+ this.networkHandler.activeNetwork.currentViewNodes.forEach((node) => {
+ if (ids.indexOf(node.id) > -1) {
+ if (node.drugstoneType !== 'drug' && node.drugstoneType !== 'disorder' && node.drugstoneId === undefined) {
+ unmappedNodes.push(node.label);
+ } else {
+ // only consider proteins
+ wrappers.push(getWrapperFromNode(node));
+ }
+ }
+ });
+ this.addItems(wrappers);
+ if (unmappedNodes.length > 0) {
+ this.unmappedNodesToast(unmappedNodes);
+ }
+ }
+
// Adds first neighbors of selected nodes to selection
public addFirstNeighbors() {
@@ -242,11 +273,6 @@ export class AnalysisService {
this.addItems(wrappers);
}
-
- public rectangleSelect() {
- this.networkHandler.activeNetwork.rectangleSelect(true);
- }
-
// Identifies connected components of all selected nodes and adds all nodes of the components to the selection
public addConnectedComponents() {
const wrappers: Wrapper[] = [];
@@ -299,27 +325,6 @@ export class AnalysisService {
this.addItems(wrappers);
}
- // public addSeeds(nodes) {
- // const addedWrappers: Wrapper[] = [];
- // nodes.forEach((node) => {
- // if (node.isSeed === true && !this.inSelection(node)) {
- // addedWrappers.push(node);
- // this.selectedItems.set(node.id, node);
- // }
- // });
- // this.selectListSubject.next({items: addedWrappers, selected: true});
- // }
-
- // public removeSeeds(nodes) {
- // const removedWrappers: Wrapper[] = [];
- // nodes.forEach((node) => {
- // if (node.isSeed === true && this.inSelection(node)) {
- // removedWrappers.push(node);
- // this.selectedItems.delete(node.id);
- // }
- // });
- // this.selectListSubject.next({items: removedWrappers, selected: false});
- // }
public invertSelection(nodes) {
const newSelection = [];
@@ -371,9 +376,11 @@ export class AnalysisService {
localStorage.setItem(this.selectionsCookieKey, JSON.stringify(this.viewTokens));
this.toast.setNewToast({
- message: 'Analysis task started. This may take a while. ' +
- `Once the computation finished you can view the results in the task list to the ${this.drugstoneConfig.config.showSidebar}.`,
- type: 'success'
+ message: 'New network view based of the selection has been created. Load the new view by clicking here or on the entry in the \'Views\' list to the ' + this.drugstoneConfig.config.showSidebar,
+ type: 'success',
+ callback: () => {
+ this.viewTokenCallback(resp.token);
+ }
});
// @ts-ignore
return resp.token;
@@ -501,9 +508,14 @@ export class AnalysisService {
showToast(task: Task, status: 'DONE' | 'FAILED') {
let toastMessage;
let toastType;
+ let onClick = () => {
+ };
if (status === 'DONE') {
- toastMessage = 'Computation finished successfully. Click the task in the task list to view the results.';
+ toastMessage = 'Computation finished successfully. Click here or the task in the task list to view the results.';
toastType = 'success';
+ onClick = () => {
+ this.taskTokenCallback(task.token);
+ };
} else if (status === 'FAILED') {
toastMessage = 'Computation failed.';
toastType = 'danger';
@@ -512,6 +524,7 @@ export class AnalysisService {
this.toast.setNewToast({
message: toastMessage,
type: toastType,
+ callback: onClick
});
}
diff --git a/src/app/services/network-handler/network-handler.service.ts b/src/app/services/network-handler/network-handler.service.ts
index 8711a06ce672c66e35e0c5065c5b3861a4a4ce03..798c3e3539f4c6e7e155d5042205cd261ed7c57d 100644
--- a/src/app/services/network-handler/network-handler.service.ts
+++ b/src/app/services/network-handler/network-handler.service.ts
@@ -22,6 +22,9 @@ export class NetworkHandlerService {
public networks: { NetworkType: NetworkComponent } | {} = {};
public activeNetwork: NetworkComponent = new NetworkComponent(this.legendService, this.networkHandler, this.analysis, this.drugstoneConfig, this.netex, this.omnipath, this.loadingScreen);
+ public showSeedsButton = true;
+
+
public setActiveNetwork(network: NetworkType) {
this.triggerChange();
this.activeNetwork = this.networks[network];
diff --git a/src/app/services/toast/toast.service.ts b/src/app/services/toast/toast.service.ts
index 83748b8955acd6caec05c25d317fb6540dc9840e..9916f7ed3775c3c9752eb76912fd4432b1474eed 100644
--- a/src/app/services/toast/toast.service.ts
+++ b/src/app/services/toast/toast.service.ts
@@ -36,6 +36,12 @@ export class ToastService {
}
}
+ public toastClicked(id: number) {
+ if (this.liveToasts.hasOwnProperty(id)) {
+ this.liveToasts[id].callback();
+ }
+ }
+
get getToasts$ () {
return this.getToasts.asObservable();
}
diff --git a/src/version.ts b/src/version.ts
index 508ab3b56732c406a663ad3b150f757282ae940c..03fd361b3b8c29a040fd54abb3784cdecea5ed95 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1 +1 @@
-export const version = 'v1.1.16-rc3';
+export const version = 'v1.1.16-rc8';