ali1k / ld-r

Linked Data Reactor (LD-R)

Linked Data Reactor

Linked Data Reactor (LD-Reactor or LD-R) is a framework to develop reactive and reusable User Interface components for Linked Data applications. LD-Reactor utilizes Facebook's ReactJS components, Flux architecture and Yahoo!'s Fluxible framework for isomorphic Web applications. It also exploits Semantic-UI framework for flexible UI themes. LD-Reactor aims to apply the idea of component-based application development into RDF data model hence enhancing current user interfaces to view, browse and edit Linked Data.

Quick Start

Installation

You should have installed NodeJS, npm and Webpack on your system as prerequisite, then:

Clone the repository: git clone https://github.com/ali1k/ld-r.git

and simply run ./install script

Configuration

Fill in general settings for your application at configs/general.js.

Fill in appropriate values for server port, URLs of your SPARQL endpoint and DBpedia lookup service at configs/server.js.

Fll in appropriate settings for your UI reactors at configs/reactor.js.

Fill in appropriate settings for the faceted browser at configs/facets.js.

Run in Production Mode

npm run build

check server at localhost:4000

Development Mode

npm run dev

check server at localhost:3000

Documentation

Check out http://ld-r.org for detailed documentation.

ld-r's Issues

resource_property depth 2: specific settings for certain class?

Is it possible to use the 'resource_property' depth 2, to make specific settings for all resources of a certain class? I’ve tried the following without avail (this worked if I changed the resource to a specific resource instead of a type):

        resource_property: {
            'https://w3id.org/bot#Element': {
                treatAsResourceType: 1,
                'http://www.w3.org/1999/02/22-rdf-syntax-ns#type': {
                    //settings for the property rdf:type of the resource bot:Element
                }
           }
       }

allow adding custom formatting to facets/property configs

e.g. for date, as config user can give a formatting and then the results will be formatted accordingly.
This is helpful because:

• saves the time creating a new component per format
• we don;t need to add a new property to triple store e.g. to have the date year or month
• allows flexible configuration

option to modify/add language tags and datatypes for literals

Option for users, while modifying data literals, to add/modify language tags and (xsd and custom) datatypes

deploy on Heroku

I've noted that during deployment on Heroku, after the LD-R app is build and the changes are committed git commit . -m 'ld-r ready', I get a long list of errors in build/js/main.js, almost all of them saying strings must use singlequote quotes . Some other errors say expected indentation of 8 spaces but found 0.

Managed to solve this by adding the--no-verify flag, to bypass the husky checks. You might want to solve this, or add this to the Heroku tutorial

Remove config files from gitignore

The .gitignore file contains the config files. I get why this is here, to avoid committing credentials. But editors such as atom will hide these files, making it annoying to work with without some fiddling around.
Perhaps use a commit hook for these files instead? (e.g. using https://www.npmjs.com/package/precommit)

What features does ld-reactor include?

Hi,

I'm about to begin a project using data from a SPARQL server and possibly React myself and found ld-reactor. What is the goal of this project? Editing generic linked data? What features are currently supported?

Sadly, I couldn't get ld-reactor to work with my local instance of Jena/Fuseki 2 (I get a bunch of parse errors, if you're interested in this, I can easily give you more information), so I can't really test this myself.

facet browser: order properties in dropdown lists

Is it possible to order properties in the facet browser if you use the dropdown lists (categories)?

warning: promise was not returned

I get both in LD-R v1.1.12 and v1.2.2 on Windows 10 constant warnings in the console regarding promises, in the style of:

(node:18364) Warning: a promise was created in a handler at Users/USER-NAME/Documents/LD-R/ld-r18/plugins/dynamicConfiguration/DynamicConfigurator.js:922:17 but was not returned from it, see http://goo.gl/rRqMUw
    at new Promise (C:\Users\USER-NAME\Documents\LD-R\ld-r18\node_modules\bluebird\js\release\promise.js:79:10)

allow embedding LD-R components as widgets in other applications

there are two proposed ways:

• have unique URI with parameters for each component
• find a way to freeze/materialise components with their current state

Bower dependencies

Is there a reason not to use npm for bower deps? Afaik, shims and common libs are nowadays all available via npm. Removing bower would simplify installation and remove a dependency

Can LD-R be used to create new entities?

Hi,

This looks very exciting. It's great work indeed. One question: can LD-R be used at this point to create new objects or add new properties to an existing object (as opposed to editing existing properties)? I couldn't find any of this on the demo, documentation, or roadmap.

Thank-you!

Website needs a privacy policy

As the information collected about an 'user' includes Name, Organisation, and Email, which constitutes as private or personal information, the website should have a privacy policy.

show more button on facets does not work well in WYSIWYQ mode

on the initial load of queries, the facets do not behave well on 'show more' button. The reason is that the values are cherry-picked.

Clarification re internationalized UIs with ld-r

I guess this is really just a question.

Is ld-r already supporting internationalization with multiple languages? If not is it a future goal?

e.g. I noticed the ld-r.org Tasks in Progress list includes "Consider language tag in SPARQL queries"...

The app I've been thinking about switching to json-ld/rdf/sparql (potentially with the help of ld-r) currently supports english, french, and portuguese where we show different UI labels in the different languages depending on the browser locale.

I'm guessing the "Consider language tag in SPARQL queries" would address part of my need for internationalization. e.g. We have labels and corresponding values for dropdown widgets in our json database right now that I was assuming I'd transfer to RDF triples...

But how about e.g. in the tutorial where i see english only "label" properties in the reactor.js files.
Is there a goal that those too could eventually support different labels for different languages?

If these are future goals, any idea how long before such features get added?

Add a Map Object Editor

Reported by @mathib
When editing a geospatial value, it would be useful to have a map objectIEditor (selecting a location on a map)

option to delete a resource completely

An option in the reactor part, to delete a resource completely (= all triples where the resource is the object and subject) can be useful. Users now have to delete every triple from this resource, which can be cumbersome.

add support for infinite scrolling on facets

currently it is handled by 'show more...' buttons at the end of facets

add a timeline dataset viewer component for data which has temporal dimension

pick an existing timeline view and adapt it for React

SPARQL query is passed through GET for UPDATE requests

Hi Ali,

Hope all is well :)
I was playing around with LD-R yesterday, and noticed that if I have many properties the detail editor fails to update values. Same with numerous extensions for a new resource.

Digging around I found out that the query is passed in the URL even for POST requests, and can get truncated if it grows too large.

I replaced all instances of :
rp.post({uri: getHTTPQuery('update', query, endpointParameters, outputFormat)}).then(function(res){
with
rp.post({uri: getHTTPQuery('update', query, endpointParameters, outputFormat).split('?')[0], form: {query: query, format: 'application/sparql-results+json'}}).then(function(res){
in
services/resource.js

This works, but I am sure you'll have a more elegant fix in mind.

Cheers,
Antonis

Stardog v5 and up have separate read and write endpoint

Expected Behavior

I tried to configure the LD-R with a stardog database of v5.0.4 and added as in the basic example to server.js config a stardog dataset with 'http://localhost:5820/db-name/query'. After modifying the reactor.js file, I expected to be able to perform sparql updates on the properties.

Actual Behavior

After configuring the reactor.js, I could see the option to modify/delete/add new property, but the sparql update failed on the Stardog db. The stardog endpoint could only be read, and not updated. This is probably because since v5 of stardog, there are two endpoints: one solely for reading and one solely for updating (sparql insert/delete). (https://community.stardog.com/t/query-and-update-endpoint-stardog-5/530)

Steps to Reproduce the Problem

1. Use a stardog endpoint (v.5 or higher)
2. Add a stardog database in server.js, ending with /query
3. Make the resources modifiable/deletable/addable in reactor.js
4. Add the app and try to modify/delete/add a resource

Specifications

• Version: LD-R 1.1.11
• Platform: Windows 10

default values containing prefixes are not directly recognized by LD-R

In the case of a new property value, where the reactor config has a 'defaultValue' of 'ex:someValue' and 'prefixBasedInput' is active for that property, LD-R doesn't recognize that 'ex' is a prefix, unless the user starts to edit the default value. This comes because the app looks for prefixes only if the ObjectIEditor component is active. If the default value was equal to 'http://example.org/someValue', the first part is correctly recognized by LD-R as the prefix 'ex'.

It would be easier if it's also possible to add prefixes in default values in configs. I think that it should by default look for a prefix in the list (prefixes.js). If it doesn't exist, it treats the input as a literal.

add support for storing multi-stage browsing environment

at the moment, the save can only store one single environment

allow users to configure the NE annotator

• change the confidence parameter
• choose the language
• add Stop words

Add a timeline component

the component is useful to visualize data where start and end date are given.

Nesting property categories

Is it possible to nest and/or order the property categories defined in the facets config?

add more documentation and tutorials

reactor component: option to sort properties

Properties per subject resource do now seem randomly ordered in the reactor component. The reactor component should be modified (or a new component should be made), to have options to sort properties in alphabetical order, custom order, etc.

new property: autocomplete list of properties per resource + default value

Is it possible to define per resource (or type of resource) an autocomplete list of suggested properties? This would be useful when creating a new property for a certain resource. I know it is possible to add properties in the 'autocompletes.js', but this is one big list that is reused for every resource in every dataset.

When creating a new property of a certain resource, there is also no default value available, as is the case when adding a new value for an existing property.

facet browser: not possible to query numbers/booleans/...

When I want to query resources with literal values that are not strings (e.g. integers, booleans, etc.), I cannot query them. If I look to the query, I see that LD-R treats the value in the SPARQL query as a string instead of a number/boolean/... :

SELECT DISTINCT ?s  ?title   WHERE {
  {
    SELECT DISTINCT ?s WHERE {
      ?s rdf:type ?type .
      FILTER (?type=<https://w3id.org/bot#Site> || ?type=<https://w3id.org/bot#Building> || ?type=<https://w3id.org/bot#Storey> || ?type=<https://w3id.org/bot#Space> || ?type=<https://w3id.org/bot#Element>) ?s <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> ?v1.
      ?s <https://w3id.org/props#elevation_simple> ?v2.
      FILTER ((?v1=<https://w3id.org/bot#Element>) && (?v2="""1.399999999999999""")) 
    }
    LIMIT 30 OFFSET 0
  }
  OPTIONAL {
    ?s rdfs:label ?title .
  } OPTIONAL {
    FILTER langMatches( lang(?title), "EN" )
  }
}

facet browser: support for inverse properties

Is there an option for the facet browser to include inverse property paths? I have the following query in mind, where I want to see the variable 'element' in the found resources by the facet browser:

?element ^bot:adjacentElement ?zone ;
      bot:hostsElement ?otherElement .

It should be rather easy to just have inverse property paths in the facet browser, I feel. This would also be useful when defining more complex 'property chains'.

Add docs on how to use ld-r as dep

The getting started wasn't what I expected it to be. Instead of cloning ld-r and building on top of that, I expected it to explain how to use ld-r as dependency in my own project

provide the user with templates when creating a new resource

reported by @mathib

Is there an option to provide the user with templates when creating a new resource? This template could contain a form with minimum properties and optional properties. I think this could be done with a popup window when the user wants to create the new resource?

aggregates in reactor: deleting 2 or more values when using Stardog fails

When I use the propertyReactor in 'aggregate' mode with the aggregate viewer and editor, I get the option to select multiple values that can be deleted. Whenever I select 2 or more and want to delete them, I get an error from my Stardog db, because the query send by LD-R contains two DELETE-WHERE clauses, which is not allowed by Stardog (but is accepted in the case of Virtuoso). LD-R should look to the dataset 'endpoint' setting in the server.js config and treat the query different in the case of a Stardog enpoint. Alternatively, the SPARQL delete query can also be combined in one DELETE-WHERE query, that is acceptable for every type of endpoint.

Add support for GraphDB triplestore

Hi Ali,

I've came accross GraphDB triplestore recently, which includes a DBaaS version. I've found it very useful for setting up a small and free SPARQL endpoint on a cloudserver. This could be ideal for #demoing some LD-R applications running on Heroku :)

Some props:

• full SPARQL 1.1 support
• implements RDF4J framework
• endpoint (desktop version): http://localhost:7200/repositories/myDB
• GraphDB DBaaS

add support for authentication-based (protected) SPARQL endpoint

currently it only works on open SPARQL endpoints

add support for LDF (linked data fragments) endpoints

need to deal with streaming query result

support for rdfstore.js

Suggestion for enhancement:
For simple static demos, a client-side, in-memory RDF store would be useful (e.g. rdfstore.js). The user only has to provide a valid RDF file (reading from a local or online file, e.g. hosted on Github as Raw Githubusercontent, Dropbox with Direct Link), which can then be browsed using LD-R. No reasoning and federated querying is supported by rdfstore.js, so it would only be useful to simply demonstrate a small dataset and how it would look in LD-R

Issue with loading of the map and panning the map

reported by @mathib

When viewing a map in the reactor browser, the map doesn’t always load directly (I had to click to edit it, before it turns visible). Additionally, when the user wants to pan the map, it automatically goes in edit mode. I tried to add the ‘noFocus’ setting in the reactor config for the property (objectIEditor is ‘BasicIndividualInput’), but to no avail.

fix the issue with react-hot-loader

after upgrading the react-hot-loader npm package, it doesn't behave well! need to fix that

error while runing "npm run build "

C:\app\ld-r>npm run build

[email protected] build C:\app\ld-r
webpack --config ./webpack/prod.config.js && NODE_ENV=production npm start

C:\app\ld-r\webpack\prod.config.js:1
(function (exports, require, module, __filename, __dirname) { let webpack = require('webpack');
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at module.exports (C:\app\ld-r\node_modules\webpack\bin\convert-argv.js:80:13)
at Object. (C:\app\ld-r\node_modules\webpack\bin\webpack.js:39:40)
at Module._compile (module.js:409:26)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\xxxx\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v4.4.3
npm ERR! npm v3.8.7
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: webpack --config ./webpack/prod.config.js && NODE_ENV=production npm start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack --config ./webpack/prod.config.js && NODE_ENV=production npm start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the linked-data-reactor package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config ./webpack/prod.config.js && NODE_ENV=production npm start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs linked-data-reactor
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls linked-data-reactor
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\app\ld-r\npm-debug.log

property values: option to force LD-R to recognize it as literal or URI

While entering new values for properties, LD-R checks the input and treats this input the same as the first input was treated. The first input value of a certain property of that resource, is classified behind the screens as 'literal' or 'URI', by looking for 'http://' or 'https://' I think.

This can give some strange results if the first value of e.g. a property 'foaf:name' was 'http://example.com/john' and thus classified by LD-R as being a URI. The property 'foaf:name' only points to literal values according its ontology. If someone enters "john" as a string, LD-R somehow also thinks this is a URI.

Would it be possible for LD-R to allow users to define in the configs if a certain property should have literals or URI's as object. Another approach could be to load this information from the ontology file(s) and looking if a certain property is an owl:ObjectProperty or an owl:DatatypeProperty. There could even be an option to highlight if a user wrongly entered a URI instead of a literal while the property is a DatatypeProperty (or the other way around: a literal for an ObjectProperty).

admin cannot see other registered users when using Stardog

When allowing other users to register to the LD-R instance, it is impossible for the admin to see new or existing applicants. The 'user list' always says: ‘0 registered users’, even if I know there is an active other user (+ checked in the DB). The console outputs the following:
{ StatusCodeError: 400 - "{\"message\":\"Variable 'subject' in projection is not present in GROUP BY\",\"code\":\"MalformedQuery\"}"

This might be something with the LD-R query that's not adapted for Stardog endpoints.

make toolbar buttons in the facets responsive

at the moment those buttons do not come in a good order when you change the browser windows size, they need to have responsive behavior

search in NER entity types sometimes goes into an endless loop and freezes the browser.

need to check what causes this.

add support for caching in the faceted browser

it will affect the performance dramatically.
Caching can occur in different levels: UIs, Web server or in th triple store

issue with dependencies in node_modules

Expected Behavior

An LD-R app that can run in dev mode and can be build on windows.

Actual Behavior

The webpack-dev-server respectively webpack module could not be found after plain install of the default repository:

> [email protected] dev C:\Users\USER-NAME\Documents\LD-R\ld-r3
> node ./webpack/dev-server.js

module.js:557
    throw err;
    ^

Error: Cannot find module 'webpack-dev-server'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\USER-NAME\Documents\LD-R\ld-r3\webpack\dev-server.js:1:86)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `node ./webpack/dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\USER-NAME\AppData\Roaming\npm-cache\_logs\2018-02-10T20_07_26_688Z-debug.log

If I check the packages in the local node_modules, I noticed that only the half of the packages are there compared to an older LD-R v1.1.9 app that was working (only in dev mode on windows, it could not be build). After manually copying the packages, I could get the LD-R v1.1.11 app running in dev mode and I could build it on Windows.

Steps to Reproduce the Problem

1. Install the default LD-R web application from this repo following the Quick Start guide on a windows machine
2. Run the app in dev mode (npm run dev) or build it (npm run build:windows)

Specifications

• Version: LD-R v1.1.11
• Platform: Windows 10 (Node v9.4.0, npm v5.6.0, webpack v3.10.0 (globally installed))

Option for batch creation of property values

In the reactor part of LD-R, it would be useful to do batch creation of property values, e.g. based on a CSV file or RDF file

Pb with GraphDB

Hi,

I try to configure ld-r but although I indicate graphDB in my config file, I still have ClioPatria in my ldr repository (graphDB) ... I think I got rid of all mention of ClioPatria in the config files.

Specifications

• Version: last
• Platform: OS X
• Subsystem:

Thank you

building the app fails - unknown plugin "dev-expression"

Expected Behavior

A working Linked Data app after using npm run build

Actual Behavior

Following error was returned instead:

ERROR in ./node_modules/react-leaflet/es/index.js
Module build failed: ReferenceError: Unknown plugin "dev-expression" specified in "C:\\Users\\USER-NAME\\Documents\\LD-R\\ld-r (new)\\node_modules\\react-leaflet\\.babelrc" at 0, attempted to resolve relative to "C:\\Users\\USER-NAME\\Documents\\LD-R\\ld-r (new)\\node_modules\\react-leaflet"
    at C:\Users\USER-NAME\Documents\LD-R\ld-r (new)\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (C:\Users\USER-NAME\Documents\LD-R\ld-r (new)\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
    at OptionManager.mergeOptions (C:\Users\USER-NAME\Documents\LD-R\ld-r (new)\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
    at OptionManager.init (C:\Users\USER-NAME\Documents\LD-R\ld-r (new)\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\Users\USER-NAME\Documents\LD-R\ld-r (new)\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\Users\USER-NAME\Documents\LD-R\ld-r (new)\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\Users\USER-NAME\Documents\LD-R\ld-r (new)\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\Users\USER-NAME\Documents\LD-R\ld-r (new)\node_modules\babel-loader\lib\index.js:50:20)
    at Object.module.exports (C:\Users\USER-NAME\Documents\LD-R\ld-r (new)\node_modules\babel-loader\lib\index.js:175:20)
 @ multi react react-dom async fluxible fluxible-addons-react wicket/wicket fluxible-plugin-fetchr fluxible-router moment rc-calendar semantic-ui-react react-leaflet react-sigma lodash/collection lodash/string react-search-input classnames/bind chroma-js password-hash recharts
Child extract-text-webpack-plugin ../ld-r (new)\node_modules\extract-text-webpack-plugin\dist ../ld-r (new)\node_modules\css-loader\index.js!../ld-r (new)\node_modules\yasgui-yasqe\dist\yasqe.min.css:
       2 modules
Child extract-text-webpack-plugin ../ld-r (new)\node_modules\extract-text-webpack-plugin\dist ../ld-r (new)\node_modules\css-loader\index.js!../ld-r (new)\node_modules\rc-calendar\assets\index.css:
       2 modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --config ./webpack/prod.config.js && NODE_ENV=production npm start`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\USER-NAME\AppData\Roaming\npm-cache\_logs\2018-01-31T15_27_26_006Z-debug.log

Steps to Reproduce the Problem

1. Fresh install of LD-R
2. Follow basic tutorial 1 (development mode works)
3. end tutorial with building the app: npm run build

Specifications

• Version: LD-R most recent version from Github (31st of Jan 2018) = v1.1.9
• Platform: Windows 10 (64x)
• Subsystem: node v9.4.0 and npm v5.6.0

Issue with Aggregate object viewer

reported by @mathib
if you click on an object element, LD-R opens an LD-R page to the URI from an undefined dataset. In the console, I see the ECONNREFUSED error because it tries to access the ‘generic’ sparql endpoint defined in the server.js (port 8890).