DescendantSpaceTree addon - initial development

[tpoindex]

@stuck @DaveSch
For the resizing issues, see the in-page help text, first bullet point recognizes this behavior:

For the best viewing experience, maximize your browser window to use the entire screen and reload this page. The viewer is fitted to your screen size.

Perhaps some extra text would help, such as “press Ctrl-R or F5 after resizing…” It also might be possible to add an event listener on the window to re-init the space tree.

@emyoulation
You bring up a point I’ve never really considered - printing. I always imaged DescendantSpaceTree as a purely interactive usage. I can print reasonable well from Firefox and Chrome on my laser printers, turning off background images. I don’t own an inkjet (and after just spending multiple hours helping my sister getting her inkjet to print again after putting in brand new manufacturer’s cartridges, I can thoroughly say to avoid most of these printers at all cost.)

Anyway, if you have an specific fixes for printing, certainly let me know.

[tpoindex]

@stuck @DaveSch
Re: resizing

Here’s a quick hack, please edit your html file and add this bit of code :

// NEAR THE VERY BOTTOM OF THE HTML FILE
/* set the chartname */
var chartname = document.getElementById(‘chartname’);
chartname.innerHTML = " Descendants of " + ged_name;

// ADD RESIZE CODE
function doResize() {
document.getElementById(“infovis”).textContent = ‘’;
init();
}
window.onresize = doResize;
// END OF RESIZE CODE

Let me know if this works for you. Works for me on Linux with Firefox and Chromium. Perhaps with a little more work I can get back to the last focused node as well (no promises though).

[stuck]

@tpoindex

add this bit of code

This doesn’t seem to work for me using FF (latest) on Windows, the tree still can’t be moved into the bottom bit of the window. Using shift reload doesn’t seem to work either (with or without this resize code).

The only way I can get the tree to use the full window is if I ensure FF is in full screen mode before I open the HTML file.

Now I know this, I can live with it.

Thanks again for this new add-on.

[tpoindex]

Thanks for testing. Wow, interesting that it didn’t work on Windows, nor a manual reload. Guess I’ll have to fire up my Windows partition and do some testing myself. I’ll keep you posted.

Trying to get back to the last navigated node seems to be troublesome too, ugh.

[tpoindex]

I fired up my Windows partition, updated my Win10, and updated all browsers.
Chrome 137.0.xx
Firefox 139.0.xx
Edge 137.0.xx

My little hack works on all of these. I’m attaching the GrampsExample database DescendantSpaceTree.html. Please download and test this one.
Thanks!
GrampsExample.html (286.2 KB)

[DaveSch]

It is now working for me of FF 139.0

@tpoindex

// ADD RESIZE CODE
function doResize() {
document.getElementById(“infovis”).textContent = ‘’;
init();
}
window.onresize = doResize;
// END OF RESIZE CODE

I was adding the two // lines. Now seeing your results those two lines are not included. And it now works.

[stuck]

@DaveSch

adding the two // lines

Ah, yes! Comment lines in the rest of the HTML file begin:
/*
not:
//
Having corrected that, now if I resize FF and press F5, the tree can be moved to the bottom of the window.

[tpoindex]

@emyoulation

But no matter how you look at or print, it doesn’t render in its best form. If it prints without the background, the connecting lines are pale yellow tubes with black noise.

What you are seeing is anti-aliasing artifacts, since printing via browser is basically a screen capture. Anti-aliasing is a technique for raster graphics to “smooth” out lines to look better on the screen, rather than getting harsh “stair-stepping” effects. Printer resolution is always going to be higher than screen resolution.

I have a prototype of a “light” theme for the graph canvas. Please download and have a look. I lightened the canvas background (still some color), and changed the edge colors for the selected and non-selected descendant paths. Otherwise, the node colors are the same, as is the rest of the page.

If this works out, I’ll include a theme option. I already have the auto-resizing incorporated in this example.

GrampsExample_LightTheme.html (286.3 KB)

[GaryGriffin]

Merged/published updated version which includes:

new feature: option to open generated file in browser
new feature: theme option
bug fix: resize and reset graph on browser resize. clarify modal web help

[tpoindex]

Thanks @GaryGriffin. I’ve updated the Wiki page to reflect the changes.

[emyoulation]

@tpoindex

I have a prototype of a “light” theme for the graph canvas. Please download and have a look. I lightened the canvas background (still some color), and changed the edge colors for the selected and non-selected descendant paths. Otherwise, the node colors are the same, as is the rest of the page.

The lavender background in the LIGHT_THEME is a bit too colorful for me. I’m more inclined to a beige. I tried a #FAF0E6

DescendantSpaceTree/DescendantSpaceTree.py