Commit 9a70c4a5 authored by David Hoksza's avatar David Hoksza

Merge branch 'full_expansion' into 'master'

Full expansion

See merge request !1
parents 1bdcb6a6 8f23277e
Pipeline #7934 passed with stages
in 1 minute and 1 second
......@@ -2,6 +2,8 @@
Plugin enabling to explore a map in a more single-gene-centric and focused way.
Find detailed user documentation <a href="docs">here</a>.
To compile the plugin run:
- ```npm install```
......
#ceExplorationDiv .col-md-12{
padding-left: 3px;
padding-right: 3px;
}
.ceOptionsShowHideButton {
width:100%;
}
#rowOptions {
padding-top: 3px;
}
#rowOptions .col-md-2, #rowOptions .col-md-8 {
padding-left: 3px;
padding-right: 3px;
}
#ceExplorationDiv {
float: right;
width:30%;
height:100%;
position: relative;
overflow: hidden;
}
#ceSplitBarDiv {
background-color:black;
height:100%;
float:right;
width:2px;
cursor: col-resize;
}
/*#ceMain {*/
/*float: left;*/
/*width: 550px;*/
/*}*/
#ceSidebar {
float: right;
width: 100px;
}
#ceLeftsidebar {
float: left;
width: 100px;
height: 600px;
}
#ceSequence {
width: 600px;
height: 70px;
}
#ceSequence text, #ceLegend text {
font-weight: 600;
fill: #fff;
}
.ceChart {
height:100%;
}
.ceChart svg {
width: 100%;
height: 100%;
}
.ceSvg, .ceSvgOverlayRect {
width:100%;
height:100%;
}
.ceSvgOverlayRect{
fill: none;
pointer-events: all;
}
/******************************************************************************
Tree visualization
*******************************************************************************/
.ce-node {
cursor: pointer;
}
.ce-node circle {
/*stroke: steelblue;*/
stroke-width: 1px;
}
.ce-node circle.ce-leaf {
fill: white;
}
.ce-node circle.ce-inner {
fill: steelblue;
}
.ce-spawned circle{
stroke: black;
stroke-width: 3px;
}
.ce-node text.ce-species {
font: 10px sans-serif;
pointer-events: none;
}
.ce-node text.complex {
font-weight: bold;
}
.ce-link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.ce-path-link {
stroke-dasharray: 5;
stroke-width: 3.5px;
stroke: #cc0000;
}
#ceLegend {
width: 100%;
padding-top: 3px;
}
.ce-legend-trees {
display: table;
table-layout: fixed;
width: 100%;
}
.ce-legend-trees-row {
display: table-row;
}
.ce-legend-tree-cell {
display: table-cell;
}
.ce-legend-tree-label {
text-align: center;
color: rgb(242, 243, 244);
font-weight: bold;
cursor: pointer;
}
.ce-legend-tree-label:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.ce-legend-tree-label:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#ceOptionsExport {
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
#ceSearchBarContainers{
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 3px;
/*margin-left: 5px;*/
/*margin-right: 5px;*/
}
.ce-search-bar-container {
margin-right: 3px;
}
.ce-search-bar-container.last {
margin-right: 0px;
}
.ce-search-bar-input-group .input-group-addon{
/*background: white !important;*/
background-color: rgba(160, 160, 160, 0.09);
}
.ce-search-bar-container .form-control{
box-shadow:0 0 0;
border-color:#ccc;
background-color: rgba(160, 160, 160, 0.09);
}
.ce-search-bar-container button{
border:0;
background:transparent;
position:absolute;
top:0;
width: 100%;
height: 100%;
}
/******************************************************************************
General
*******************************************************************************/
.ce-cursor-glass {
cursor: zoom-in;
}
.ce-hidden {
display:none;
}
.row.no-gutter {
margin-right:0;
margin-left:0;
}
.row.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
/******************************************************************************
Tooltips / on-demand menus
******************************************************************************/
#ceTooltip, #ceNodeMenu, #ceMenu {
position: absolute;
width: auto;
/*height: auto;*/
padding: 10px;
background-color: rgba(256, 256, 256, 0.8);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
z-index: 100;
font-size: 12px;
}
#ceTooltip {
pointer-events: none;
}
#ceNodeMenu div, #ceMenu div {
cursor: pointer;
}
#ceTooltip.hidden, #ceNodeMenu.hidden {
display: none;
}
.ce-tooltip-species {
text-align: center;
/*text-decoration: underline;*/
font-weight: bold;
margin-bottom: 3px;
}
.ce-tooltip-list-header {
font-weight: bold;
}
.ce-tooltip-bioentities {
margin-bottom: 5px;
}
.ce-tooltip-bioentity {
border-bottom-style: dotted;
border-bottom-width: 1px;
margin-left: 5px;
}
.ce-legend-box {
border-radius: 5px;
margin: 3px;
padding-left: 5px;
}
/******************************************************************************
Structure viewer
******************************************************************************/
#ceLitemolApp {
position: relative;
height: 100%;
float: left;
width: 80%;
/*border-width: 1px;*/
/*border-style: dotted;*/
/*order: 1px solid green;*/
/*margin: 0 0 0 302px;*/
}
.ce-structure-viewer {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
/*padding-top: 60px;*/
/*overflow: auto;*/
}
.ce-structure-viewer .ce-records-list {
float: left;
width: 20%;
/*width: 300px;*/
height:100%;
overflow-y: auto;
/*border: 1px solid red;*/
}
.ce-structure-viewer .ce-closebtn {
position: absolute;
bottom: 0;
right: 20px;
font-size: 36px;
color: whitesmoke;
/*background-color: whitesmoke;*/
opacity: 0.7;
z-index:100;
/*margin-left: 50px;*/
}
.ce-structure-viewer .ce-pdb-record-info {
width:100%;
background-color: #000000;
opacity: 0.8;
color: #F8F8FF;
margin-bottom: 1px;
cursor: pointer;
}
.ce-pdb-record-info-attribute {
text-align: right;
}
.ce-pdb-record-info-value {
text-align: left;
}
.ce-pdb-record-info-link {
text-align: center;
font-weight: bold;
margin-bottom: 5px;
margin-top: 5px;
}
.ce-molecule-record {
border-left: 0;
}
.ce-molecule-record .panel-body {
padding: 0;
}
.ce-molecule-record .panel-group {
margin-bottom: 1px;
}
.ce-molecule-record .panel-heading {
font-weight: bold;
text-align: center;
cursor: pointer;
}
\ No newline at end of file
......@@ -103,6 +103,20 @@ to a specific position in the map - **localized exploration**.
![PRKN](img/prkn3.png)
#### Recursive exploration
Context menu (right click) of any node provides also access to the *recursive exploration*
functionality which allows to **recursively explore neighbors of a node**, i.e.
after generating nodes for all neighbors of the starting node, the procedure
repeats recursively for every of those neighbors. Since this can lead
to creation of thousands of nodes, which would significantly slow down the browser,
the procedure stops after retrieving given number of nodes. This threshold
can be set in the *Setttings* (see bellow). Please note, that **a web browser
can without problems handle only several thousands of elements** and thus setting
the value of this threshold to a value higher then about 10.000 (depending
on your hardware configuration) will probably have
a significant impact on the responsiveness of the whole application.
#### Spawning multiple trees
If at some point the user is interested what are neighbors of an encountered bioentity anywhere in the map,
......@@ -215,5 +229,8 @@ exploration. Changing this does not impact the existing exploration state.
Thus, for this change to take effect, one needs to restart the exploration (either by clicking
on the restart or *Explore** button).
- *Locate on expansion*: if checked, when a node is expanded, the newly shown nodes are located in the map.
- *Max. elements in full expansion*: when full expansion is selected from a node's context menu,
at most *Max. elements in full expansion* nodes will be retrieved and expansion will
be stopped after reaching this threshold
- *Backtrack depth*: If set, the backtracking procedure will go only given number of levels back.
- *Highlight by icon/surface*: sets the way of how encountered entities are highlighted in the map.
......@@ -255,4 +255,8 @@ Tooltips / on-demand menus
border-radius: 5px;
margin: 3px;
padding-left: 5px;
}
.ceFullExpansionMaxCountGroup {
padding-bottom: 5px;
}
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment