MichaelRoeder
commented
6 years ago Set the priority to "high" because the clarification whether an RDF library can be used is blocking the complete issue.
Closed MichaelRoeder closed 6 years ago
MichaelRoeder
commented
6 years ago Set the priority to "high" because the clarification whether an RDF library can be used is blocking the complete issue.
MichaelRoeder
commented
6 years ago I checked CubeViz and it turns out that they provide a JavaScript library called CubeViz.js. From the demo, I got the impression that our GUI could use the library to create graphs that visualize a give JSON-LD object (containing the RDF data). This is described in the lower part of the demo.
The next step could be to create an example of the diagram usage in a feature branch to make sure that it is working as expected. This example could be based on existing results of the Odin benchmark.
Ennosigaeon
commented
6 years ago @MichaelRoeder: Will you provide logic to create Turtle data that can be queried? I will then continue to implement the JS logic.
MichaelRoeder
commented
6 years ago Yes. As discussed, I would like to have the data prepared by the backend so that the frontend only takes a certain JSON element and uses it as input for the diagram creation.
For a first prototype, we even might fall back to a simple dummy example, based on the already available Odin results.
MichaelRoeder
commented
6 years ago In the feature/diagram-125 branch, I added the ability to generate JSON that should be usable for creating diagrams. First, I wanted to have the diagrams in the same list as the KPIs, but the JSON generation does not seem to support this. So I had to adapt the JSON that is received by the JavaScript client in the following way:
[
{
"benchmark": {
...
"kpis": [
{
"description": "Evaluation of Precision",
"id": "http://w3id.org/bench#tasksPrecision",
"name": "Evaluation of Precision for each SELECT SPARQL query",
"range": "http://purl.org/linked-data/cube#DataSet"
},...
]
},
"benchmarkLogAvailable": true,
"diagrams": [
{
"description": "Evaluation of Precision",
"id": "http://w3id.org/bench#tasksPrecision",
"name": "Evaluation of Precision for each SELECT SPARQL query",
"range": "http://purl.org/linked-data/cube#DataSet",
"data": [
{
"x": 1.0,
"y": 1.0
},
{
"x": 2.0,
"y": 1.0
},
{
"x": 3.0,
"y": 1.0
},
{
"x": 4.0,
"y": 1.0
},
{
"x": 5.0,
"y": 1.0
},
{
"x": 6.0,
"y": 1.0
},
{
"x": 7.0,
"y": 1.0
},
{
"x": 8.0,
"y": 1.0
},
{
"x": 9.0,
"y": 1.0
},
{
"x": 10.0,
"y": 1.0
},
{
"x": 11.0,
"y": 1.0
},
{
"x": 12.0,
"y": 1.0
},
{
"x": 13.0,
"y": 1.0
},
{
"x": 14.0,
"y": 1.0
},
{
"x": 15.0,
"y": 1.0
},
{
"x": 16.0,
"y": 0.0
},
{
"x": 17.0,
"y": 1.0
},
{
"x": 18.0,
"y": 0.0
},
{
"x": 19.0,
"y": 0.0
},
{
"x": 20.0,
"y": 0.0
},
{
"x": 21.0,
"y": 0.0
}
],
"label": "Precision"
},...
],
"id": "1495541896875",
"kpis": [
{
"type": "diagramBean",
"description": "Evaluation of Precision",
"id": "http://w3id.org/bench#tasksPrecision",
"name": "Evaluation of Precision for each SELECT SPARQL query",
"range": "http://purl.org/linked-data/cube#DataSet",
"data": [
{
"x": 1.0,
"y": 1.0
},
{
"x": 2.0,
"y": 1.0
},
{
"x": 3.0,
"y": 1.0
},
{
"x": 4.0,
"y": 1.0
},
{
"x": 5.0,
"y": 1.0
},
{
"x": 6.0,
"y": 1.0
},
{
"x": 7.0,
"y": 1.0
},
{
"x": 8.0,
"y": 1.0
},
{
"x": 9.0,
"y": 1.0
},
{
"x": 10.0,
"y": 1.0
},
{
"x": 11.0,
"y": 1.0
},
{
"x": 12.0,
"y": 1.0
},
{
"x": 13.0,
"y": 1.0
},
{
"x": 14.0,
"y": 1.0
},
{
"x": 15.0,
"y": 1.0
},
{
"x": 16.0,
"y": 0.0
},
{
"x": 17.0,
"y": 1.0
},
{
"x": 18.0,
"y": 0.0
},
{
"x": 19.0,
"y": 0.0
},
{
"x": 20.0,
"y": 0.0
},
{
"x": 21.0,
"y": 0.0
}
],
"label": "Precision"
},...
],...
}
]I am pretty sure that this could be further optimized because at the moment the diagram data is listed twice (in KPIs and in diagrams).
The complete example can be found here.
From what I gathered it should be possible to directly use the data and the label for creating a diagram with this lib http://www.chartjs.org/docs/latest/getting-started/usage.html
We used it in a similar way at https://github.com/dice-group/gerbil/blob/SWChallenge/gerbil.web/src/main/webapp/WEB-INF/views/overview.jsp#L338
@Ennosigaeon Let me know if you need more information.
yamalight
commented
6 years ago I've pushed the initial implementation of charts here: https://github.com/hobbit-project/platform/commit/ca007e71e7ceebf20135074887058eac22d9a388
Ideally we'd want to see charts inside of columns, but I couldn't figure out how the table is constructed to do that myself so that needs to be done by you guys.
Ennosigaeon
commented
6 years ago I have integrated your code in the experiment details table. Please check, if the behaviour/design is as expected.
MichaelRoeder
commented
6 years ago Very nice :smiley:
one tiny issue left: if the diagram does not fit into the cell, it would be nice to have a slider to see the right side of the diagram (which is hidden at the moment)
Ennosigaeon
commented
6 years ago I have wrapped the plots in a scrollable container.
Descripiton
As a user, I would like to see information in a graphical way, e.g., as diagram. These diagrams could be used for a) single multi-dimensional KPIs (as used by Odin) or b) for expressing the results of the analysis component.
Tasks