Skip to content

Use checkboxes for preferences and store in sessionStorage #2

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
calebknoll wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Use checkboxes for preferences and store in sessionStorage #2

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
5e02b1e
Use checkboxes for options instead of buttons
Jul 12, 2021
04da119
Add sessionStorage to ui preferences so the preferences remain on rel…
Aug 8, 2021
019a0af
Remove resetting of tags and lines now that the setting is preserved …
Aug 8, 2021
44b791c
Remove obsolete comments, now that we have scrollbars
Aug 8, 2021
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
11 changes: 10 additions & 1 deletion public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ html, body {
overflow-y: auto;
}
#viz {
width: 400px;
width: 425px;
border-right: 1px solid #696969;
}
#node {
Expand Down Expand Up @@ -53,3 +53,12 @@ html, body {
.tag {
font: 12pt Arial;
}

.btn-group button {
float: left;
}

.btn-group button.selected {
background-color: rgb(55, 126, 184);
color: white;
}
18 changes: 8 additions & 10 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,14 @@
</head>
<body>
<div style="position: absolute; left: 10px; top: 10px">
<!-- TODO: move to check boxes -->
<button id="color">show type</button>
<button id="uncolor">hide type</button>
<button id="alphabetical">alphabetical</button>
<button id="parentChild">parent/child</button>
<button id="unAxis">no axis</button>
<button id="lines">lines</button>
<button id="unlines">no lines</button>
<button id="tags">tags</button>
<button id="untags">no tags</button>
<span class="btn-group">
<button id="alphabetical">alphabetical</button>
<button id="parentChild">parent/child</button>
<button id="unAxis">no axis</button>
</span>
<input type="checkbox" id="color"><label for="color">types</label>
<input type="checkbox" id="lines"><label for="lines">lines</label>
<input type="checkbox" id="tags"><label for="tags">tags</label>
</div>
<div class="flexing">
<div class="viz_dev">
Expand Down
254 changes: 160 additions & 94 deletions public/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,8 +231,13 @@
.nodes(commits)
.on('tick', updateDOM);

}

changeColorSetting();
changeLinesSetting();
changeTagsSetting();
arrangeNodes();

}

function handleMouseOver(d) {

Expand Down Expand Up @@ -373,7 +378,29 @@

}

function arrangeNodes() {
switch(sessionStorage.getItem('arrange')){
case 'alphabetical':
arrageNodesAlphabetical();
break;
case 'parentChild':
arrangeNodesParentChild();
break;
default: // 'unAxis'
arrageNodesUnAxis();
break;
}
}

document.getElementById('unAxis').addEventListener('click', function () {
sessionStorage.setItem('arrange', 'unAxis');
arrangeNodes();
});

function arrageNodesUnAxis() {
Array.from(document.getElementsByTagName("button")).forEach(b => b.classList.remove('selected'))
document.getElementById('unAxis').classList.add('selected');

x = null;
y = null;
yProp = null;
Expand All @@ -389,17 +416,21 @@
.restart();

svg.attr('height', window.innerHeight);
}

document.getElementById('alphabetical').addEventListener('click', function() {
sessionStorage.setItem('arrange', 'alphabetical');
arrangeNodes();
});

document.getElementById('alphabetical').addEventListener('click', function() {
function arrageNodesAlphabetical(){
Array.from(document.getElementsByTagName("button")).forEach(b => b.classList.remove('selected'))
document.getElementById('alphabetical').classList.add('selected');

yProp = 'yHash';
y = d3.scaleLinear()
.domain([yHeights.min, yHeights.max])
.range([margin.top+(commits.length*commitDistance), margin.top+50]);
// TODO: what if we have more than a page's worth?
//.range([height - margin.bottom, margin.top+50]);

x = d3.scaleLinear()
.domain([xWidths.min, xWidths.max])
Expand All @@ -415,19 +446,21 @@
.restart();

svg.attr('height', (commits.length*commitDistance)+100);
}

showLines = false;
showTags = false; // TODO: animate or re-show tags after simulation finishes
document.getElementById('parentChild').addEventListener('click', function() {
sessionStorage.setItem('arrange', 'parentChild');
arrangeNodes();
});

document.getElementById('parentChild').addEventListener('click', function() {
function arrangeNodesParentChild(){
Array.from(document.getElementsByTagName("button")).forEach(b => b.classList.remove('selected'))
document.getElementById('parentChild').classList.add('selected');

yProp = 'yTime';
y = d3.scaleLinear()
.domain([yHeights.min, yHeights.max])
.range([margin.top+(commits.length*commitDistance), margin.top+50]);
// TODO: what if we have more than a page's worth?
//.range([height - margin.bottom, margin.top+50]);

x = d3.scaleLinear()
.domain([xWidths.min, xWidths.max])
Expand All @@ -442,106 +475,139 @@
.restart();

svg.attr('height', (commits.length*commitDistance)+100);
}

showTags = false; // TODO: animate or re-show tags after simulation finishes
document.getElementById('color').addEventListener('change', function() {
// store empty string instead of the string false, which will eval to true when recalled
sessionStorage.setItem('color', this.checked ? this.checked : '');
changeColorSetting();
});

document.getElementById('color').addEventListener('click', function() {

const colorScale = d3.scaleOrdinal()
Copy link
Author

@calebknoll calebknoll Aug 8, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bodies of these functions were refactored into a helper function, which makes it look like more change than it really is.

.domain(nodeTypes)
.range(d3.schemeSet1);

currentFill = d => colorScale(d.type);
currentLineFill = d => colorScale(d.target.type);

svg.selectAll('.commit').data(commits)
.transition()
.duration(750)
.style('fill', currentFill);

if (showLines) {
svg.selectAll('.arrowUp').data(arrowsUp)
.transition()
.duration(750)
.style('stroke', currentLineFill);
svg.selectAll('.arrowOver').data(arrowsOver)
.transition()
.duration(750)
.style('stroke', currentLineFill);
function changeColorSetting() {
var setting = sessionStorage.getItem('color');

// check the box in case we are loading from storage
// this will not trigger the change event
document.getElementById('color').checked = setting;

if(setting) {
const colorScale = d3.scaleOrdinal()
.domain(nodeTypes)
.range(d3.schemeSet1);

currentFill = d => colorScale(d.type);
currentLineFill = d => colorScale(d.target.type);

svg.selectAll('.commit').data(commits)
.transition()
.duration(750)
.style('fill', currentFill);

if (showLines) {
svg.selectAll('.arrowUp').data(arrowsUp)
.transition()
.duration(750)
.style('stroke', currentLineFill);
svg.selectAll('.arrowOver').data(arrowsOver)
.transition()
.duration(750)
.style('stroke', currentLineFill);
}

// build legend: https://www.d3-graph-gallery.com/graph/custom_legend.html
// Add one dot in the legend for each name.
var size = 15;
svg.selectAll('legend-dot')
.data(nodeTypes)
.enter()
.append('rect') // TODO: circle
.attr('class', 'legend-dot')
.attr('x', 10)
.attr('y', function(d, i){ return 40 + i*(size+5)})
.attr('width', size)
.attr('height', size)
.style('fill', d => colorScale(d));

// Add one dot in the legend for each name.
svg.selectAll('legend-label')
.data(nodeTypes)
.enter()
.append('text')
.attr('class', 'legend-label')
.attr('x', 10 + size*1.2)
.attr('y', function(d, i){ return 40 + i*(size+5) + (size/2)})
.style('fill', d => colorScale(d))
.text(d => d)
.attr('text-anchor', 'left')
.style('alignment-baseline', 'middle');
} else {

currentFill = 'steelblue';
currentLineFill = 'steelblue'
svg.selectAll('.commit').data(commits)
.transition()
.duration(750)
.style('fill', currentFill);

if (showLines) {
svg.selectAll('.arrowUp').data(arrowsUp)
.transition()
.duration(750)
.style('stroke', currentLineFill);
svg.selectAll('.arrowOver').data(arrowsOver)
.transition()
.duration(750)
.style('stroke', currentLineFill);
}

svg.selectAll('.legend-label').remove();
svg.selectAll('.legend-dot').remove();

}
}

// build legend: https://www.d3-graph-gallery.com/graph/custom_legend.html
// Add one dot in the legend for each name.
var size = 15;
svg.selectAll('legend-dot')
.data(nodeTypes)
.enter()
.append('rect') // TODO: circle
.attr('class', 'legend-dot')
.attr('x', 10)
.attr('y', function(d, i){ return 40 + i*(size+5)})
.attr('width', size)
.attr('height', size)
.style('fill', d => colorScale(d));

// Add one dot in the legend for each name.
svg.selectAll('legend-label')
.data(nodeTypes)
.enter()
.append('text')
.attr('class', 'legend-label')
.attr('x', 10 + size*1.2)
.attr('y', function(d, i){ return 40 + i*(size+5) + (size/2)})
.style('fill', d => colorScale(d))
.text(d => d)
.attr('text-anchor', 'left')
.style('alignment-baseline', 'middle');
document.getElementById('lines').addEventListener('change', function () {
// store empty string instead of the string false, which will eval to true when recalled
sessionStorage.setItem('lines', this.checked ? this.checked : '');
changeLinesSetting()
});

document.getElementById('uncolor').addEventListener('click', function () {

currentFill = 'steelblue';
currentLineFill = 'steelblue'
svg.selectAll('.commit').data(commits)
.transition()
.duration(750)
.style('fill', currentFill);

if (showLines) {
svg.selectAll('.arrowUp').data(arrowsUp)
.transition()
.duration(750)
.style('stroke', currentLineFill);
svg.selectAll('.arrowOver').data(arrowsOver)
.transition()
.duration(750)
.style('stroke', currentLineFill);
}
function changeLinesSetting() {

svg.selectAll('.legend-label').remove();
svg.selectAll('.legend-dot').remove();
var setting = sessionStorage.getItem('lines');

});
// check the box in case we are loading from storage
// this will not trigger the change event
document.getElementById('lines').checked = setting;

document.getElementById('lines').addEventListener('click', function () {
showLines = true;
// TODO: fade
});
if(setting) {
showLines = true;
} else {
showLines = false;
}
}

document.getElementById('unlines').addEventListener('click', function () {
showLines = false;
// TODO: fade
document.getElementById('tags').addEventListener('change', function () {
// store empty string instead of the string false, which will eval to true when recalled
sessionStorage.setItem('tags', this.checked ? this.checked : '');
changeTagsSetting();
});

document.getElementById('tags').addEventListener('click', function () {
showTags = true;
// TODO: fade
});
function changeTagsSetting() {
var setting = sessionStorage.getItem('tags');

// check the box in case we are loading from storage
// this will not trigger the change event
document.getElementById('tags').checked = setting;

document.getElementById('untags').addEventListener('click', function () {
showTags = false;
// TODO: fade
});
if(setting) {
showTags = true;
} else {
showTags = false;
}
}


}());