clickable box nodes

[touretzkyds]

Instead of expanding all the box nodes, let's expand a box node when the user clicks on it, and un-expand it if the user clicks on it again.

When a box node is not expanded, its label should summarize what the box is saying, e.g., if we have an averageWeight relation pointing to a box b0 for the qudt quantity 700 pounds then we should summarize this box as something like "b0: 700 pounds".

Note that the way you summarize a box node depends on the kind of information it's expressing. If it's encoding a qudt quantity then we know what to do. For other types of boxes, figure out something reasonable.

[nhadlaw]

Latest version of demo2.html that I just uploaded should implement this feature. Let me know if there seems to be any mistakes that I didn't catch.

[touretzkyds]

This was closed too soon. There are a couple of issues here:

1. If I click on Alligator sinensis and click on its b0 box, the b0 node is expanded. If I then click on the b1 box I expect the b1 node to be expanded, but that's not what happens. Instead, the b0 node is un-expanded, and I have to click on b1 a second time to see its expansion This is not correct behavior. Clicking on b1 should expand it while leaving b0 alone. Clicking on b0 should un-expand it.
2. Clicking on b3 expands it and shows a "next" link to b4. But I cannot click on b4. It should be clickable like any other box node.

[nhadlaw]

The latest version of demo2.html should address the first issue and fix it however for the b4 box, currently when I run the property query, I don't really get any info about b4. For example when I click on Alligator sinesis and I look at the property query of this taxon, the the string 'b4' only appears in two different indexes in the returned json object:

list: {type: 'uri', value: 'http://solid.boltz.cs.cmu.edu:3030/ontology/averageLifespan'} obj: {type: 'bnode', value: 'b3'} obj2: {type: 'bnode', value: 'b4'} pred: {type: 'uri', value: 'http://solid.boltz.cs.cmu.edu:3030/ontology/prefComparisons'} pred2: {type: 'uri', value: 'http://www.w3.org/1999/02/22-rdf-syntax-ns#rest'} pred2Label: {type: 'literal', value: 'rest'} predLabel: {type: 'literal', xml:lang: 'en', value: 'prefComparisons'}

list: {type: 'uri', value: 'http://solid.boltz.cs.cmu.edu:3030/ontology/averageLength'} obj: {type: 'bnode', value: 'b3'} obj2: {type: 'bnode', value: 'b4'} pred: {type: 'uri', value: 'http://solid.boltz.cs.cmu.edu:3030/ontology/prefComparisons'} pred2: {type: 'uri', value: 'http://www.w3.org/1999/02/22-rdf-syntax-ns#rest'} pred2Label: {type: 'literal', value: 'rest'} predLabel: {type: 'literal', xml:lang: 'en', value: 'prefComparisons'}

So it looks like it's just in the obj2 value slot for both. I assume there's a way to get even further information about this node but not sure how?

[touretzkyds]

Here is a query that will give you the full expansions of all the list properties of a concept. You will need to run this separately from the query that pulls all the concept properties.

PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX unit:  <http://qudt.org/vocab/unit/>
PREFIX qudt:  <http://qudt.org/schema/qudt/>
PREFIX kgo: <http://solid.boltz.cs.cmu.edu:3030/ontology/>
PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
SELECT * WHERE {
  ?alligator kgo:taxonName "Alligator mississippiensis"@en .
  ?alligator ?r ?b.
  ?b rdf:type rdf:List;
     rdf:rest* ?b2.
  ?b2 ?r2 ?v2.
}

Once you have all the list elements, you can use them in the display of the un-expanded box node, e.g., we should show the prefComparison as "[averageMass, averageLength, averageLifespan]".

[nhadlaw]

So just to clarify, in the adjusted display we want to change the edge label from prefComparison to the list "[averageMass, averageLength, averageLifespan] or the node label? When the user expands the box node would you still like the "first" and "type" properties to show up and instead of the b4 node have the rest of the list as in: "[averageLength, averageLifespan]" show up in the 3rd node?

[touretzkyds]

The edge label should remain prefComparison, but the box node label (when the node is not expanded) should show the full list, i.e., "b3: [averageMass, averageLength, AverageLifespan]".

When the user expands the box node, then the node label should just be "b3" and we'll show all the properties as links, including a "rest" property that points to b4. If b4 is not expanded then I like your idea of labeling it with the list fragment it encodes, i.e. "b4: [averageLength, AverageLifespan]".

[touretzkyds]

By the way: the link labels on box nodes (e.g., "type", "value") are too small to be easily readable. We should use the same size text as for the link labels on the property nodes.

Also, I think box nodes should be a different color than other property nodes such as the "type" property, which has value Taxon. Maybe Taxon should be orange, but we'll keep it as a circle instead of a rectangle to indicate that it's a concept, not a literal. This way anything yellow will be a box node.

We should also consider using a different shape for box nodes. What about a hexagon?

[nhadlaw]

The latest version of demo2.html changed some of the styling you mentioned and also made it so that: "The edge label should remain prefComparison, but the box node label (when the node is not expanded) should show the full list, i.e., "b3: [averageMass, averageLength, AverageLifespan]". However, I'm still not sure what links to display off of the b4 node when a user tries to expand it? Should it just be two links to averageLength and averageLifespan as maybe 2ndComparison and 3rdComparison as the link labels respectively?

[touretzkyds]

When the user expands the b4 node they should see a "first" link pointing to averageLength and a "rest" link pointing to b5.

[touretzkyds]

The hexagons appear to be taller than they are wide. Let's switch this around so they're wider than they are tall.

[nhadlaw]

Ok the latest versions of demo2.html and demo2d.html should have the b4 click functionality and the bnode diameter has been changed

[touretzkyds]

This is working nicely, and the new hexagons look great. I'd just like to make one small change. Expanded box nodes (meaning their outgoing links are visible) should always display as yellow hexagons. But when they're not expanded they should display as purple circles.

This means when we first look at the properties of "Alligator mississippiensis" b3 should be a purple circle. When we click on it to expand it, b3 because a yellow hexagon and we now see b4 as a purple circle. Clicking on b4 will expand it, converting it to a yellow hexagon and revealing b5 as a purple circle.

[touretzkyds]

This was working fine with the Demo graph but it's seriously broken with the Devel graph. (Deya just added the box nodes to the Devel graph; it hadn't been possible to test this before.) Please fix this as soon as you can.

[nhadlaw]

Yes sorry, this was just an issue with variable initialization (that I only changed in demo2d for the issue of proper code styling). It was a quick fix and should be working properly now.

[touretzkyds]

The unexpanded box nodes are showing up as purple ovals now. We never had purple ovals before, just circles. I would prefer that they show up as yellow hexagons, so the shape/color doesn't change when we expand them.

[touretzkyds]

Also, any node that is clickable should respond to mouseover, like the taxon nodes do.

[nhadlaw]

Ok so I believe the current version of demo2d.html should fix the box node colors/mouseover feature.

[touretzkyds]

Yes, this issue is resolved.