From 8de77674275993b8ca7d5df09a35a283dc4c9fb4 Mon Sep 17 00:00:00 2001 From: miketynes Date: Mon, 19 Sep 2022 15:59:13 -0500 Subject: [PATCH 1/4] wip integration --- cinema/explorer/2.2/css/viewer.css | 15 ++++ cinema/explorer/2.2/js/main.js | 113 +++++++++++++++++++++++++---- cinema_explorer.html | 8 +- 3 files changed, 121 insertions(+), 15 deletions(-) diff --git a/cinema/explorer/2.2/css/viewer.css b/cinema/explorer/2.2/css/viewer.css index e78b3e5..f9789e0 100644 --- a/cinema/explorer/2.2/css/viewer.css +++ b/cinema/explorer/2.2/css/viewer.css @@ -116,6 +116,21 @@ body { transform: translateY(-50%) translateX(-50%); } +#unlockButton { + position: absolute; + border: 2px solid dimgrey; + border-width: 1px; + border-radius: 5px; + bottom: 50px; + right: 50px; + width: 60px; + padding: 2px 5px 5px 2px; + background-color: #e2e2e2; +} +#unlockButton:hover { + background-color: lightgray;; +} + #pcoordContainer { width: 100%; height: 100%; diff --git a/cinema/explorer/2.2/js/main.js b/cinema/explorer/2.2/js/main.js index 8cf9173..5c8deba 100644 --- a/cinema/explorer/2.2/js/main.js +++ b/cinema/explorer/2.2/js/main.js @@ -41,6 +41,10 @@ var hasAxisOrdering = false; //this can be overriden with HTTP params var databaseList = 'cinema/explorer/2.2/databases.json'; var databaseListType = 'json'; + //Track last highlighted datapoint (-1 -> none) +var lastIx = -1; + //locks selection in PCoords +var lock = false; var loaded = false; @@ -184,12 +188,16 @@ function load_databases() { function load() { loaded = false; savedDimensions = {}; + //Reset last hilighted datapoint + lastIx = -1; //Remove old components if (window.pcoord) {pcoord.destroy();} if (window.view) {view.destroy();} if (window.query) {query.destroy();} + + //Remove axisOrdering panel if it exists if (hasAxisOrdering) { d3.select('#axisOrderPanel').remove(); @@ -283,10 +291,13 @@ function doneLoading() { view.setSelection(selection); }); - //Set mouseover handler for pcoord and views component + //Set mouseover and click handlers for pcoord and views component pcoord.dispatch.on("mouseover",handleMouseover); - if (currentView != viewType.LINECHART) - view.dispatch.on('mouseover',handleMouseover); + pcoord.dispatch.on("click",handleClick); + if (currentView != viewType.LINECHART) { + pcoord.dispatch.on("click", handleClick); + view.dispatch.on('mouseover', handleMouseover); + } //If the view is a Scatter Plot, set listeners to save dimensions when they are changed if (currentView == viewType.SCATTERPLOT) { @@ -448,6 +459,8 @@ function changeView(type) { node.value = savedDimensions.y; d3.select(node).on('input').call(node);//trigger input event on select } + // highlight data element from scatterplot + view.setHighlightedPoints(pcoord.highlighted); } else if (currentView == viewType.LINECHART) { d3.select('#scatterPlotTab').attr('selected','default'); @@ -474,9 +487,11 @@ function changeView(type) { } } - //Set mouseover handler for new view and update size - if (currentView != viewType.LINECHART) - view.dispatch.on('mouseover',handleMouseover); + //Set mouseover and click handlers for new view and update size + if (currentView != viewType.LINECHART) { + view.dispatch.on('mouseover', handleMouseover); + view.dispatch.on('click', handleClick); + } updateViewContainerSize(); view.updateSize(); @@ -484,6 +499,18 @@ function changeView(type) { //Set view's initial selection to the current pcoord selection if (currentView != viewType.LINECHART) view.setSelection(pcoord.selection.slice()); + + // display moused-over path's data in imagespread + if (currentView == viewType.IMAGESPREAD) { + index = pcoord.highlighted[0]; + view.goToPageWithIx(index); + var e = document.querySelector('.dataDisplay[index="' + String(index) +'"]') + if (e != null) { + e.scrollIntoView() + e.style.transition = 'none'; + e.style.backgroundColor = 'rgb(245,243,98)'; + } + } } } @@ -567,17 +594,77 @@ function updateViewContainerSize() { //and update info pane //Also sets highlight in view if its a Scatter Plot function handleMouseover(index, event) { - if (index != null) { + if (index != null && !lock) { pcoord.setHighlightedPaths([index]); - if (currentView == viewType.SCATTERPLOT) + if (currentView == viewType.SCATTERPLOT) { view.setHighlightedPoints([index]); + lastIx = index; + } + } else if (currentView == viewType.IMAGESPREAD && + (event.srcElement instanceof SVGElement // true if from PCoord.SVG + | event.currentTarget.getAttribute('class') == 'pathContainer' // true if from PCoord.Canvas + )){ + if (lastIx >= 0) { + var e = document.querySelector('.dataDisplay[index="' + String(lastIx) +'"]') + if (e != null) { + e.style.transition = 'background-color 1s ease'; + e.style.backgroundColor = 'lightgray'; + lastIx = -1; + } + } + view.goToPageWithIx(index); + var e = document.querySelector('.dataDisplay[index="' + String(index) +'"]') + e.scrollIntoView() + e.style.transition = 'none'; + e.style.backgroundColor = 'rgb(245,243,98)'; + lastIx = index; + } else if (!lock) { + pcoord.setHighlightedPaths([]); + if (currentView == viewType.SCATTERPLOT) + view.setHighlightedPoints([]); + else if (currentView == viewType.IMAGESPREAD && lastIx >= 0) { + var e = document.querySelector('.dataDisplay[index="' + String(lastIx) +'"]') + if (e != null) { + e.style.transition = 'background-color 1s ease'; + e.style.backgroundColor = 'lightgray'; + lastIx = -1; + } + } } - else { - pcoord.setHighlightedPaths([]); - if (currentView == viewType.SCATTERPLOT) - view.setHighlightedPoints([]); +} + +// locks mouseover behavior over a selected path +function handleClick(index, event) { + if (index != null) { + if (currentView == viewType.IMAGESPREAD && lock == false && + !(event.fromElement instanceof SVGElement // true if from PCoord.SVG + | event.currentTarget.getAttribute('class') == 'pathContainer' // true if from PCoord.Canvas + )) { + var e = document.querySelector('.dataDisplay[index="' + String(index) +'"]') + if (event.currentTarget.getAttribute('class') !== 'detailDisplay') + e.scrollIntoView() + e.style.transition = 'none'; + e.style.backgroundColor = 'rgb(245,243,98)'; + lastIx = index; + } + lock = true; + } +} + +// unlocks mouseover behavior and resets highlight +function unlock() { + lock = false; + pcoord.setHighlightedPaths([]); + if (currentView == viewType.SCATTERPLOT) + view.setHighlightedPoints([]); + else if (currentView == viewType.IMAGESPREAD && lastIx >= 0) { + var e = document.querySelector('.dataDisplay[index="' + String(lastIx) +'"]') + if (e != null) { + e.style.transition = 'background-color 1s ease'; + e.style.backgroundColor = 'lightgray'; + lastIx = -1; + } } - updateInfoPane(index,event); } //Finalize dragging, add selection diff --git a/cinema_explorer.html b/cinema_explorer.html index 3597c2e..7d50524 100644 --- a/cinema_explorer.html +++ b/cinema_explorer.html @@ -72,10 +72,12 @@ - - + + + + @@ -108,6 +110,8 @@

Cinema:Explorer

+ +
Smooth Lines From 194ac4402f3f97f0ec4d487cef37e769c7082c18 Mon Sep 17 00:00:00 2001 From: miketynes Date: Mon, 19 Sep 2022 17:05:07 -0500 Subject: [PATCH 2/4] finish integration --- cinema/explorer/2.2/js/main.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/cinema/explorer/2.2/js/main.js b/cinema/explorer/2.2/js/main.js index 5c8deba..27b3361 100644 --- a/cinema/explorer/2.2/js/main.js +++ b/cinema/explorer/2.2/js/main.js @@ -600,7 +600,7 @@ function handleMouseover(index, event) { view.setHighlightedPoints([index]); lastIx = index; } - } else if (currentView == viewType.IMAGESPREAD && + else if (currentView == viewType.IMAGESPREAD && (event.srcElement instanceof SVGElement // true if from PCoord.SVG | event.currentTarget.getAttribute('class') == 'pathContainer' // true if from PCoord.Canvas )){ @@ -618,16 +618,17 @@ function handleMouseover(index, event) { e.style.transition = 'none'; e.style.backgroundColor = 'rgb(245,243,98)'; lastIx = index; - } else if (!lock) { - pcoord.setHighlightedPaths([]); - if (currentView == viewType.SCATTERPLOT) - view.setHighlightedPoints([]); - else if (currentView == viewType.IMAGESPREAD && lastIx >= 0) { - var e = document.querySelector('.dataDisplay[index="' + String(lastIx) +'"]') - if (e != null) { - e.style.transition = 'background-color 1s ease'; - e.style.backgroundColor = 'lightgray'; - lastIx = -1; + } + } else if (!lock) { + pcoord.setHighlightedPaths([]); + if (currentView == viewType.SCATTERPLOT) + view.setHighlightedPoints([]); + else if (currentView == viewType.IMAGESPREAD && lastIx >= 0) { + var e = document.querySelector('.dataDisplay[index="' + String(lastIx) +'"]') + if (e != null) { + e.style.transition = 'background-color 1s ease'; + e.style.backgroundColor = 'lightgray'; + lastIx = -1; } } } From b0745e38b8d3c46ccb6de4802bffd718977fac8e Mon Sep 17 00:00:00 2001 From: miketynes Date: Mon, 26 Sep 2022 13:38:30 -0500 Subject: [PATCH 3/4] add authorship --- cinema_explorer.html | 1 + 1 file changed, 1 insertion(+) diff --git a/cinema_explorer.html b/cinema_explorer.html index 7d50524..eaceb0b 100644 --- a/cinema_explorer.html +++ b/cinema_explorer.html @@ -53,6 +53,7 @@ + From 30dec5cace7ec3bc3db10fcfe16cdf2a2f991ef1 Mon Sep 17 00:00:00 2001 From: miketynes Date: Mon, 26 Sep 2022 13:52:57 -0500 Subject: [PATCH 4/4] rm whitespace --- cinema/explorer/2.2/js/main.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/cinema/explorer/2.2/js/main.js b/cinema/explorer/2.2/js/main.js index 27b3361..4120d4b 100644 --- a/cinema/explorer/2.2/js/main.js +++ b/cinema/explorer/2.2/js/main.js @@ -196,8 +196,6 @@ function load() { if (window.view) {view.destroy();} if (window.query) {query.destroy();} - - //Remove axisOrdering panel if it exists if (hasAxisOrdering) { d3.select('#axisOrderPanel').remove();