sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
238 lines • 12.5 kB
JavaScript
import { AbstractWidget, ValueRepetition } from "../AbstractWidget";
import "jstree";
import { DataFactory } from 'rdf-data-factory';
import { I18n } from "../../../settings/I18n";
import "jstree/dist/themes/default/style.min.css";
import { NoOpTreeDataProvider } from "../../datasources/NoOpDataProviders";
const factory = new DataFactory();
export class TreeWidget extends AbstractWidget {
constructor(parentComponent, configuration, startClassVal, objectPropVal, endClassVal) {
super("tree-widget", parentComponent, null, startClassVal, objectPropVal, endClassVal, ValueRepetition.MULTIPLE);
this.onTreeDataLoaded = function onTreeDataLoaded(result) {
if (result.length == 0) {
$("#ecgrw-" + this.IdCriteriaGroupe + "-displayLayer .treeNotice")
.text(I18n.labels.TreeWidgetNoData)
.show();
}
else {
$("#ecgrw-" + this.IdCriteriaGroupe + "-displayLayer .treeNotice").hide();
}
};
//limit to 3 selction
this.onChangedJstree = function (e, data) {
let this_ = e.data.arg1;
var items = $(this_.jsTree).find("li.jstree-node");
var selecteds = this_.jsTree.jstree().get_top_checked();
for (var i = 0; i < items.length; i++) {
var id = $(items[i]).attr("id");
if (selecteds.indexOf(id) > -1) {
$(items[i]).addClass("tree-item-selected");
}
else {
$(items[i]).removeClass("tree-item-selected");
}
if ($(items[i]).parents(".tree-item-selected").length > 0) {
var node = this_.jsTree.jstree(true).get_node(id);
if (!this_.jsTree.jstree(true).is_disabled(node)) {
$(items[i]).addClass("is-reactivable");
this_.jsTree.jstree(true).disable_checkbox(node);
this_.jsTree.jstree(true).disable_node(node);
}
}
else {
if ($(items[i]).hasClass("is-reactivable")) {
$(items[i]).addClass("red");
this_.jsTree.jstree("enable_checkbox", id);
this_.jsTree.jstree(true).enable_node(id);
}
}
}
if (this_.jsTree.jstree().get_top_checked().length >= this_.configuration.maxSelectedItems) {
for (var i = 0; i < items.length; i++) {
var id = $(items[i]).attr("id");
if (selecteds.indexOf(id) == -1) {
var node = this_.jsTree.jstree(true).get_node(id);
if (!this_.jsTree.jstree(true).is_disabled(node)) {
$(items[i]).addClass("is-reactivable");
this_.jsTree.jstree(true).disable_checkbox(node);
this_.jsTree.jstree(true).disable_node(node);
}
}
}
this_.jsTree.addClass("max-selected");
}
else {
if (this_.jsTree.hasClass("max-selected")) {
var items = $(this_.jsTree).find("li.jstree-node");
for (var i = 0; i < items.length; i++) {
var id = $(items[i]).attr("id");
if (selecteds.indexOf(id) == -1) {
if ($(items[i]).hasClass("is-reactivable")) {
$(items[i]).addClass("red");
if ($(items[i]).parents(".tree-item-selected").length == 0) {
this_.jsTree.jstree("enable_checkbox", id);
this_.jsTree.jstree(true).enable_node(id);
}
}
}
}
this_.jsTree.removeClass("max-selected");
}
}
};
this.onClickDisplay = function (e) {
let this_ = e.data.arg1;
this_.displayLayer.show();
};
this.onClickCancel = function (e) {
let this_ = e.data.arg1;
this_.displayLayer.hide();
};
this.onClickSelect = function (e) {
let this_ = e.data.arg1;
const values = this_.getValue();
this_.displayLayer?.hide();
this_.triggerRenderWidgetVal(values);
};
this.onClickClose = function (e) {
let this_ = e.data.arg1;
this_.displayLayer?.hide();
$(this_.parentComponent).trigger("change");
};
this.getValue = function () {
var checked = this.jsTree.jstree().get_top_checked(true);
// rebuild a clean data structure
var values = [];
for (var node in checked) {
const val = {
// TODO : find a way to retrieve the itemLabel
label: checked[node].original.text,
criteria: {
rdfTerm: {
type: "uri",
value: checked[node].id
}
}
};
values.push(val);
}
return values;
};
this.configuration = configuration;
this.IdCriteriaGroupe = "id";
this.startClassVal = startClassVal;
this.endClassVal = endClassVal;
this.objectPropVal = objectPropVal;
}
render() {
super.render();
this.button = $('<a id="ecgrw-' +
this.IdCriteriaGroupe +
'-input" class="treeBtnDisplay">' +
"<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF0AAABaCAYAAADadFp7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAAIWSURBVHhe7ZvRjcJADAXTGXQCnUAH0BF0RAmcspKlKPIGO3LuITIjzccSZ6UdfjiODG/4d4gugOgCiC6A6AKILoDoAogugOgCiC6A6AKILmB19GEYNvXxeDTXYvePevtXmoXoBWYheoFZiF5glt1GP51OzcvlEvJwODS9vbIQ3QnsSfQARF/h/X5vPp/PVdr9o97+2TfV4nt7ZSF6kF1E31qiCyS6QKILJLpAojvebremxRm11yLztu7N21wUogfmbd2bt7kou4juRbHXIvO27s1n/w44n89Nb68sRHcCexI9MG/r3jzRHecRR5Yizudt3ZuvNAvRC8xC9AKzEL3ALEQvMMvq6NNDbeHr9WpOsWvewe2aYfeP2rWtzEL0ArOsjq7ADhmJ/s0QXQDRBRBdANEFEF0A0QUQXQDRBRBdANEFEF0A0QUQXcDPRp9+tev9d7/SLEQvMAvRC8zys9Ft3ZuvNAvRC8xC9AKzEL3ALLuNPv89+yftYV9vryxEn8wtSXTn4HbNsHVvnuhBLIB38PnvzW096s3bXlG+4vEXBUQXsBQ9K9GDEF0A0QUQXQDRBdhXtRZsSfscPuqFsrkoRJ/E7Ul0AdM3wAtlD+Ner9eQx+Ox6e2VhehOYE+iByC6gE/RK81C9AKzEL3ALEQvMAvRC8zys9G/GaILILoAogsgugCiCyC6AKILILoAogsg+r/zfv8BQP0fDMjxSz8AAAAASUVORK5CYII=\" alt=\"\" />" /* UiuxConfig.ICON_TREE */ +
"</a>");
this.hiddenInput = $('<input id="ecgrw-' +
this.IdCriteriaGroupe +
'-input-value" type="hidden"/>');
this.displayLayer = $('<div id="ecgrw-' +
this.IdCriteriaGroupe +
`-displayLayer" class="treeLayer"><div class="treeClose">${"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d=\"M175 175C184.4 165.7 199.6 165.7 208.1 175L255.1 222.1L303 175C312.4 165.7 327.6 165.7 336.1 175C346.3 184.4 346.3 199.6 336.1 208.1L289.9 255.1L336.1 303C346.3 312.4 346.3 327.6 336.1 336.1C327.6 346.3 312.4 346.3 303 336.1L255.1 289.9L208.1 336.1C199.6 346.3 184.4 346.3 175 336.1C165.7 327.6 165.7 312.4 175 303L222.1 255.1L175 208.1C165.7 199.6 165.7 184.4 175 175V175zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z\"/></svg>" /* UiuxConfig.ICON_REG_XMARK */}</div><div class="treeNotice"></div><div class="treeDisplay" id="ecgrw-` +
this.IdCriteriaGroupe +
'-display"></div><div class="treeActions"><a class="treeCancel">' +
I18n.labels.TreeWidgetDelete +
'</a><a class="treeSubmit">' +
I18n.labels.TreeWidgetSelect +
"</a></div></div>");
this.html
.append(this.button)
.append(this.hiddenInput)
.append(this.displayLayer);
//render this element
var startClassGroup_value = this.startClassVal.type;
var endClassGroup_value = this.endClassVal.type;
var ObjectPropertyGroup_value = this.objectPropVal.type;
var self = this;
let dataProvider = this.configuration.dataProvider;
var options = {
core: {
multiple: true,
data: function (node, callback) {
let nodeCallback = function (items) {
var result = [];
for (var i = 0; i < items.length; i++) {
var text = items[i].label;
// shorten the label if too long to avoid tree goind far right
if (text.length > 90) {
text = text.substring(0, 90) + " (...)";
}
var aNode = {
id: items[i].term.value,
text: text,
};
if (items[i].hasChildren) {
aNode.children = true;
}
if (items[i].disabled) {
aNode.state = {
disabled: true, // node disabled
};
}
aNode.parent = node.id;
result.push(aNode);
}
callback.call(this, result);
if (node.id === "#") {
self.onTreeDataLoaded(result);
}
};
// TODO : this is not working for now
let errorCallback = (payload) => {
console.error(payload);
};
if (node.id === "#") {
dataProvider.getRoots(startClassGroup_value, ObjectPropertyGroup_value, endClassGroup_value, nodeCallback, errorCallback);
}
else {
dataProvider.getChildren(node.id, startClassGroup_value, ObjectPropertyGroup_value, endClassGroup_value, nodeCallback, errorCallback);
}
},
themes: {
icons: false,
},
},
checkbox: {
keep_selected_style: false,
three_state: false,
cascade: "down+undetermined",
cascade_to_disabled: true,
},
plugins: ["changed", "wholerow", "checkbox"],
};
// this.jsTree = $("#ecgrw-" + id_inputs + "-display").jstree(options);
this.jsTree = this.displayLayer.find("#ecgrw-" + this.IdCriteriaGroupe + "-display").jstree(options);
this.button.on("click", { arg1: this }, this.onClickDisplay);
//disable/enable on max selction
this.jsTree.on("changed.jstree", { arg1: this }, this.onChangedJstree);
this.jsTree.on("after_open.jstree", { arg1: this }, this.onChangedJstree);
this.displayLayer
.find(".treeSubmit")
.on("click", { arg1: this }, this.onClickSelect);
this.displayLayer
.find(".treeCancel")
.on("click", { arg1: this }, this.onClickCancel);
this.displayLayer
.find(".treeClose")
.on("click", { arg1: this }, this.onClickClose);
this.displayLayer.hide();
return this;
}
parseInput(input) {
return input;
}
}
// The default implementation of TreeConfiguration
TreeWidget.defaultConfiguration = {
dataProvider: new NoOpTreeDataProvider(),
maxSelectedItems: 3
};
//# sourceMappingURL=TreeWidget.js.map