Code Monkey home page Code Monkey logo

grapholscape's Introduction

Grapholscape logo
Grapholscape

Advanced web viewer for ontologies written in GRAPHOL.

DemoFeaturesWhat is Graphol?DocumentationQuick StartCredits

npm install grapholscape

Features

Grapholscape provides advanced and interactive tools to visually inspect all components of the ontology: you can search for predicates, filter elements on the diagram and get information about each element on the screen.

  • new Path rendering mode: explore your custom path in the ontology graph, start from a single class and explore incrementally step by step.
  • Simplify your ontology:
    • Graphol-lite: summarized view avoiding too complex expressions
    • Floaty Mode: simplify further obtaining an extremely easy representation of the ontology
  • Search for entities and their instances through all diagrams contained in the ontology
  • Get detailed information about selected element
  • Get the OWL2 translation for selected element
  • Filter elements that are not necessary for your analysis
  • Multi-diagrammatic inspection that allows you to navigate through all diagrams that builds up the ontology

What is Graphol?

GRAPHOL is a visual language for developing ontologies and offers a completely graphical representation of ontologies to users, in order to be easy understood by people who are not skilled in logic. Read more
For building ontologies in Graphol please check our visual editor: Eddy.

You can try it here or build it locally, then select an example or drop your custom .graphol file in the box on the right side.

Quick Start

For a more detailed explanation please check the documentation and the getting started guide.

Install it via npm:

npm install grapholscape

Basic initialisation with UI widgets.

import { fullGrapholscape } from 'grapholscape'

const grapholscape = await Grapholscape.fullGrapholscape(file, container)
grapholscape.showDiagram(0)

Note : file can be an object of the Web API interface File or a String representing the .graphol file to be displayed.

Once the initialization phase is done, the promise will return a Grapholscape object that can be used to perform actions on the tool. In the example we saw the method showDiagram(0). For the complete api please check Grapholscape Class API.

Information about entities, namesapaces and diagrams are stored in Grapholscape.ontology. Read More in Ontology.

It is possible to pass also a config object to define custom default settings. Read more: configuration.

Build it locally

Install Node and npm.

Clone the repository with

git clone https://github.com/obdasystems/grapholscape.git

Install dependencies:

npm run install

Build in dev/debug mode:

npm run start

Build Instructions

Install npm and Node.js and run npm install before using npm run.

Run npm run <target> in the console. The main targets are:

  • start : builds for development (no transpiled), watch for changes and serve demo on http://localhost:8000
  • build : builds for production (minified and transpiled with babel)
  • doc: generate documentation at docs/generated and copy static demo inside it
  • deploy : publish whole generated documentation in docs/generated folder to gh-pages branch from which the github page of the project is served
  • test: run all test suites
  • clean: clean dist and temp folder

Release Instructions

  1. Use npm version [ver] Please review built files and try out demo
  2. Push the release: git push && git push --tags
  3. Publish to npm: npm publish
  4. Create a release on Github from the latest tag
  5. Run PUBLISH_DOC github action to deploy the updated documentation

Release a snapshot test version

  1. Use npm run snapshot
  2. Publish using snapshot tag: npm publish --tag snapshot

To install latest snapshot version use npm i grapholscape@snapshot

Credits

Based on cytoscape.js.

grapholscape's People

Contributors

dependabot[bot] avatar giacomoronconiobda avatar gianluca-pepe avatar mariarosariafraraccio avatar mnamici avatar picorana avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

Forkers

a1ip

grapholscape's Issues

Eliminare progetto

Inserire nella schermata iniziale un pulsante in corrispondenza di ciascun progetto per eliminarlo (simile a quanto succede in Eddy).

Schermata 2019-12-17 alle 11 03 04

Schermata 2019-12-17 alle 11 03 10

Grapholscape viene inizializzato solo una volta

Una doppia inizializzazione di Grapholscape in una finestra genera la seguente eccezione:

Can not register `popper` for `core` since `popper` already exists in the prototype and can not be overridden
    at error (cytoscape.cjs.js:811)
    at overrideErr (cytoscape.cjs.js:31171)
    at setExtension (cytoscape.cjs.js:31176)
    at Function.extension (cytoscape.cjs.js:31383)
    at cytoscape (cytoscape.cjs.js:31506)
    at register (cytoscape-popper.js:385)
    at Function.push../node_modules/cytoscape/dist/cytoscape.cjs.js.cytoscape.use (cytoscape.cjs.js:31516)
    at new FloatingGscapeRenderer (grapholscape.esm.js:18153)
    at new GrapholscapeView (grapholscape.esm.js:19075)
    at GrapholScape.init (grapholscape.esm.js:21322)
    at new GrapholScape (grapholscape.esm.js:21312)
    at Graphol._this.loaded (GrapholscapeNpm.js:22)
    at MastroApi.js:195

[Filtri] Key

Aggiungere per tutt'e tre i layout, la possibilità di filtrare via le Keys.

Funzionalità nei diagrammi

Mi sono reso conto che al momento non vengono visualizzate le funzionalità nei diagrammi (nè di ruoli nè di attributi).
Sto facendo riferimento alla versione di Grapholscape che sta dentro Monolith.

E' possibile che sia un effetto del passaggio alla v3 di Eddy, in cui le funzionalità sono definite un pò diversamente nel file, e non ci siamo allineati su questo?

[Search Widget] Titolo

Cambiare la scritta di default nel widget da "Search Predicates..." a "Search Entities..."

Il termine standard (o quantomeno quello più usato dagl istrumenti vicini alla comunità OWLese è Entity, non Predicate.

P.S. Per il momento assegno le issue di Grapholscape a Manuel (così almeno qualcuno le vede), ovviamente poi le smisteremo opportunamente.

Allineamento del testo di una descrizione

Come si vede nello screenshot, l'allineamento del testo della descrizione dopo la prima riga è spostato verso il bordo sinistro del widget, invece di essere allineato con la prima riga.

Schermata 2022-01-15 alle 11 51 22

Straight Arrows Skewed

Some straight arrows are sometimes not perfectly straight and appear to be skewed.

To Reproduce

You can find an example in the LUBM ontology: arrows connecting person and domains of attributes age and email, are a bit skewed and it gets more clear selecting them.

Details

I observed this bug only on vertical straight arrows with no intermediate breakpoints and only on arrows whose endpoints (one or both) are not in the node's center.
In all cases that I analyzed so far the endpoints have the same X-position, meaning that arrows connecting them should be vertically straight.

[Filters] - I toggles per i filtri potrebbero essere ambigui

Il comportamento dei toggle per i filtri attualmente è inverso allo stato del filtro stesso.
Il toggle è visivamente attivato quando il filtro corrispondente è disattivato e questo potrebbe creare qualche problema per gli utenti.

Durante il refactoring (6a29e2a) poi ho aggiunto un toggle 'all' per attivare tutti i filtri contemporaneamente e questo ha il comportamento inverso agli altri: quando viene attivato tutti i filtri devono essere attivati, che visivamente si traduce nella disattivazione di tutti i toggle.

filters

Credo che usando i toggle la scelta sia fondamentalmente tra rappresentare visivamente lo stato del filtro oppure la presenza o meno sul grafo dei nodi coinvolti, attualmente grapholscape usa la seconda opzione. È il caso di cambiare rappresentazione?

Predicate nodes that are left disconnected are not filtered from the diagram

Concept and role nodes that are left disconnected from the rest of the diagram as a result of applying a filter condition (e.g. forall) should be filtered as well.
This only applies to nodes that are left without any outgoing/incoming edge, and does not apply to entire disconnected subcomponents of the diagram.

Traduzione OWL del range degli attributi

Non si è in grado di visualizzare la traduzione dell'esistenziale sul range di un attributo perchè per tradurre gli esistenziali Grapholscape usa ObjectSomeValuesFrom e non Object/DataPropertyDomain/Range.
Per tradurre il range di un attributo dovrebbe quindi esprimere in OWL l'inverso di un attributo, il che non è possibile.

In generale si dovrebbe quando possibile (anche splittando l'arco di equivalenza) usare gli assiomi ObjectPropertyDomain, ObjectPropertyRange, DataPropertyDomain, e DataPropertyRange,

Arco InstanceOf

Per ovviare al problema delle etichette "instanceOf" sugli archi appunto di InstanceOf, in Eddy abbiamo modificato la forma dell'arco, che non è più un arco di inclusione semplice con l'etichetta scritta sopra, ma adesso è un arco puntato con una freccia bianca alla fine.

Questo è come è ora:
Schermata 2021-08-06 alle 16 08 41

Questo è con il rendering vecchio:
Schermata 2021-08-04 alle 09 16 57

Bisognerebbe quindi anche in Grapholscape aggiornare il rendering di questo tipo di archi.
Allego l'ontologia da cui sono tratti gli screenshot così c'è un esempio.

WolfOil_v1.0.3.graphol.txt

Visualizzazione a pallocchi per ontologie OWL

Implementare il supporto per la visualizzazione a pallocchi delle ontologie OWL.
Quando l'ontologia non è stata disegnata direttamente in Graphol, sarebbe comunque comodo (anche in previsione di uno strumento di query) poter avere la visualizzazione Floaty, che dovrebbe essere più semplice, perchè non ha il problema del posizionamento, e non deve disegnare assiomi complessi.

Frecce degli attributi non centrate

Issue forse legata alla #5

Mi pare che tutte le frecce di attributi per i quali l'arco non è agganciato al centro del nodo classe vengono storte, o nell'aggancio con il quadratino bianco (layout Graphol), oppure proprio con l'attributo (layout Graphol-Lite).

Schermata 2021-10-21 alle 11 50 57

Schermata 2021-10-21 alle 11 53 21

Mantenere la viewport fissa al cambio di diagramma?

Attualmente la viewport viene reimpostata e centrata sul diagramma ad ogni cambio di diagramma e/o renderer (graphol, lite, float).
Sarebbe più comodo lasciare la viewport ferma al cambio diagramma in modo che quando si torna su un diagramma la "posizione" sia la stessa dell'ultima interazione?

Ho introdotto questa cosa in d8c3faf, la lascio?

[Floaty] Arco object properties

Modificare l'arco delle object properties, mantenendo uguale il colore, ma facendo diventare il quadratino blu del nodo target una freccia blu.

Schermata 2021-10-21 alle 11 26 28

I temi custom sono basati sul tema corrente

In caso di colori non definiti in un tema personalizzato, questi cambiano in base al tema selezionato prima di selezionare il tema custom. Dovrebbero invece essere impostati sulla base del tema light.

Workaround: definire sempre tutti i colori definiti in wiki/Themes.

[LitElement] - Class constructor must be invoked with |new|

Inserendo un widget di prova ottengo l'errore: class constructors must be invoked with |new|.
Nel commit 0749f12 provo ad aggiungere due widget ma con entrambi i metodi ottengo lo stesso errore.

ui.js

import GrapholscapeWidget from './grapholscape_widget'

export default function createUi () {
  const widget = document.createElement('grapholscape-widget')
  this.container.appendChild(widget)

  const widget2 = new GrapholscapeWidget()
  this.container.appendChild(widget2)
}

Leggendo in questa issue lit/lit-element#54 la situazione mi sembra abbastanza confusionaria e potrebbe essere legato a babel, non ne sono del tutto sicuro comunque.

[Floaty] Visualizzazione di label sugli archi con gli a capo

Come da oggetto, se nella label di una object property c'è un a capo, quindi ad esempio così:

Schermata 2021-09-28 alle 18 06 44

allora il rendering dell'etichetta in modalità Floaty ha dei problemi, perchè piazza tutt'e due le righe una sopra all'altra (o comunque fa qualche altra cosa che compromette il rendering), così:

Schermata 2021-09-28 alle 18 08 13

Traduzione OWL di range di attributi

Non si è in grado di visualizzare la traduzione dell'esistenziale sul range di un attributo perchè per tradurre gli esistenziali Grapholscape usa ObjectSomeValuesFrom e non Object/DataPropertyDomain/Range.
Per tradurre il range di un attributo dovrebbe quindi esprimere in OWL l'inverso di un attributo, il che non è possibile.

In generale si dovrebbe quando possibile (anche splittando l'arco di equivalenza) usare gli assiomi ObjectPropertyDomain, ObjectPropertyRange, DataPropertyDomain, e DataPropertyRange,

Ricerca per Label

Attualmente Grapholscape supporta una ricerca nell'Explorer Widget per Label, ma sembra funzionare solo per la prima label in ciascuna lingua (o comunque, se non la prima, una sola).

WolfOil.graphol.txt

Nell'ontologia allegata, sono definite queste label per la classe woc:Vehicle:

AnnotationAssertion(rdfs:label woc:Vehicle "Automobile"@it)
AnnotationAssertion(rdfs:label woc:Vehicle "Vehicle"@en)
AnnotationAssertion(rdfs:label woc:Vehicle "Veicolo"@it)

Schermata 2021-07-09 alle 16 05 45

Se setto la lingua a "EN", e cerco Vehicle, la classe viene trovata; se setto la lingua a "IT" e cerco Veicolo, la classe viene trovata, ma se cerco Automobile, allora la classe NON viene trovata.

Schermata 2021-07-09 alle 16 05 27

Schermata 2021-07-09 alle 16 05 35

Il sistema dovrebbe supportare una ricerca su tutte le label definite per le entità dell'ontologia.

Wiki links for Individuals

For individual nodes, remove the "Wiki" field in the Detail menu.
The wiki system in Mastro Studio currently does not support individuals in the Ontology Documentation module, so the links to the corresponding pages are broken.

[Info Widget] spaziatura

C'è un problema di spaziatura nel widget che causa l'andata a capo del pallino "Project IRI".

Già che ci siamo, capiamo se quella dicitura "Project IRI" ha qualche senso. La mia idea è che non ne abbia, e si può togliere del tutto.

Entity types

In the Detail menu, the entity types are currently "concept", "role", "attribute".
I think it's better to adopt the OWL alphabet, and use, respectively, "class", "object property", "data property".

Archi invisibili in caso di breakpoint sul bordo di un nodo

Gli archi con un breakpoint sul bordo del nodo target/source, non vengono al momento visualizzati in grapholscape. Cytoscape ha problemi con questo tipo di breakpoint.

Possibile soluzione: modificare il parametro weight del breakpoint in modo da allontanarlo dal nodo.

Allineamento delle label

Mi pare che l'allineamento delle label in Grapholscape sia tale che in sostanza l'ultima riga sia sempre centrata verticalmente rispetto all'elemento (in particolare le classi quindi).
Questo non comporta particolari problemi se la label è al massimo su due righe.

Se invece ci sono due a capi o più (quindi tre o più righe), l'allineamento fa sì che la label esca "da sopra" rispetto al perimetro delle classi, pur avendo spazio sotto (cosa che ad esempio in Eddy non avviene).

Allego screenshot per mostrare qualche esempio.
Credo che si dovrebbe impostare l'allineamento in modo tale che il centro della label sia allineato con il centro dell'elemento.

Ovviamente tutto ciò a meno che non sia l'utente manualmente a spostare la label (a quel punto sono cavoli suoi).

Schermata 2021-07-15 alle 16 22 38

Schermata 2021-07-15 alle 16 22 50

Schermata 2021-07-15 alle 16 23 25

Visualizzazione semplificata dell'ontologia

Feature tracking per la visualizzazione semplificata dell'ontologia.

✔️ Done | 🔸 Pending | ❔ Not Clear

Costrutti Eliminati

Elenco costrutti che vengono eliminati usando le procedure di filtraggio, andando quindi a filtrare ricorsivamente i vicini che perdono di significato.

Costrutto Stato Commit
DataTypes ✔️ 594db5d
Quantificatori Universali ✔️ 594db5d
Esistenziali Qualificati ✔️ 594db5d
Esistenziali con cardinalità ✔️ 124c7d8
Role Chain ✔️ 124c7d8
Negazioni ✔️❔ 594db5d
Gerarchie complesse* ✔️ 1474d85
Enumerazioni ✔️ 7a5c8c9

* Nodi costruttori (or/and/disjoint-or) con altri nodi costruttori in input

Semplificazione di Costrutti

Elenco delle trasformazioni applicate a costrutti e/o assiomi.

Esistenziali

Stato: ✔️❔ | Commit: a5db64c

Descrizione

  • Tutti gli archi non di tipo input collegati all'esistenziale vengono concatenati all'arco di tipo input connesso alla property (object/data).
    Il nodo esistenziale viene quindi eliminato e la sua posizione diventa un breakpoint aggiuntivo per l'arco concatenato.

    • Domain: l'arco risultante ha come target la property con connettore square-hollow sulla property.
    • Range: l'arco risultante ha come target il nodo con identità concept con connettore square-filled sulla property.

Not Clear

  • Da definire il comportamento in caso di archi di tipo input in uscita dall'esistenziale. Al momento vengono ignorati ed eliminati insieme al nodo, questo causa però la perdità di significato e l'eliminazione di nodi adiacenti.
  • Da definire come gestire i casi con isa tra esistenziali.

Unioni - [OR]

Stato: ✔️ | Commit: 1474d85 - 10a81a5

Descrizione

  • Gerarchie:
    • Vengono trasformate usando una notazione "UML/ER-like". Tutti gli archi di tipo input in ingresso al nodo union diventano archi solid.
    • Archi inclusion in uscita dal costruttore e quelli equivalence trasformati in "UML/ER-like".
    • Archi inclusion in entrata al costruttore eliminati.
  • Tipizzazioni:
    vengono replicate sulle classi coinvolte.

Not Clear

  • Da definire la modalità con cui replicare le tipizzazioni, vedere anche sezione Attributi.
  • Da definire l'espressione o meno della completezza.
  • Da definire "UML/ER-like"

Intersezioni [AND]

Stato ✔️❔ | Commit: 1474d85 - 10a81a5

Descrizione

  • Gerarchie:
    • Unione a sinistra di una relazione isa (i.e. source di un arco inclusion) eliminata
    • Unione a destra di una relazione isa scomposta in n archi inclusion, uno per ogni classe in input all'intersezione
  • Tipizzazioni:
    • Gli attributi vengono replicati sulle classi in input

Not Clear

  • Da definire come gestire le tipizzazioni di ruoli, al momento vengono eliminate
  • Eventuali attributi definiti su intersezioni coinvolte a sinistra di relazioni isa vengono persi.

Attributi

Stato: ✔️ | Commit: a5db64c - 1474d85 - 10a81a5

Descrizione

  • Dominio semplificato - vedere sezione Esistenziali
  • Range eliminato - vedere sezione Costrutti Eliminati (Datatypes)
  • Attributi spostati nella posizione del nodo dominio (sul quadratino bianco)
  • Gli attributi definiti su nodi costruttori vengono replicati sulle classi in input usando il layout cola

Not Clear

  • Da definire le modalità con cui spostare gli attributi evitando overlapping.

Ruoli Inversi

Stato: ✔️ | Commit: e2d5bf7

Descrizione

  • I nodi role-inverse vengono sotituiti con archi inclusion con label inverse Of.
    Tutti i nuovi archi puntano al ruolo che era collegato in input all'esagono inv.
  • Nel caso di più ruoli coinvolti, l'esagono inv diventa un "dummy point" con label inverse Of andando a sostituire i label dei nuovi archi che in questo caso non avranno label. Si evita così overlapping di più labels.

Bug tracking for lite-mode integration

Problemi principali

  • Inclusioni tra data properties
    Sulle data properties replicate in lite-mode vengono perse le inclusioni.

Problemi risolti/minori/facili - Di quelli risolti non ho ancora fatto il push.

  • Cambio di renderer
    viene fatto con mount() e unmount() di cytoscape ma sono presenti solo nelle ultime versioni che hanno un bug con firefox che fa degradare le prestazioni man mano che usa il tool. cytoscape/cytoscape.js#2367
    Questo cambio generava inoltre un errore di cui non ho capito molto. Per ora ho risolto usando un container per ogni renderer mostrando di volta in volta quello giusto evitando così mount() e unmount().
  • Ricerca non mostra tutti i risultati
    La ricerca veniva fatta sulle label spezzate su più linee.
    Ho inoltre aggiunto la ricerca delle singole parole ( cercando "cane gatto" si trovano tutte le entità che contengono "cane" o "gatto" nella label)
  • Entity details widget
    mostra solo "functional" e non le altre possibili proprietà.

Invertiti il rendering PrefixedIRI e Label

Mi pare che le due modalità di rendering siano invertite: se scelgo Label vengono fuori le IRI prefissate, e viceversa.

L'ontologia che sto usando è quella allegata alla issue #55

Schermata 2022-01-04 alle 11 09 01

Schermata 2022-01-04 alle 11 08 53

[Graphol-floaty] Ruoli in isa

I ruoli che sono figli di altri ruoli e non hanno dominio/range esplicitato non devono andare persi.
Aggiungere arco ruolo con stesso dominio/range del padre

Comandi per esplorazione/manipolazione incrementale separati da entity details?

screen-entity-details

L'entity details nella modalità incrementale/virtual KG explorer avrà circa questa forma.
Il dubbio è se inserire qui dentro i comandi per espandere le gerarchie/rimuovere nodi o se metterli in un widget apposito.

La sensazione che ho è che questo widget stia diventando troppo "carico" di informazioni e che in fondo i pulsanti per le gerarchie e rimozione di un nodo non siano dei dettagli di un'entità e possano anche vivere da soli ad esempio nel menu contestuale.

Using OWL files instead of graphol files

Is there any way that I can use grapholscape with *.owl files instead of *.graphol files, or is there a recommended convertor that can convert our owl files to graphol files?

I'm trying to use this with my OWL files as input, any help would be appreciated, thank you in advance!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.