Skip to content

Sync Cinema Explorer with Cinema Components Version 2.8.0 #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
miketynes wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Sync Cinema Explorer with Cinema Components Version 2.8.0 #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8de7767
wip integration
miketynes Sep 19, 2022
194ac44
finish integration
miketynes Sep 19, 2022
b0745e3
add authorship
miketynes Sep 26, 2022
30dec5c
rm whitespace
miketynes Sep 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions cinema/explorer/2.2/css/viewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
108 changes: 97 additions & 11 deletions cinema/explorer/2.2/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -184,6 +188,8 @@ function load_databases() {
function load() {
loaded = false;
savedDimensions = {};
//Reset last hilighted datapoint
lastIx = -1;

//Remove old components
if (window.pcoord) {pcoord.destroy();}
Expand Down Expand Up @@ -283,10 +289,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) {
Expand Down Expand Up @@ -448,6 +457,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');
Expand All @@ -474,16 +485,30 @@ 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();

//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)';
}
}
}
}

Expand Down Expand Up @@ -567,17 +592,78 @@ 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]);
}
else {
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;
}
}
}
}

// 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
Expand Down
9 changes: 7 additions & 2 deletions cinema_explorer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
<meta name='author' content="James Ahrens">
<meta name='author' content="David Rogers">
<meta name='author' content="Robin Maack">
<meta name='author' content="Michael Tynes">

<!-- Begin: Cinema Local File Install -->
<!-- d3 -->
Expand All @@ -72,10 +73,12 @@
<!-- d3 -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- components -->
<link rel='stylesheet' href='https://cinemascience.github.io/release/CinemaComponents.v2.7.1.min.css'>
<script src='https://cinemascience.github.io/release/CinemaComponents.v2.7.1.min.js'></script>
<link rel='stylesheet' href='https://cinemascience.github.io/release/CinemaComponents.v2.8.0.min.css'>
<script src='https://cinemascience.github.io/release/CinemaComponents.v2.8.0.min.js'></script>
<!-- vtk -->
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<!-- 3dmoljs -->
<script src="https://3Dmol.org/build/3Dmol-min.js" async></script>
<!-- End: Cinema External Access Install -->

<!-- Import Viewer's CSS -->
Expand Down Expand Up @@ -108,6 +111,8 @@ <h3>Cinema:Explorer</h3>
<div id="pcoordContainer"></div>
<!--readout for the number of results currently selected-->
<div id="selectionStats"></div>
<!--button to unlock mouseover behavior-->
<button id="unlockButton" onclick="unlock()">Unlock</button>
<!--Checkbox for toggling smooth lines on the chart-->
<div id="smoothLinesWrapper">
<input id="smoothLines" type="checkbox" checked="checked" oninput="updateSmoothLines()">Smooth Lines</input>
Expand Down