Merge pull request #59 from google/extends

~ update to latest generated SchOrg ShEx

demo/static/css/shapes.css

@@ -1,5 +1,5 @@
 .selector {
-    min-width: 450px;
+    min-width: 330px;
 }
 
 .shapes-list-controls {
@@ -40,4 +40,42 @@
     font-size: 18px;
     font-weight: bold;
     box-shadow: 0 2px 2px 0 rgb(0 0 0 / 20%);
-}
+}
+
+th:nth-child(2) {
+    text-align: right;
+}
+
+table.prolog tr *:nth-child(1) {
+    text-align: right;
+    border-right: thin solid black;
+    padding-right: 0.5em;
+}
+
+table.prolog tr *:nth-child(2) {
+    padding-left: 0.5em;
+}
+
+/*
+table.prolog tr *:nth-child(1)::after {
+    padding-left: .5em;
+    content: '|';
+}
+*/
+
+.shapeExpr td {
+    vertical-align: top;
+    line-height: 2.1ex;
+}
+
+.shapeExpr {
+    border: thin dotted #777;
+    padding: 1em;
+}
+
+/*
+.shapeExpr *:nth-child(1) {
+    font-size: 3ex;
+    line-height: 1.5ex;
+}
+*/

demo/static/js/scc/shex.js

@@ -20,7 +20,7 @@ async function validateShex(data, type, baseUrl) {
 
 async function recursiveValidate(node, type, data, baseUrl) {
     if (node.disabled) return;
-    let startShape = `http://schema.org/shex#Valid${node.service}${type}`;
+    let startShape = `http://schema.org/validation#Valid${node.service}${type}`;
     let report;
     try {
         report = await shexValidator.validate(data, startShape, {baseUrl: baseUrl});

demo/static/js/shapes/core.js

@@ -1,20 +1,29 @@
 let shexShapesMap = {};
+const XsdUrl = 'http://www.w3.org/2001/XMLSchema#';
 const SchOrgUrl = 'http://schema.org/';
-const SchOrgShEx = SchOrgUrl + 'shex#';
+const SchOrgShEx = SchOrgUrl + 'validation#';
+const ShExRenderer = ShExHTML($, {Renderer: function () {
+  throw Error(47) // fake a markdown renderer 'cause we don't have annotations
+}})
 
 $(document).ready(async () => {
     await $.get(`validation/shex/full.json`, (shexShapes) => {
         shexShapes.shapes.forEach(shape => {
             shexShapesMap[shape.id] = shape;
         });
-        const displayMe = location.hash ? SchOrgUrl + location.hash.substr(1) : shexShapes.shapes[0].id
         displayShapesList('', shexShapes);
-        selectShape(shexShapes, displayMe);
-    });
+        window.addEventListener('popstate', renderLocation);
+        renderLocation();
 
-    $('#search').on('input', function () {
-        displayShapesList($(this).val(), shexShapes);
-    })
+        function renderLocation () {
+            const displayMe = location.hash ? SchOrgShEx + location.hash.substr(1) : shexShapes.shapes[0].id
+            selectShape(shexShapes, displayMe);
+        }
+
+        $('#search').on('input', function () {
+            displayShapesList($(this).val(), shexShapes);
+        })
+    });
 });
 
 function displayShapesList(search, shexShapes) {
@@ -27,43 +36,37 @@ function displayShapesList(search, shexShapes) {
     }
 
     shapeIds.forEach(shape => {
-        $('.shapes-list').append(`<div class="shape-id">${shape}</div>`);
+        $('.shapes-list').append(`<div class="shape-id">${shape.substr(SchOrgShEx.length)}</div>`);
     });
 
     $('.shape-id').click(function () {
         const shapeId = $(this).text();
-        selectShape(shexShapes, shapeId);
+        location.hash = shapeId;
+        // No need to `selectShape(shexShapes, SchOrgShEx + shapeId)`, handled by 'popstate' listener voodoo.
     });
 }
 
 async function selectShape(shexShapes, shapeId) {
     const shape = shexShapesMap[shapeId];
     $('.shape-id').removeClass('displayed');
     $(`.shape-id`).filter(function () {
-        return $(this).text().toLowerCase() === shapeId.toLowerCase()
+        return $(this).text() === shapeId.substr(SchOrgShEx.length)
     }).addClass('displayed');
-  debugger
+
     const selected = shexShapes.shapes.find(s => s.id === shapeId)
     // $('#display').val(JSON.stringify(shape, null, 2));
     $('#displayed-shape-id').html(shapeId);
     $("#display").empty();
-    await ShExHTML($, {Renderer: function () {
-        throw Error(47)
-    }}).asTree({type: "Schema", shapes: [selected]}, SchOrgUrl, {
-      '': SchOrgShEx,
+    await ShExRenderer.asTree(shexShapes, SchOrgShEx, {
+      '': SchOrgUrl,
+      'xsd': XsdUrl,
     }, $('#display'), {
+      toRender: [selected],
       property: {
         post: (elt, property) => {
           elt.attr('href', property)
           return elt
         }
       },
-      shapeLabel: {
-        post: (elt, shapeLabel) =>
-          elt.on('click', evt => {
-            selectShape(shexShapes, shapeLabel);
-            return true;
-          })
-      }
     })
 }

demo/static/js/shapes/shex-html.js

@@ -55,30 +55,35 @@ var ShExHTML = (function () {
 
     return { asTree }
 
-    function asTree (schema, namespace, prefixes, schemaBox = $('<div/>'), opts) {
-      let packageRef = [null]
+    function asTree (schema, namespace, prefixes, schemaBox = $('<div/>'), opts = {}) {
+      // Set up default opts.
+      for (const objProp of ['shapeLabel', 'property'])
+        if (!(objProp in opts))
+          opts[objProp] = {}
+
+      const packageRef = [null]
       let packageDiv = null
       schemaBox.append(
-        $('<dl/>', { class: 'prolog' }).append(
-          $('<dt/>').text('base'),
-          $('<dd/>').text(namespace),
-          $('<dt/>').text('prefixes'),
-          $('<dd/>').append(
-            $('<dl/>', { class: 'prolog' }).append(
-              Object.keys(prefixes || []).reduce(
-                (acc, prefix) => acc.concat(
-                  $('<dt/>').text(prefix),
-                  $('<dd/>').text(prefixes[prefix])
-                ), [])
-            )
+        $('<table/>', { class: 'prolog' }).append([
+          $('<tr/>', {class: 'base-decl'}).append(
+            $('<th/>').text('base'),
+            $('<td/>', {colspan: 2}).text(namespace),
           )
-        )
+        ].concat(Object.keys(prefixes || []).reduce(
+          (acc, prefix, idx) => acc.concat(
+            $('<tr/>', {class: 'prefix-decl'}).append(
+              (idx === 0 ? $('<th/>').text('prefixes') : $('<td/>')),
+              $('<th/>', {class: 'prefix'}).text(prefix + ':'),
+              $('<td/>', {class: 'localname'}).text(prefixes[prefix])
+            )
+          ), [])))
       )
-      return Promise.all(schema.shapes.map(
+      const toRender = opts.toRender || schema.shapes
+      return Promise.all(toRender.map(
         (shapeDecl, idx) => {
           return new Promise((resShape, rejShape) => {
             setTimeout(() => {
-              let last = idx === schema.shapes.length - 1
+              let last = idx === toRender.length - 1
               let oldPackage = packageRef[0]
               let add = renderDecl(shapeDecl, packageRef, 0)
               if (oldPackage !== packageRef[0]) {
@@ -156,9 +161,7 @@ var ShExHTML = (function () {
 
             if (declRow) {
               // Update the declRow with the first extends.
-              declRow.find('td:nth-child(2)')
-                .append(ref(exts.shift(), depth))
-              declRow.addClass('includer')
+              updateDecl(ref(exts.shift(), depth), 'includer');
             }
 
             // Each additional extends gets its own row.
@@ -173,14 +176,36 @@ var ShExHTML = (function () {
                 )
             ))
           }
-          return expr.expression ? top.concat(renderTripleExpr(expr.expression, lead, true, depth)) : top
+          return top.concat(renderTripleExpr(expr.expression, lead, true, depth))
         case 'NodeConstraint':
+          // return renderInlineNodeConstraint(expr);
+          const ret = [];
           if ('values' in expr) {
-            return top.concat(expr.values.map(
-              val => $(`<tr data-inclusionDepth="${depth}"><td></td><td style="display: list-item;">` + trimStr(val) + '</td><td></td></tr>')
-            ))
-          } else {
-            return top.concat([$(`<tr data-inclusionDepth="${depth}"><td>...</td><td>` + JSON.stringify(expr) + '</td><td></td></tr>')])
+            [].push.apply(ret, top.concat(expr.values.map(
+              addRow(trimStr(val), 'value')
+            )))
+          }
+          if ('nodeKind' in expr) {
+            addRow(expr.nodeKind, 'nodeKind');
+          }
+          if ('datatype' in expr) {
+            addRow($('<a/>', {href: '#' + encodeURIComponent(trim(expr.datatype).text()), class: 'datatype'}).append(trim(expr.datatype)));
+          }
+          if ('pattern' in expr) {
+            addRow('/' + expr.pattern.replace(/\//g, '\\/') + '/', 'pattern');
+          }
+          if (ret.length === 0) {
+            throw Error(`failed to process NodeConstraint ${JSON.stringify(expr)}`);
+          }
+          return ret;
+
+          function addRow (col2, classname) {
+            if (ret.length === 0) {
+              updateDecl(col2, classname)
+              ret.push(declRow)
+            } else {
+              ret.push($(`<tr data-inclusionDepth="${depth}" class="${classname}"><td></td><td>${lead}/${col2}/</td><td></td></tr>`))
+            }
           }
         case 'ShapeOr':
         case 'ShapeAnd':
@@ -189,7 +214,17 @@ var ShExHTML = (function () {
               'ShapeAnd': ['BOTH', 'AND'],
             }
             return top.concat(expr.shapeExprs.reduce(
-              (acc, junct, idx) => acc.concat(renderNestedShape(junct, lead + (false ? '   ' : '│') + '   ', $(`<tr data-inclusionDepth="${depth}"><td></td><td style="display: list-item;">` + labels[expr.type][idx === 0 ? 0 : 1] + ' ' + JSON.stringify(expr) + '</td><td></td></tr>'), depth)),
+              (acc, junct, idx) => acc.concat([
+                $('<tr/>').append($(`<td>${lead}${labels[expr.type][idx === 0 ? 0 : 1]}</td>`))
+              ]).concat(
+                typeof junct === 'string'
+                  ? $(`<tr data-inclusionDepth="${depth}">`).append(
+                    $('<td/>'),
+                    $('<td/>').append(renderInlineShape(junct)),
+                    $('<td/>')
+                  )
+                  : renderShapeExpr(junct, '&nbsp;&nbsp;&nbsp;&nbsp;' + lead, $(`<tr data-inclusionDepth="${depth}"><td></td><td></td><td></td></tr>`), false, [], depth)
+              ),
               []
             ))
         default:
@@ -231,9 +266,22 @@ var ShExHTML = (function () {
           arrow.text(ARROW_down)
           arrow.on('click', (evt) => inject(evt, ext, [], depth))
         }
+
+        function updateDecl (col2, classname) {
+          declRow.find('td:nth-child(2)')
+            .append(col2)
+          declRow.addClass(classname)
+        }
       }
 
       function renderTripleExpr(expr, lead, last, depth) {
+        if (!expr) {
+          return $(`<tr/>`).append(
+            $('<td/>').html(lead + '◯'),
+            $('<td/>'),
+            $('<td/>'),
+          )
+        }
         switch (expr.type) {
         case 'EachOf':
           return expr.expressions.reduce(
@@ -267,7 +315,7 @@ var ShExHTML = (function () {
             comment => $('<tr/>', {class: 'annotation'})
               .attr('data-inclusionDepth', depth)
               .append(
-                $('<td/>', {class: 'lines'}).text(lead + '│' + '   '),
+                $('<td/>', {class: 'lines'}).html(lead + '│' + '   '),
                 $('<td/>', {class: 'comment', colspan: 2}).text(comment)
               )
           )