Skip to content

Truncate long labels in decision table visualization #1028

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

Merged
merged 11 commits into from
Oct 30, 2025
Merged

Truncate long labels in decision table visualization #1028

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b8b76b4
updates also to truncate long fields
sei-vsarvepalli Oct 28, 2025
69d0b8c
Update docs/ssvc-explorer/simple.js
sei-vsarvepalli Oct 28, 2025
df4ad63
Update docs/ssvc-explorer/simple.js
sei-vsarvepalli Oct 28, 2025
58153d0
Update docs/ssvc-explorer/simple.js
sei-vsarvepalli Oct 28, 2025
221822f
Updates to handle words that may end with spaces and ellipsis is invi…
sei-vsarvepalli Oct 29, 2025
f225d89
Suggestion to color distinguish values from names of Decision Points
sei-vsarvepalli Oct 29, 2025
62fad9f
Added more conditions to regex match
sei-vsarvepalli Oct 29, 2025
86c18b5
Reduce string length to truncate
sei-renae Oct 29, 2025
b13acfa
Uncomment a slicer
sei-renae Oct 29, 2025
2be8f34
Add test for first character not to be space
sei-vsarvepalli Oct 29, 2025
4805f9f
Fix syntax
sei-renae Oct 29, 2025
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
37 changes: 30 additions & 7 deletions docs/ssvc-explorer/simple.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,20 @@ const graphModule = (function() {

d3.select(self.frameElement).style("height", "700px");
}

function truncateEllipsis(d) {
let dstr = d.name.split(":")[0];
if (dstr.length > 20) {
let truncated = dstr.substring(0, 18);
if(/\s+$/.test(truncated) || /^\s/.test(dstr[18])) {
/* If it ends with spaces remove all spaces and the last
non-space character to show the word has been truncated */
truncated = truncated.replace(/\s+$/, "");
truncated = truncated.slice(0, -1);
}
dstr = truncated + "...";
}
return dstr;
}
function update(source) {
var i = 0
var nodes = tree.nodes(root).reverse()
Expand Down Expand Up @@ -198,14 +211,19 @@ const graphModule = (function() {
.attr("dy", ".35em")
.attr("class",function(d) {
var fclass = d.name.split(":").shift().toLowerCase();
fclass = fclass.replace(/^[^a-zA-Z_-]/,'C');
fclass = fclass.replace(/[^a-zA-Z0-9_-]/g,'_');
if(!('children' in d))
return "gvisible prechk-"+fclass+" finale";
return "gvisible prechk-" + fclass + " finale";
return "gvisible prechk-"+fclass;})
.text(function(d) { return d.name.split(":")[0]; })
.attr("data-fullname", function(d) {
return d.name.split(":").shift();
})
.text(truncateEllipsis)
.style("font-size",font)
.style("fill", function(d) {
var t = d.name.split(":").shift();
var x;
const t = d.name.split(":").shift();
let x;
if(t in lcolors)
x = lcolors[t];
return x;
Expand Down Expand Up @@ -368,13 +386,18 @@ const graphModule = (function() {
var yoffset = -10
if(showFullTree)
yoffset = -6
d3.select("g#x"+id).append("text").attr("dx",-6).attr("dy",yoffset).attr("class","gtext")
d3.select("g#x"+id)
.append("text").attr("dx",-6)
.attr("dy",yoffset).attr("class","gtext")
.append("textPath").attr("href","#f"+id).attr("class",xclass)
.attr("text-anchor","middle")
.attr("id","t"+id)
.attr("csid",csid)
.attr("parentname",pname)
.text(text).attr("startOffset",doffset+"%")
.attr("data-fullname", text)
.text(truncateEllipsis({name:text}))
.attr("fill", "#777")
.attr("startOffset",doffset+"%")
.on("click",pathclick)
.on("mouseover",showdiv)
.on("mouseout",hidediv);
Expand Down
Loading