From d50c0b0d576874a3dcb77d358bd32c07f7e175a2 Mon Sep 17 00:00:00 2001
From: Zipexpo <nvtngan@hcmus.edu.vn>
Date: Sat, 29 Feb 2020 09:57:34 -0600
Subject: [PATCH] update

---
 BioRadar/index.html                   |  6 +--
 BioRadar/src/script/main.js           |  2 +-
 BioRadar/src/script/timeSpaceModel.js | 72 ++++++++++++++++++---------
 3 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/BioRadar/index.html b/BioRadar/index.html
index ec70de6f..dae0bdf9 100644
--- a/BioRadar/index.html
+++ b/BioRadar/index.html
@@ -774,10 +774,10 @@ <h6 class="progressText spinnerC center" style="top: calc(50% - 15px);" >saving
                                     <div id="modelDistanceFilter" class="col s7"></div>
                                 </div>
                                 <div  class="row" style="max-height: 200px;overflow-y: auto;">
-                                    <span id ="filterList">
+                                    <div id ="filterList">
 
-                                    </span>
-                                    <button class="copybtn btn hide" style="margin: 10px;position: absolute;right: 0;bottom: 0;">Copy</button>
+                                    </div>
+                                    <!--<button class="copybtn btn hide" style="margin: 10px;position: absolute;right: 0;bottom: 0;">Copy</button>-->
                                 </div>
                             </div>
                         </div>
diff --git a/BioRadar/src/script/main.js b/BioRadar/src/script/main.js
index a9f601fa..bb80853e 100644
--- a/BioRadar/src/script/main.js
+++ b/BioRadar/src/script/main.js
@@ -2046,7 +2046,7 @@ function recomendName (clusterarr){
 }
 
 function recomendColor (clusterarr) {
-    let colorCa = colorScaleList['customschemeCategory'].slice();
+    let colorCa = d3.schemeCategory10;//colorScaleList['customschemeCategory'].slice();
     if (clusterarr.length>10 && clusterarr.length<21)
         colorCa = d3.schemeCategory20;
     else if (clusterarr.length>20)
diff --git a/BioRadar/src/script/timeSpaceModel.js b/BioRadar/src/script/timeSpaceModel.js
index 270af8a8..f54a889c 100644
--- a/BioRadar/src/script/timeSpaceModel.js
+++ b/BioRadar/src/script/timeSpaceModel.js
@@ -44,6 +44,7 @@ d3.TimeSpace = function () {
             linkConnect: 'straight',
             isSelectionMode: false,
             isCurve: false,
+            separate:0.5,
             filter:{ distance:0.5},
             component:{
                 dot:{size:5,opacity:0.9},
@@ -263,7 +264,7 @@ d3.TimeSpace = function () {
             target.__metrics.position = [0,0,0];
             if (!path[target.name])
                 path[target.name] = [];
-            path[target.name].push({name: target.name,index:i,__timestep: target.__timestep, timestep: target.timestep, value: [0,0,0], cluster: target.cluster});
+            path[target.name].push({name: target.name,index:i,__timestep: target.__timestep, timestep: target.timestep, value: [0,0,0], cluster: target.cluster,index:i});
         });
         // console.log(datain.filter(d=>d[0]===-1))
         xscale.range([-graphicopt.widthG()/2,graphicopt.widthG()/2]);
@@ -343,16 +344,16 @@ d3.TimeSpace = function () {
 
             d3.select('#modelSortBy').on("change", function () {handleTopSort(this.value)})
             d3.select('#modelFilterBy').on("change", function(){handleFilter(this.value)});
-            d3.select("span#filterList+.copybtn").on('click',()=>{
-                var copyText = document.getElementById("filterList");
-                var textArea = document.createElement("textarea");
-                textArea.value = copyText.textContent;
-                document.body.appendChild(textArea);
-                textArea.select();
-                document.execCommand("Copy");
-                textArea.remove();
-                M.toast({html: 'Copied to clipboard'})
-            });
+            // d3.select("span#filterList+.copybtn").on('click',()=>{
+            //     var copyText = document.getElementById("filterList");
+            //     var textArea = document.createElement("textarea");
+            //     textArea.value = copyText.textContent;
+            //     document.body.appendChild(textArea);
+            //     textArea.select();
+            //     document.execCommand("Copy");
+            //     textArea.remove();
+            //     M.toast({html: 'Copied to clipboard'})
+            // });
 
         drawSummaryRadar([],handle_data_summary([]),'#ffffff');
         start();
@@ -379,9 +380,21 @@ d3.TimeSpace = function () {
     function handleFilter(key){
         d3.select('#distanceFilterHolder').classed('hide',true);
         switch (key) {
+            // case 'groups':
+            //     const lists = d3.keys(path).filter(d=>path[d][0].cluster!==path[d][1].cluster);
+            //     hightlightGroupNode(lists);
+            //     break;
             case 'groups':
-                const lists = d3.keys(path).filter(d=>path[d][0].cluster!==path[d][1].cluster);
-                hightlightGroupNode(lists);
+                var lists = d3.keys(path).filter(d=>path[d][0].cluster!==path[d][1].cluster);
+                var nest = d3.nest().key(d=>''+path[d][0].cluster+'_'+path[d][1].cluster).rollup(d=>{
+                    let max = d3.max(d,p=>path[p].distance);
+                    return d.find(p=>path[p].distance===max);
+                }).entries(lists);
+                nest.sort((a,b)=>-path[a.value].distance+path[b.value].distance);
+                console.log(nest)
+
+                // hightlightGroupNode(nest.slice(0,10).map(d=>d.value),undefined,0.2,0.9);
+                hightlightGroupNode(nest.slice(0,10).map(d=>d.value),undefined,0.2,0.9);
                 break;
             case "wt":
                 hightlightGroupNode([],0);
@@ -608,13 +621,18 @@ d3.TimeSpace = function () {
         }
     }
 
-    function hightlightGroupNode(intersects,timestep) { // INTERSECTED
+    function hightlightGroupNode(intersects,timestep,customopacityNode,customopacityLink) { // INTERSECTED
         if (intersects.length){
-            d3.select("span#filterList").text(intersects.join(', '));
-            d3.select("span#filterList+.copybtn").classed('hide',false);
+            let badge=d3.select("#filterList").selectAll('span.filtered').data(intersects);
+            badge.exit().remove();
+            badge.enter().append('span').attrs({
+                class: 'filtered'
+            }).merge(badge).text(d=>d).on('mouseover',function(d){hightlightNode([path[d][0]])});
+
+            // d3.select("span#filterList+.copybtn").classed('hide',false);
         }else{
-            d3.select("span#filterList").text('');
-            d3.select("span#filterList+.copybtn").classed('hide',true);
+            d3.select("#filterList").selectAll('*').remove();
+            // d3.select("span#filterList+.copybtn").classed('hide',true);
         }
         let ishighLink = timestep===undefined;
         freezemouseoverTrigger = true;
@@ -627,9 +645,9 @@ d3.TimeSpace = function () {
                     INTERSECTED.push(i);
                     attributes.alpha.array[i] = graphicopt.component.dot.opacity;
                     lines[d.name].visible = ishighLink;
-                    lines[d.name].material.opacity = graphicopt.component.link.opacity;
+                    lines[d.name].material.opacity = customopacityLink||graphicopt.component.link.opacity;
                 } else {
-                    attributes.alpha.array[i] = 0;
+                    attributes.alpha.array[i] = customopacityNode||0;
                     lines[d.name].visible = false;
                 }
             });
@@ -664,8 +682,14 @@ d3.TimeSpace = function () {
                     axesTime.getObjectByName("TimeText").lookAt(camera.position);
                 }
             }catch(e){}
+            raycaster.setFromCamera(mouse, camera);
+            // try {
+            //     console.log(datain[raycaster.intersectObject(points)[0].index])
+            // }catch (e) {
+            //
+            // }
             if (mouseoverTrigger&&!freezemouseoverTrigger) { // not have filter
-                raycaster.setFromCamera(mouse, camera);
+            // if (mouseoverTrigger) { // not have filter
                 if (!filter.length) {
                     var intersects = overwrite||raycaster.intersectObject(points);
                     //count and look after all objects in the diamonds group
@@ -1261,7 +1285,7 @@ d3.TimeSpace = function () {
                 target.__metrics.position = d;
                 let pointIndex = mapIndex.indexOf(i);
                 if (pointIndex!==undefined){
-                    p[pointIndex*3+0] = xscale(d[0]);
+                    p[pointIndex*3+0] = xscale(d[0])+(graphicopt.separate*target.__timestep*graphicopt.widthG());
                     p[pointIndex*3+1] = yscale(d[1]);
 
                     // 3rd dimension as time step
@@ -1462,10 +1486,10 @@ d3.TimeSpace = function () {
         }
     }
     function updateStraightLine(target, posPath, d, customZ) {
-        lines[target.name].geometry.vertices[posPath * 2] = new THREE.Vector3(xscale(d[0]), yscale(d[1]), xscale(d[2]) || 0);
+        lines[target.name].geometry.vertices[posPath * 2] = new THREE.Vector3(xscale(d[0])+(graphicopt.separate*target.__timestep*graphicopt.widthG()), yscale(d[1]), xscale(d[2]) || 0);
         // lines[target.name].geometry.vertices[posPath * 2] = new THREE.Vector3(xscale(d[0]), yscale(d[1]), d[2] || 0);
         if (posPath)
-            lines[target.name].geometry.vertices[posPath * 2 - 1] = new THREE.Vector3(xscale(d[0]), yscale(d[1]), xscale(d[2]) || 0);
+            lines[target.name].geometry.vertices[posPath * 2 - 1] = new THREE.Vector3(xscale(d[0])+(graphicopt.separate*target.__timestep*graphicopt.widthG()), yscale(d[1]), xscale(d[2]) || 0);
             // lines[target.name].geometry.vertices[posPath * 2 - 1] = new THREE.Vector3(xscale(d[0]), yscale(d[1]), d[2] || 0);
         lines[target.name].geometry.verticesNeedUpdate = true;
         lines[target.name].geometry.computeBoundingBox();

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/iDataVisualizationLab/N/compare/master...presentation.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/iDataVisualizationLab/N/compare/master...presentation.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/iDataVisualizationLab/N/compare/master...presentation.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/iDataVisualizationLab/N/compare/master...presentation.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>