forked from ontoportal/ontoportal_web_ui
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix #16, add instances table component (instances by ontolgy and clas…
…s views) and instances controller
- Loading branch information
1 parent
aaccdad
commit 5182c57
Showing
9 changed files
with
421 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| /** | ||
| * Get a label from an uri | ||
| * @param uri | ||
| * @returns {string} | ||
| */ | ||
| function getLabel(uri) { | ||
| let label = uri | ||
| if (isALink(uri)) { // is a link | ||
| let index = uri.toString().indexOf('#') | ||
| if (index > -1) { | ||
| label = uri.toString().substr(index + 1) | ||
| } else { | ||
| index = uri.toString().lastIndexOf('/') | ||
| if (index > -1) | ||
| label = uri.toString().substr(index + 1) | ||
| } | ||
| } | ||
| return label | ||
| } | ||
|
|
||
| function isALink(uri){ | ||
| return uri.startsWith("http") || uri.startsWith("https") | ||
| } | ||
|
|
||
| function getInstanceDetailsFromURI(ontology , uri){ | ||
| return new Promise((resolve , reject) => { | ||
| $.getJSON("/ajax/"+ontology+"/instances/"+ encodeURIComponent(uri)) | ||
| .done((data) => resolve(data)) | ||
| .fail((error)=> reject(error)) | ||
| }) | ||
|
|
||
| } | ||
|
|
||
| class InstancesTable{ | ||
| constructor(tableElem , ontologyAcronym , classUri = ""){ | ||
| this.tableElem = tableElem | ||
| this.ontologyAcronym = ontologyAcronym | ||
| this.classUri = classUri | ||
| this.dataTable = null | ||
| } | ||
|
|
||
| init(){ | ||
| if ( $.fn.dataTable.isDataTable( this.tableElem ) ) { | ||
| $(this.tableElem).DataTable().destroy(); | ||
|
|
||
| } | ||
| this.dataTable = $(this.tableElem).DataTable( { | ||
| "paging": true, | ||
| "pagingType": "full", | ||
| "info": false, | ||
| "searching": false, | ||
| "ordering": false, | ||
| "serverSide":true, | ||
| "processing": true, | ||
| "ajax": { | ||
| "url": this.#getAjaxUrl(), | ||
| "contentType": "application/json", | ||
| "dataSrc": (json) => { | ||
| json.recordsTotal = json["totalCount"]; | ||
| json.recordsFiltered = json.recordsTotal | ||
| return json["collection"].map(x => [ | ||
| x["@id"], | ||
| x["types"], | ||
| x["properties"] | ||
| ]) | ||
| }, | ||
| "data": (d) => { | ||
| return {page: (d.start/d.length)+ 1 , pagesize: d.length} | ||
| } | ||
| }, | ||
| "columnDefs": this.#render(), | ||
| "language": { | ||
| 'loadingRecords': ' ', | ||
| 'processing': ` | ||
| <div class="spinner-border m-2" role="status"> | ||
| <span class="sr-only">Loading...</span> | ||
| </div> | ||
| ` | ||
| }, | ||
| "createdRow": (row, data, dataIndex ) => { | ||
| $(row).click(() => this.#openPopUpDetail(data)); | ||
| } | ||
|
|
||
| }) | ||
| } | ||
|
|
||
| static mount(tableId , ontologyAcronym , conceptId){ | ||
| if(tableId.toString().length>0){ | ||
| const tableElm = document.querySelector(tableId) | ||
|
|
||
| if(tableElm){ | ||
| const instanceTable = new InstancesTable( tableElm , ontologyAcronym , conceptId) | ||
| instanceTable.init() | ||
| return instanceTable | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #render(){ | ||
| const toLink = function (uri) { | ||
| return `<a id="${uri}" href="javascript:void(0)" title="${uri}">${getLabel(uri)}</a>` | ||
| } | ||
| const arr =["ID"]; | ||
| if(!this.#isClassURISet()){ | ||
| arr.push("Types") | ||
| } | ||
| return arr.map((x,i) => { | ||
| return { | ||
| "targets" : i , | ||
| "title":x, | ||
| "render": function (data, type ,row ,meta){ | ||
| if(typeof data === "string") | ||
| data = [data] | ||
| return data.map((x) => toLink(x)).join(',') | ||
| } | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| #getAjaxUrl(page= null , size = null) { | ||
| let url = "/ajax/"+ this.ontologyAcronym | ||
| let params = ["page="+page,"pagesize="+size].filter(x => x !== null).join("&") | ||
| if(this.#isClassURISet() > 0){ | ||
| url += "/classes/" + encodeURIComponent(this.classUri) | ||
| } | ||
| url += "/instances" + (page!==null || size!=null ? "?"+params : ""); | ||
| return url | ||
| } | ||
|
|
||
| #isClassURISet(){ | ||
| return this.classUri.length > 0 | ||
| } | ||
|
|
||
| #openPopUpDetail(data){ | ||
| $.facebox(() => { | ||
| let uri = data[0] | ||
| let types = data[1] | ||
| let properties = data[2] | ||
|
|
||
| $.facebox( new InstanceDetails(this.ontologyAcronym, uri , types , properties).render().html()) | ||
| }) | ||
| } | ||
| } | ||
|
|
||
|
|
||
| class InstanceDetails{ | ||
|
|
||
| constructor(ontology, uri , types , properties) { | ||
| this.uri = uri | ||
| this.types = types | ||
| this.properties = properties | ||
| this.ontology = ontology | ||
| } | ||
|
|
||
| render(){ | ||
| console.log("render details") | ||
| console.log(this) | ||
| const toLink = function (uri, href) { | ||
| if(isALink(uri)) | ||
| return `<a id="${uri}" href="${href}" title="${uri}" target="_blank">${getLabel(uri)}</a>` | ||
| else | ||
| return uri | ||
| } | ||
| const getPropertyHref = function (uri){ | ||
| return `?p=properties` | ||
| } | ||
| const getInstanceHref = function (uri) { | ||
| return `?p=instances&conceptid=${encodeURIComponent(uri)}` | ||
| } | ||
| const getClassHref = function (uri) { | ||
| return `?p=classes&conceptid=${encodeURIComponent(uri)}` | ||
| } | ||
|
|
||
| let container = $(`<div> | ||
| <h4>Details of ${toLink(this.uri , "javascript:void(0)")} of type : ${this.types.map(x => toLink(x , getClassHref(x)))}</h4> | ||
| </div>`) | ||
| let table = $(`<table class='zebra' style='width: 100% ; min-width: 60vw'> | ||
| <thead> | ||
| <tr> | ||
| <th>Property name</th> | ||
| <th>Property value</th> | ||
| </tr> | ||
| </thead> | ||
| </table>`) | ||
|
|
||
| let tbody = $(`<tbody></tbody>`) | ||
| delete this.properties["http://www.w3.org/1999/02/22-rdf-syntax-ns#type"] | ||
| Object.entries(this.properties).forEach((x) => { | ||
| let row = `<tr><td>${toLink(x[0], getPropertyHref(x[0]))}</td><td>${x[1].map(x => toLink(x,getInstanceHref(x))).join(',')}</td></tr>` | ||
| tbody.append(row) | ||
| }) | ||
| table.append(tbody) | ||
| container.append(table) | ||
| return container | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| class InstancesController < ApplicationController | ||
|
|
||
| def index_by_ontology | ||
| logger.debug params[:ontology].inspect | ||
| custom_render LinkedData::Client::HTTP.get("/ontologies/#{params[:ontology]}/instances", get_query_parameters , raw:true) | ||
| end | ||
|
|
||
| def index_by_class | ||
| custom_render LinkedData::Client::HTTP | ||
| .get("/ontologies/#{params[:ontology]}/classes/#{CGI.escape(params[:class])}/instances", | ||
| get_query_parameters, raw: true ) | ||
|
|
||
| end | ||
|
|
||
| def show | ||
| inst = LinkedData::Client::HTTP | ||
| .get("/ontologies/#{params[:ontology]}/instances/#{CGI.escape(params[:instance])}", | ||
| get_query_parameters, raw: true) | ||
|
|
||
| render json: JSON.parse(inst) | ||
| end | ||
|
|
||
| private | ||
| # json render + adding next and prev pages links | ||
| def custom_render(instances) | ||
| instances = JSON.parse(instances) | ||
| if (instances.respond_to? :links) && (!instances.respond_to? :errors) | ||
| instances.links = { | ||
| nextPage: get_page_link(instances.nextPage), | ||
| prevPage: get_page_link(instances.prevPage) | ||
| } | ||
| end | ||
|
|
||
| render json: instances | ||
| end | ||
|
|
||
| def get_page_link(page_number) | ||
| return nil if page_number.nil? | ||
|
|
||
| if request.query_parameters.has_key?(:page) | ||
| request.original_url.gsub(/page=\d+/, "page=#{page_number}") | ||
| elsif request.query_parameters.empty? | ||
| request.original_url + "?" + "page=#{page_number}" | ||
| else | ||
| request.original_url + "&" + "page=#{page_number}" | ||
| end | ||
| end | ||
|
|
||
| def get_query_parameters | ||
| params = request.query_parameters.slice(:include, :display, :page, :pagesize) || {} | ||
| params[:include] = 'all' unless params.has_key? :include | ||
| params | ||
| end | ||
| end |
Oops, something went wrong.