From 05711a3b98f947c432fb9e28e2783d3aeb4ad1d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Alexis=20Guerra=20G=C3=B3mez?= Date: Mon, 24 Jul 2023 16:58:49 -0700 Subject: [PATCH] Adding an option for hiding the selected and sequence id attributes --- example/index.html | 2 + example_vispubdata/index.html | 2 +- src/navio.js | 101 ++++++++++++++++++---------------- 3 files changed, 56 insertions(+), 49 deletions(-) diff --git a/example/index.html b/example/index.html index 9ea11e9..863d3c7 100644 --- a/example/index.html +++ b/example/index.html @@ -62,6 +62,8 @@ d.target = dNodes[d.target]; }); + + nv.data(graph.nodes); nv.updateCallback(function (nodes) { update({ diff --git a/example_vispubdata/index.html b/example_vispubdata/index.html index a5f5627..d535615 100644 --- a/example_vispubdata/index.html +++ b/example_vispubdata/index.html @@ -63,7 +63,7 @@

Papers Selected

- + diff --git a/src/navio.js b/src/navio.js index dccc726..2947aeb 100644 --- a/src/navio.js +++ b/src/navio.js @@ -40,7 +40,6 @@ function navio(selection, _h) { links = [], visibleLinks = [], dData = new Map(), // A hash for the data - // dAttribs = new Map(), attribsOrdered = [], dAttribs = new Map(), dSortBy = [], //contains which attribute to sort by on each column @@ -115,6 +114,9 @@ function navio(selection, _h) { nv.defaultColorRangeSelected = ["white", "#b5cf6b"]; nv.defaultColorCategorical = d3.schemeCategory10; + nv.showSelectedAttrib = true; // Display the attribute that shows if a row is selected + nv.showSequenceIDAttrib = true; // Display the attribute with the sequence ID + function nozoom(event) { if (DEBUG) console.log("nozoom"); event.preventDefault(); @@ -373,7 +375,7 @@ function navio(selection, _h) { .style("display", "none") .append("path") .call(function (sel) { - var crossSize = 7, + let crossSize = 7, path = d3.path(); // Draw a cross and a circle path.moveTo(0, 0); path.lineTo(crossSize, crossSize); @@ -448,9 +450,9 @@ function navio(selection, _h) { function invertOrdinalScale(scale, x) { // Taken from https://bl.ocks.org/shimizu/808e0f5cadb6a63f28bb00082dc8fe3f // custom invert function - var domain = scale.domain(); - var range = scale.range(); - var qScale = d3.scaleQuantize().domain(range).range(domain); + let domain = scale.domain(); + let range = scale.range(); + let qScale = d3.scaleQuantize().domain(range).range(domain); return qScale(x); } @@ -468,7 +470,7 @@ function navio(selection, _h) { _dataIs = _dataIs !== undefined ? _dataIs : dataIs; - var before = performance.now(); + let before = performance.now(); const sort = dSortBy[levelToUpdate]; _dataIs[levelToUpdate].sort(function (a, b) { @@ -484,7 +486,7 @@ function navio(selection, _h) { }); assignIndexes(_dataIs[levelToUpdate], levelToUpdate); - var after = performance.now(); + let after = performance.now(); if (DEBUG) console.log( "Sorting level " + levelToUpdate + " " + (after - before) + "ms" @@ -537,7 +539,7 @@ function navio(selection, _h) { } function drawItem(item, level) { - var attrib, i, y; + let attrib, i, y; context.save(); for (i = 0; i < attribsOrdered.length; i++) { @@ -564,7 +566,7 @@ function navio(selection, _h) { // TODO get this out //If the range bands are tick enough draw divisions if (yScales[level].bandwidth() > nv.divisionsThreshold * 2) { - var yLine = Math.round(yScales[level](item[id])); + let yLine = Math.round(yScales[level](item[id])); // y = yScales[level](item[id])+yScales[level].bandwidth()/2; context.beginPath(); context.moveTo(x(attribName, level), yLine); @@ -601,7 +603,7 @@ function navio(selection, _h) { } function removeAllBrushesBut(but) { - for (var lev = 0; lev < dataIs.length; lev += 1) { + for (let lev = 0; lev < dataIs.length; lev += 1) { if (lev === but) continue; removeBrushOnLevel(lev); } @@ -610,7 +612,7 @@ function navio(selection, _h) { // Assigns the indexes on the new level data function assignIndexes(dataIsToUpdate, level) { if (DEBUG) console.log("Assiging indexes ", level); - for (var j = 0; j < dataIsToUpdate.length; j++) { + for (let j = 0; j < dataIsToUpdate.length; j++) { data[dataIsToUpdate[j]].__i[level] = j; } } @@ -648,7 +650,7 @@ function navio(selection, _h) { (f) => f.type !== "negativeValue" || f.type !== "negativeRange" ); - var filteredData = _dataIs[level].filter((d) => { + let filteredData = _dataIs[level].filter((d) => { // OR of positives, AND of negatives return (data[d].selected = posFilters.reduce((p, f) => p || f.filter(data[d]), false) && @@ -672,7 +674,7 @@ function navio(selection, _h) { // return true; }); - // var filteredData = filtersByLevel[level].reduce(reduceFilters, dataIs[level]); + // let filteredData = filtersByLevel[level].reduce(reduceFilters, dataIs[level]); after = performance.now(); if (DEBUG) console.log("Applying filters " + (after - before) + "ms"); @@ -761,7 +763,7 @@ function navio(selection, _h) { .on("brush", brushed) .on("end", onSelectByRange); - var _brush = d3 + let _brush = d3 .select(this) .selectAll(".brush") .data([ @@ -835,10 +837,10 @@ function navio(selection, _h) { showLoading(this); removeAllBrushesBut(level); - var before = performance.now(); - var brushed = event.selection; + let before = performance.now(); + let brushed = event.selection; - var // first = dData.get(invertOrdinalScale(yScales[level], brushed[0] -yScales[level].bandwidth())), + let // first = dData.get(invertOrdinalScale(yScales[level], brushed[0] -yScales[level].bandwidth())), first = dData.get(invertOrdinalScale(yScales[level], brushed[0])), // last = dData.get(invertOrdinalScale(yScales[level], brushed[1] -yScales[level].bandwidth())) last = dData.get(invertOrdinalScale(yScales[level], brushed[1])); @@ -866,7 +868,7 @@ function navio(selection, _h) { if (event.sourceEvent.shiftKey) { // First filter, create the list - if (!filtersByLevel.hasOwnProperty(level)) { + if (!(level in filtersByLevel)) { filtersByLevel[level] = []; } // Append the filter @@ -881,7 +883,7 @@ function navio(selection, _h) { applyFiltersAndUpdate(level); - var after = performance.now(); + let after = performance.now(); if (DEBUG) console.log( "selectByRange filtering " + (after - before) + "ms", @@ -895,7 +897,7 @@ function navio(selection, _h) { function onSelectByValue(event) { if (DEBUG) console.log("click", event, d3.pointer(event)); showLoading(this); - var clientY = d3.pointer(event)[1], + let clientY = d3.pointer(event)[1], clientX = d3.pointer(event)[0]; onSelectByValueFromCoords(event, clientX, clientY); @@ -1229,13 +1231,13 @@ function navio(selection, _h) { .on("end", attribDragended) ) .on("mousemove", function () { - var sel = d3.select(this); + let sel = d3.select(this); sel = sel.transition !== undefined ? sel.transition().duration(150) : sel; sel.style("font-size", nv.attribFontSizeSelected + "px"); }) .on("mouseout", function () { - var sel = d3.select(this); + let sel = d3.select(this); sel = sel.transition !== undefined ? sel.transition().duration(150) : sel; sel.style( @@ -1248,9 +1250,9 @@ function navio(selection, _h) { } function drawAttributesHolders(levelOverlay, levelOverlayEnter) { - var attribs = attribsOrdered; + let attribs = attribsOrdered; - var attribOverlay = levelOverlayEnter + let attribOverlay = levelOverlayEnter .merge(levelOverlay) .selectAll(".attribOverlay") .data(function (_, i) { @@ -1263,7 +1265,7 @@ function navio(selection, _h) { }); }); - var attribOverlayEnter = attribOverlay + let attribOverlayEnter = attribOverlay .enter() .append("g") .attr("class", "attribOverlay") @@ -1298,12 +1300,12 @@ function navio(selection, _h) { } function drawBrushes(recomputeBrushes) { - var levelOverlay = svg + let levelOverlay = svg .select(".attribs") .selectAll(".levelOverlay") .data(dataIs); - var levelOverlayEnter = levelOverlay.enter().append("g"); + let levelOverlayEnter = levelOverlay.enter().append("g"); levelOverlayEnter.attr("class", "levelOverlay").attr("id", function (d, i) { return "level" + i; @@ -1363,7 +1365,7 @@ function navio(selection, _h) { ); attrDraggedInto = dAttribs.get(attrDraggedInto); - var pos; + let pos; d3.select(this.parentNode).attr("transform", function (d) { return ( "translate(" + @@ -1382,7 +1384,7 @@ function navio(selection, _h) { } function drawCloseButton() { - var maxLevel = dataIs.length - 1; + let maxLevel = dataIs.length - 1; svg .select("#closeButton") .style("display", dataIs.length === 1 ? "none" : "block") @@ -1401,7 +1403,7 @@ function navio(selection, _h) { // Links between nodes function drawLink(link) { - var lastAttrib = xScale.domain()[xScale.domain().length - 1], + let lastAttrib = xScale.domain()[xScale.domain().length - 1], rightBorder = x(lastAttrib, dataIs.length - 1) + xScale.bandwidth() + 2, ys = yScales[dataIs.length - 1](link.source[id]) + @@ -1468,23 +1470,23 @@ function navio(selection, _h) { } for (let item of dataIs[level].representatives) { // Compute the yPrev by calculating the index of the corresponding representative - var iOnPrev = dData.get(data[item][id]).__i[level - 1]; - var iRep = Math.floor( + let iOnPrev = dData.get(data[item][id]).__i[level - 1]; + let iRep = Math.floor( iOnPrev - (iOnPrev % dataIs[level - 1].itemsPerpixel) ); // if (DEBUG) console.log("i rep = "+ iRep); // if (DEBUG) console.log(data[level-1][iRep]); // if (DEBUG) console.log(yScales[level-1](data[level-1][iRep][id])); - var locPrevLevel = { + let locPrevLevel = { x: levelScale(level - 1) + xScale.range()[1], y: yScales[level - 1](data[dataIs[level - 1][iRep]][id]), }; - var locLevel = { + let locLevel = { x: levelScale(level), y: yScales[level](data[item][id]), }; - var points = [ + let points = [ locPrevLevel, { x: locPrevLevel.x + nv.levelsSeparation * 0.3, y: locPrevLevel.y }, { x: locLevel.x - nv.levelsSeparation * 0.3, y: locLevel.y }, @@ -1536,7 +1538,7 @@ function navio(selection, _h) { for (let attrib of attribsOrdered) { if (attrib === "selected") continue; - var scale = colScales.get(attrib); + let scale = colScales.get(attrib); if (scale.__type === "seq" || scale.__type === "date") { scale.domain( d3.extent( @@ -1671,7 +1673,7 @@ function navio(selection, _h) { } function moveAttrToPos(attr, pos) { - var i = attribsOrdered.indexOf(attr); + let i = attribsOrdered.indexOf(attr); if (i === -1) { console.log("moveAttrToPos attr not found", attr); return; @@ -1739,7 +1741,7 @@ function navio(selection, _h) { } nv.initData = function (mData, mColScales) { - var before = performance.now(); + let before = performance.now(); // getAttribsFromObject(mData[0][0]); colScales = mColScales; @@ -1759,7 +1761,7 @@ function navio(selection, _h) { filtersByLevel[0] = []; // Initialice filters as empty for lev 0 // nv.updateData(mData, mColScales, mSortByAttr); - var after = performance.now(); + let after = performance.now(); if (DEBUG) console.log("Init data " + (after - before) + "ms"); }; @@ -1772,7 +1774,7 @@ function navio(selection, _h) { } = opts || {}; if (DEBUG) console.log("updateData"); - var before = performance.now(); + let before = performance.now(); if (typeof mDataIs !== typeof []) { console.log("navio updateData didn't receive an array"); @@ -1805,7 +1807,7 @@ function navio(selection, _h) { recomputeBrushes, }); - var after = performance.now(); + let after = performance.now(); if (DEBUG) console.log("Updating data " + (after - before) + "ms"); }; // updateData @@ -1823,9 +1825,9 @@ function navio(selection, _h) { shouldDrawBrushes = shouldDrawBrushes !== undefined ? shouldDrawBrushes : true; - var before = performance.now(); + let before = performance.now(); - var w = levelScale.range()[1] + nv.margin + nv.x0; + let w = levelScale.range()[1] + nv.margin + nv.x0; // If updating all levels erase everything // if (levelsToUpdate===undefined) { @@ -1857,7 +1859,7 @@ function navio(selection, _h) { drawCloseButton(); } - var after = performance.now(); + let after = performance.now(); if (DEBUG) console.log("Redrawing " + (after - before) + "ms"); return nv; }; @@ -1978,7 +1980,7 @@ function navio(selection, _h) { "addAllAttribs called without data to guess the attribs. Make sure to call it after setting the data" ); - var attribs = + let attribs = _attribs !== undefined ? _attribs : getAttribsFromObjectAsFn(data[0], nv.addAllAttribsRecursionLevel); @@ -2068,7 +2070,7 @@ function navio(selection, _h) { nv.data = function (_) { initTooltipPopper(); - if (!colScales.has("selected")) { + if (nv.showSelectedAttrib && !colScales.has("selected")) { nv.addAttrib( "selected", d3 @@ -2079,7 +2081,7 @@ function navio(selection, _h) { ); moveAttrToPos("selected", 0); } - if (!colScales.has("__seqId")) { + if (nv.showSequenceIDAttrib && !colScales.has("__seqId")) { nv.addSequentialAttrib("__seqId"); moveAttrToPos("__seqId", 1); } @@ -2098,7 +2100,10 @@ function navio(selection, _h) { nv.initData(dataIs, colScales); // Has the user added attributes already? then update - if (attribsOrdered.length > 2) { + if ( + attribsOrdered.length > + (nv.showSelectedAttrib ? 1 : 0 + nv.showSequenceIDAttrib ? 1 : 0) + ) { nv.updateData(dataIs, colScales, { shouldUpdateColorDomains: true }); }