Export views specification for DbPedia as external package

build.sh

@@ -13,12 +13,17 @@ echo ""
 echo "=========================================="
 echo "= Building @logilab/libview"
 echo "=========================================="
+(cd "$ROOT/libview"; rm -rf build)
+(cd "$ROOT/libview"; rm -rf node_modules/@types/rdflib)
 (cd "$ROOT/libview"; npm install)
 (cd "$ROOT/libview"; npm run build)
 
 echo ""
 echo "=========================================="
-echo "= Building @logilab/ld-browser"
+echo "= Building @logilab/views-dbpedia"
 echo "=========================================="
-(cd "$ROOT/extension"; npm install)
-(cd "$ROOT/extension"; npm run build)
\ No newline at end of file
+(cd "$ROOT/views-dbpedia"; rm -rf build)
+(cd "$ROOT/views-dbpedia"; rm -rf node_modules/@types/rdflib)
+(cd "$ROOT/views-dbpedia"; rm -rf node_modules/@logilab/libview)
+(cd "$ROOT/views-dbpedia"; npm install)
+(cd "$ROOT/views-dbpedia"; npm run build)

libview/package.json

@@ -8,6 +8,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:production": "NODE_ENV=production webpack"
   },
+  "main": "./build/index.js",
   "types": "./build/lib/index.d.ts",
   "repository": {
     "type": "hg",

libview/webpack.config.js

@@ -14,7 +14,7 @@ module.exports = [
     },
     devtool: "source-map",
     resolve: {
-      extensions: [".ts", ".d.ts", ".tsx", ".js", ".json"]
+      extensions: [".ts", ".tsx", ".js", ".json"]
     },
     module: {
       rules: [

rdflib-types/package.json

@@ -8,6 +8,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:production": "NODE_ENV=production webpack"
   },
+  "main": "./build/index.js",
   "types": "./build/lib/index.d.ts",
   "repository": {
     "type": "hg",

rdflib-types/webpack.config.js

@@ -12,7 +12,7 @@ module.exports = [
     },
     devtool: "source-map",
     resolve: {
-      extensions: [".ts", ".d.ts", ".tsx", ".js", ".json"]
+      extensions: [".ts", ".tsx", ".js", ".json"]
     },
     module: {
       rules: [

views-dbpedia/package.json

+{
+  "name": "@logilab/views-dbpedia",
+  "version": "0.1.0",
+  "description": "Implementation of views specific to dbpedia.",
+  "scripts": {
+    "build": "webpack",
+    "clean": "rm -rf build/*",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:production": "NODE_ENV=production webpack"
+  },
+  "main": "./build/index.js",
+  "types": "./build/lib/index.d.ts",
+  "repository": {
+    "type": "hg",
+    "url": "https://bitbucket.org/laurentw/logilab-cubicweb-client"
+  },
+  "keywords": [
+    "DataBrowser",
+    "Typescript"
+  ],
+  "author": "LOGILAB <contact@logilab.fr>",
+  "license": "LGPL-3.0",
+  "dependencies": {
+    "@logilab/libview": "file:../libview",
+    "@types/rdflib": "file:../rdflib-types",
+    "@types/react": "^16.4.6",
+    "rdflib": "^0.17.0",
+    "react": "^16.2.0"
+  },
+  "devDependencies": {
+    "source-map-loader": "^0.2.3",
+    "ts-loader": "^4.4.2",
+    "typescript": "^2.9.2",
+    "webpack": "^4.0.1",
+    "webpack-cli": "^2.0.10"
+  }
+}

views-dbpedia/src/index.tsx

+/*******************************************************************************
+ * Copyright 2003-2018 LOGILAB S.A. (Paris, FRANCE), all rights reserved.
+ * contact http://www.logilab.fr/ -- mailto:contact@logilab.fr
+ *
+ * This file is part of CubicWeb.
+ *
+ * CubicWeb is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation, either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * CubicWeb is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License along
+ * with CubicWeb.  If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import { definition, application, implementation } from "@logilab/libview";
+import * as React from "react";
+import { RDF, RdfStore, Term, $rdf } from "rdflib";
+
+/**
+ * The descritptor for the default Dbpedia person view
+ */
+export const DESCRIPTOR_PERSON: definition.ViewDescriptor = {
+  identifier: "::Logilab::DbPedia::Person",
+  name: "DbPedia Person",
+  description: "Renders a person from DbPedia",
+  entrypoint: "VIEW_DBPEDIA_PERSON",
+  location: {
+    kind: definition.ViewLocationKind.Embedded
+  }
+};
+
+/**
+ * The source for the DbPedia views
+ */
+export const SOURCE: definition.ViewRegistrySourceInline = {
+  name: "Source of DbPedia views",
+  kind: definition.ViewRegistrySourceKind.Inlined,
+  descriptors: [DESCRIPTOR_PERSON]
+};
+
+/**
+ * Gets the value for the propert of a resource
+ * @param store The RDF store containing the data
+ * @param resource The resource
+ * @param property The property
+ */
+function getValueOf(store: RdfStore, resource: string, property: string): Term {
+  return store.any(
+    $rdf.sym(resource),
+    $rdf.sym(property),
+    undefined,
+    undefined
+  );
+}
+
+/**
+ * Determines whether the RDF store with the specified primary topic matches a trait:
+ * Has a primary topic
+ * @param store The RDF store
+ * @param primaryTopic The primary topic
+ */
+function hasTraitHasPrimary(store: RdfStore, primaryTopic: string): boolean {
+  return primaryTopic != null;
+}
+
+/**
+ * Determines whether the RDF store with the specified primary topic matches a trait:
+ * The primary topic is a person in DBPedia
+ * @param store The RDF store
+ * @param primaryTopic The primary topic
+ */
+function hasTraitDbPediaPerson(store: RdfStore, primaryTopic: string): boolean {
+  if (!hasTraitHasPrimary(store, primaryTopic)) return false;
+  let a = store.each(
+    $rdf.sym(primaryTopic),
+    $rdf.sym("http://www.w3.org/1999/02/22-rdf-syntax-ns#type"),
+    $rdf.sym("http://dbpedia.org/ontology/Person"),
+    undefined
+  );
+  return a != null && a != undefined && a.length > 0;
+}
+
+export class DBPediaPersonRendering
+  implements implementation.ViewImplementation {
+  descriptor: definition.ViewDescriptor;
+  constructor() {
+    this.descriptor = DESCRIPTOR_PERSON;
+    this.priorityFor = this.priorityFor.bind(this);
+    this.render = this.render.bind(this);
+  }
+
+  priorityFor(store: RdfStore, target: string): number {
+    return hasTraitDbPediaPerson(store, target) ? 10 : -1;
+  }
+
+  render(
+    renderer: application.ViewRenderer,
+    store: RdfStore,
+    root: string,
+    target: string
+  ): React.ReactNode {
+    let name = getValueOf(store, root, "http://xmlns.com/foaf/0.1/name").value;
+    return (
+      <div
+        style={{
+          width: "90%",
+          marginLeft: "5%",
+          marginTop: "5vh",
+          marginBottom: "5vh"
+        }}
+      >
+        <div
+          style={{
+            width: "75%",
+            marginLeft: "12.5%",
+            marginTop: "2vh",
+            marginBottom: "2vh"
+          }}
+        >
+          <div className="alert alert-info" role="alert">
+            "DBPedia Person"
+          </div>
+        </div>
+        <div>
+          <span>Name: {name}</span>
+        </div>
+      </div>
+    );
+  }
+}
+
+/**
+ * Registers the views
+ */
+implementation.registerImplementation(new DBPediaPersonRendering());

views-dbpedia/tsconfig.json

+{
+    "compilerOptions": {
+        "outDir": "./lib/",
+        "sourceMap": true,
+        "declaration": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "es6",
+        "lib": [ "es6", "dom" ],
+        "jsx": "react"
+    },
+    "include": [
+        "./src/**/*"
+    ],
+}
\ No newline at end of file

views-dbpedia/webpack.config.js

+const path = require("path");
+const isProd = process.env.NODE_ENV === "production";
+
+module.exports = [
+  {
+    entry: "./src/index.tsx",
+    mode: isProd ? "production" : "development",
+    output: {
+      path: path.join(__dirname, "build/"),
+      publicPath: path.join(__dirname, "build/"),
+      filename: "index.js"
+    },
+    devtool: "source-map",
+    resolve: {
+      extensions: [".ts", ".tsx", ".js", ".json"]
+    },
+    module: {
+      rules: [
+        { test: /\.tsx?$/, loader: "ts-loader" },
+        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
+      ]
+    }
+  }
+];