Network Visualization: Network of Selected Person

[nathangibson]

I would like to be able to show the network of a selected/searched individual, probably to the 2nd degree. I would like to include this on the person detail page, the same way we include a small map view for persons in Syriaca.

[wsalesky]

@nathangibson I have some visualizations ready for testing: https://github.com/usaybia/srophe-eXist-app/tree/issue56

Would you like me to merge this with the development branch? Or would you like to try it locally? I have only added it to the persons records at this point, here is a screen shot of the work in progress:

[nathangibson]

@wsalesky Sure, would be great to merge with development. Eager to test these out!

[wsalesky]

@nathangibson I'm going to put these changes on the development branch, do you have a branch naming convention you would like me to use or can I create a branch based on the issue #?

[nathangibson]

@wsalesky Great. Including the issue number is good.

Branch names are not as important for the release system I'm trying to implement. It's the PR titles that get added automatically to the release notes. I'll let you know more but it'd be nice if the PR title is the sort of past-tense bullet point action item that would appear in release notes, such as "Added network visualizations on person detail pages"

[wsalesky]

@nathangibson I merged the changes into the development branch. Are webhooks set up for this branch? Or are you using the Docker build and deploy system mention here: https://github.com/usaybia/srophe-docker/issues/4

Please remember these are a starting point only for the visualizations. The queries that generate the relationship JSON are a bit slow, due to some limitations in eXist-db (I'm going to ask the list if anyone has ideas for optimization that I may have missed), so I have added a limit to the visualizations. When there are 50+ relationships associated with a person I only return the first degree relationships, not the second degree, as this has brought my local instance to a grinding halt on a few occasions. We could consider pre generating these JSON files, this would load the graphs much more quickly or there may be other solutions such as only including the secondary relationships when you click on a specific node. We can discuss the options.

The graphs themselves can be a little hard to view and interact with when squeezed into the sidebar, we may consider adding them to the main column, having a button that allows them to pop out and take up more screen space, or some other alternative. The filters could use some work to make them more attractive, but I thought I would wait until I hear back from you on the general direction of the visualizations.

Let me know what you think and where you want to go from here.

[nathangibson]

@wsalesky Awesomeness! Looking forward to checking it out.

I'll have to update the app on the dev server manually, probably early next week. Webhooks aren't live at the moment and I don't yet have the build and deploy system fully set up -- see my note there. Have a great weekend!

[nathangibson]

@wsalesky When I load this locally the sidebar is blank and I get a 404 for the d3 visualization scripts you've added. I think it's to do with the way the paths are coded: It's looking e.g. for /d3xquery/js/vis.js whereas the working scripts use nav-base, e.g. /exist/apps/usaybia/person/$nav-base/resources/js/srophe.js

[wsalesky]

@nathangibson When I build and deploy the dev branch locally I can run the visualizations. The only caveat is that I have to change the repo-config.xml file: https://github.com/usaybia/srophe-eXist-app/blob/master/repo-config.xml#L18

My nav base locally is: /exist/apps/usaybia

I'm not sure how you are running your local instance? Docker? Does the main navigation work? Can you go into the app and see if those files are actually in the version of the app you loaded?

Although the scripts are loaded slightly differently, they still rely on the nav-base. See: https://github.com/usaybia/srophe-eXist-app/blob/development/modules/app.xql#L1092 https://github.com/usaybia/srophe-eXist-app/blob/development/modules/app.xql#L1097 https://github.com/usaybia/srophe-eXist-app/blob/development/modules/app.xql#L1151

[nathangibson]

@wsalesky Oh, okay, I didn't realize I should change the nav-base. Now it's working great!

Overall: VERY cool!

• What do the sizes and colors indicate, and filled or not filled?

I really like

• the hover effects, highlighting the selected nodes and edges and showing the headword and occupation and URI
• the filter effects are very clear
• that it doesn't have much animation (I find too much animation for networks distracting)
• that double-click goes to the person record

Some tweaks (1st reactions, should we create separate issues for these?)

• Seeing this in action, I think 1st-degree relations are enough for the initial load on the person detail pages. For more in-depth visualizations ultimately I want to emphasize a kind of advanced browse full-window page. So we could either (1) load 2nd-degree visualizations on click or set the click to take you to the main network viz page with that person selected.
• I was actually thinking having this in the main column would be nice, in any case to make it very prominent and give it plenty of space. I'm wondering about moving some other things over into the right column, but I'll wait until I see how the relationship graph looks in the main column first.
• The main info I'm having trouble seeing that I'd like to see is the relationship type for a selected relation. Could this be shown as an additional line in the current popup? E.g. for person/1679, the relationship to person/814 could be "vizier under al-Ḥakam II, caliph".
• Would be great if the hover effect could also activate for mouse-over the relationship line (not just the circles).

The filters are already pretty good but we can tweak them some more once we have more space.

[nathangibson]

Online now at https://dev.usaybia.net :-)

[wsalesky]

@nathangibson Size and Colors: The size and colors are related to degree. The darkest, largest node is the current person, the smaller are the second degree relationships, the smallest white white nodes are the third degree relationships. The colors were drawn from the Usaybia website. I did try using a different color for different occupations, however some people have multiple occupations, which made this less of a useful method in my opinion, however we can swap it in so you can see what that looks like and indicate degree only by size if you prefer.

I will work on the above tweaks this week.

[wsalesky]

@nathangibson Updated version should address most of your concerns above. I think the next step is to look at dynamically updating the vis, so you can click on a node and get it's children without reloading the page, this will probably be the fastest way to get the more complex vis. Also, if you want to open an issue to discuss the "main network viz" page that would be great.

[nathangibson]

@wsalesky Thanks! As far as dynamic vis, let's see if we actually need it. I'm guessing 1 degree is enough on the person detail pages, with the option of people going to the main network viz page to go farther into the network.

I'll close this for now and reopen it if I see further tweaks.

[wsalesky]

@nathangibson This does not look right (does not match what I have locally). I need to review this, and resubmit. Sorry!

[nathangibson]

@wsalesky No problem, should we revert #64 ?

[nathangibson]

@wsalesky Am loving this!

Some further tweaks would still be nice ...

1. The overall size of the graph is still pretty constrained even though it's now in the main column. For someone like person/926 (see 1st screenshot) who has a lot of relationships, it seems pretty scrunched up, especially at the top but could also be expanded leftwards. I know there are some responsive design considerations here, so I'm not sure exactly what to suggest.
2. The overall arrangement is good, very readable in fact. But could we make the central node larger or more prominent proportionately? Ideally it'd be nice to have the name also on the central node (without needing a mouseover), but I don't know if this will be readable. What do you think?
3. Another size thing -- I think the Filter box is a nice size but could we increase the font size on the items inside it. I'm concerned it might be really hard to read for those without eagle vision.
4. The relationship labels are working very well--better actually than I expected. But occasionally the label curves the opposite direction from the line. See 2nd screenshot.
5. It appears that sometimes the labels are doubled up on a relationship, making them impossible to read. See person/926 again. The ideal (probably difficult?!) would be for the lines (edges) to be bundled into a single, thicker line for multiple relationships between the two people, but then to spread into multiple lines on mouseover. Ha! Okay just multiple lines would be fine for now.
6. If I click on person or relationship filter, the selection sticks until I mouseover something, but then disappears when I move the mouse back off the graph. Ideally (nitpicky) it would be great if it sticks until I click on a different filter or remove the filter. (The reason is that with the current setup it's tough to examine any of the filters because I have to keep reactivating them each time I mouseover to see who someone is.
7. Could we put the the URIs as a link in another line of the mouseover popup, instead of as a tooltip? The two are currently competing with each other.

Eventually I'd like to play with edge colors, but I don't think our data is at the right spot yet.

I hope all that makes sense! Feel free to break into child issues if you want :-)

[wsalesky]

@nathangibson These are ready for review.