Skip to content

Commit 0cff3ca

Browse files
ZipexpoZipexpo
committed
update button separte
1 parent 1f680df commit 0cff3ca

File tree

3 files changed

+90
-45
lines changed

3 files changed

+90
-45
lines changed

‎HiperView/css/main.css

+34-1
Original file line numberDiff line numberDiff line change
@@ -723,6 +723,7 @@ p.divider {
723723
border-radius: 10px;
724724
border: black solid 1px;
725725
padding-right: 5px;
726+
margin: 0;
726727
}
727728

728729
#refeshUser{
@@ -766,7 +767,7 @@ p.divider {
766767
.light .subzone {
767768

768769
}
769-
.subpanel.active {
770+
.active .subpanel {
770771
display: block;
771772
}
772773

@@ -916,4 +917,36 @@ p.divider {
916917

917918
path.outlying {
918919
stroke: #8a001a !important;
920+
}
921+
#tsnezone {
922+
position: absolute;
923+
width:100%;
924+
}
925+
.controlHolderDiv {
926+
display: flex;
927+
justify-content: center;
928+
position: absolute;
929+
/*top: 0px;*/
930+
right: 0px;
931+
width: 100%;
932+
}
933+
.controlHolderDiv .controlDiv {
934+
/*position: absolute;*/
935+
/*top: 2px;*/
936+
/*right: 2px;*/
937+
}
938+
.controlHolderDiv .controlDiv .controlGroup {
939+
float: left;
940+
display: inline-block;
941+
box-sizing: border-box;
942+
padding-left: 8px;
943+
position: relative;
944+
vertical-align: middle;
945+
white-space: nowrap;
946+
}
947+
.menuBtn.seperate[value='false']:before {
948+
content:'Separate'
949+
}
950+
.menuBtn.seperate[value='true']:before {
951+
content:'Collapse'
919952
}

‎HiperView/demo.html

+43-36
Original file line numberDiff line numberDiff line change
@@ -199,48 +199,55 @@ <h5 class ="currentDate center-align"></h5>
199199
<div id="selectionheader">Click & Drag</div>
200200
</div>
201201
</div>
202-
<div id ="subzone" class="subpanel card-panel floatLeft">
203-
<h6>Ranked by travel distant <button value = false class ="menuBtn seperate"><i class="fa fa-arrows-alt"></i></button></h6>
204-
<div class="top10DIV">
205-
<svg class="top10" >
202+
<div id = "tsnezone">
203+
<div id ="subzone" class="subpanel card-panel floatLeft">
204+
<h6>Ranked by travel distant </h6>
205+
<div class="top10DIV">
206+
<svg class="top10" >
206207

207-
</svg>
208+
</svg>
209+
</div>
210+
<div class="details" ></div>
208211
</div>
209-
<div class="details" ></div>
210-
</div>
211-
<!--<div id ="subcontrolzone" class="controlHolder" style="position: absolute">-->
212-
<!--<button onclick="pauseRequest()" value = false class ="menuBtn pause"><i class="fas fa-pause pauseicon"></i></button>-->
213-
<!--</div>-->
214-
<div id ="userList" class="subpanel card-panel floatRight">
215-
<div class = "row valign-wrapper" style="margin-bottom: 5px;">
216-
<h6 class="valign-wrapper col" style="padding-left: 0;">User list<a id ="refeshUser" class="btn btn-small waves-effect waves-light white" onclick="getJoblist()"><i class="material-icons">autorenew</i></a></h6>
217-
<div class="search-wrapper focused col empty">
218-
<input type="text" id="search_User" placeholder="Search User...">
219-
<!--<i class="material-icons">search</i>-->
212+
<div id ="subcontrolzone" class="controlHolderDiv">
213+
<div class="controlDiv">
214+
<div class="controlGroup">
215+
<button value = false class ="menuBtn seperate"></button>
216+
</div>
220217
</div>
221218
</div>
222-
<div class="top10DIV">
223-
<table class = "collection empty">
224-
<thead>
225-
<tr>
226-
<th>Username</th>
227-
<th class="alignRight">#Jobs</th>
228-
<th class="alignRight">#Hosts</th>
229-
<th class="alignRight">Job
230-
<p style="color: #ffa328;display: inline-block;margin: 0;">submitted</p> -
231-
<p style="color: #3fc151;display: inline-block;margin: 0;">started</p>
232-
<p id="userList_lastupdate" style="font-weight: normal;font-size: smaller;margin: 0;"></p>
233-
</th>
234-
</tr>
235-
</thead>
236-
<tbody>
237-
</tbody>
238-
</table>
239-
<!--<svg class="top10" >-->
240219

241-
<!--</svg>-->
220+
<div id ="userList" class="subpanel card-panel floatRight">
221+
<div class = "row valign-wrapper" style="margin-bottom: 5px;">
222+
<h6 class="valign-wrapper col" style="padding-left: 0;">User list<a id ="refeshUser" class="btn btn-small waves-effect waves-light white" onclick="getJoblist()"><i class="material-icons">autorenew</i></a></h6>
223+
<div class="search-wrapper focused col empty">
224+
<input type="text" id="search_User" placeholder="Search User...">
225+
<!--<i class="material-icons">search</i>-->
226+
</div>
227+
</div>
228+
<div class="top10DIV">
229+
<table class = "collection empty">
230+
<thead>
231+
<tr>
232+
<th>Username</th>
233+
<th class="alignRight">#Jobs</th>
234+
<th class="alignRight">#Hosts</th>
235+
<th class="alignRight">Job
236+
<p style="color: #ffa328;display: inline-block;margin: 0;">submitted</p> -
237+
<p style="color: #3fc151;display: inline-block;margin: 0;">started</p>
238+
<p id="userList_lastupdate" style="font-weight: normal;font-size: smaller;margin: 0;"></p>
239+
</th>
240+
</tr>
241+
</thead>
242+
<tbody>
243+
</tbody>
244+
</table>
245+
<!--<svg class="top10" >-->
246+
247+
<!--</svg>-->
248+
</div>
249+
<div class="details" ></div>
242250
</div>
243-
<div class="details" ></div>
244251
</div>
245252
<svg width="2600" height="1000" class="mainsvg" ></svg>
246253
</div>

‎HiperView/myscripts/tsnePlot.js

+13-8
Original file line numberDiff line numberDiff line change
@@ -354,13 +354,14 @@ d3.Tsneplot = function () {
354354
.attr("stroke-width", 1)
355355
.style("box-shadow", "10px 10px 10px #666");
356356

357-
panel = d3.select("#subzone").style('top',(graphicopt.offset.top-4)+'px');
357+
d3.select("#tsnezone").style('top',(graphicopt.offset.top+4)+'px');
358+
panel = d3.select("#subzone");
358359
panel.select(".details").append("span").text('t-SNE cost: ');
359360
panel.select(".details").append("span").attr('class','cost');
360361
panel.select(".details").append("span").text('# community: ');
361362
panel.select(".details").append("span").attr('class','community');
362363

363-
const maxsubheight = graphicopt.heightView()-64;
364+
const maxsubheight = graphicopt.heightView()-56;
364365
const sizegraph = sizebox - 5;
365366
scaleX_small.range([0,sizegraph]);
366367
// scaleY_small.range([0,sizegraph]);
@@ -381,7 +382,8 @@ d3.Tsneplot = function () {
381382
// panel.select(".top10").attrs({width: 200,
382383
// height: sizebox*20});
383384

384-
panel_user = d3.select("#userList").style('top',(graphicopt.offset.top-4)+'px');
385+
// panel_user = d3.select("#userList").style('top',(graphicopt.offset.top-4)+'px');
386+
panel_user = d3.select("#userList");
385387
panel_user.select(".top10DIV").style('max-height', maxsubheight+"px");
386388
list_user = Sortable.create($('tbody')[0], {
387389
animation: 500,
@@ -419,8 +421,9 @@ d3.Tsneplot = function () {
419421
tsne.postMessage({action: 'step'});
420422
}
421423
};
422-
panel.select('.seperate').on('click', function(d){
424+
d3.select('#tsnezone').select('.seperate').on('click', function(d){
423425
forcetsnemode = !forcetsnemode;
426+
d3.select(this).attr('value',forcetsnemode?'false':'true');
424427
});
425428
forcetsne = d3.forceSimulation()
426429
.alphaDecay(0.005)
@@ -545,8 +548,9 @@ d3.Tsneplot = function () {
545548
};
546549

547550
Tsneplot.redraw = function (){
548-
panel.classed("active",true).select('.top10').selectAll('*').remove();
549-
panel_user.classed("active",true).select('.top10DIV tbody').selectAll('*').remove();
551+
d3.select('#tsnezone').classed("active",true);
552+
panel.select('.top10').selectAll('*').remove();
553+
panel_user.select('.top10DIV tbody').selectAll('*').remove();
550554
panel_user.select('table').classed('empty',true);
551555
panel_user.select('.search-wrapper').classed('empty',true);
552556
svg.style('visibility','visible');
@@ -566,8 +570,9 @@ d3.Tsneplot = function () {
566570

567571
Tsneplot.remove = function (){
568572
if (!first){
569-
panel.classed("active",false);
570-
panel_user.classed("active",false);
573+
d3.select('#tsnezone').classed("active",false);
574+
// panel.classed("active",false);
575+
// panel_user.classed("active",false);
571576
svg.style('visibility','hidden');
572577
Tsneplot.pause();
573578
g.selectAll('*').remove();

0 commit comments

Comments
 (0)