streamed-graph: src/graph_view.ts comparison

comparison src/graph_view.ts @ 39:f551a089a98f

add back type-block rendering. untested.

author	drewp@bigasterisk.com
date	Sun, 29 Dec 2019 19:59:08 -0800
parents	c751380b70c5
children	648bd89f9d47

comparison

equal deleted inserted replaced

-:d4036715028b
+:f551a089a98f
 </div>
 `;
 }
-//   const byTypeBlock = (typeUri) => {
+byTypeBlock(byType: TypeToSubjs, typeUri: NamedNode) {
-//     const subjs = Array.from(byType.get(typeUri));
+const subjSet = byType.get(typeUri);
-//     subjs.sort();
+const subjs: Array<NamedNode> = subjSet ? Array.from(subjSet) : [];
+subjs.sort();
-//     const graphCells = new Map(); // [subj, pred] : objs
-//     const preds = new Set();
+const graphCells = new Map<string, Set<Term>>(); // [subj, pred] : objs
+const makeCellKey = (subj: NamedNode, pred: NamedNode) => subj.value + '|||' + pred.value;
-//     subjs.forEach((subj) => {
+const preds = new Set<NamedNode>();
-//       graph.getQuads({ subject: new NamedNode(subj) }, (q) => {
-//         preds.add(q.predicate.toString());
+subjs.forEach((subj: NamedNode) => {
-//         const cellKey = subj + '|||' + q.predicate.toString();
+this.graph.forEach((q: Quad) => {
-//         if (!graphCells.has(cellKey)) {
+if (!Util.isNamedNode(q.predicate)) {
-//           graphCells.set(cellKey, new Set());
+throw new Error();
-//         }
+}
-//         graphCells.get(cellKey).add(q.object);
+preds.add(q.predicate as NamedNode);
-//       });
+const cellKey = makeCellKey(subj, q.predicate as NamedNode);
-//     });
+if (!graphCells.has(cellKey)) {
-//     const predsList = Array.from(preds);
+graphCells.set(cellKey, new Set<Term>());
-//     predsList.splice(predsList.indexOf('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'), 1);
+}
-//     // also pull out label, which should be used on 1st column
+graphCells.get(cellKey)!.add(q.object);
-//     predsList.sort();
+}, subj, null, null, null);
+});
-//     const thead = () => {
+const predsList = Array.from(preds);
-//       const predColumnHead = (pred) => {
+predsList.splice(predsList.indexOf(new NamedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type')), 1);
-//         return html`<th>${rdfNode(new NamedNode(pred))}</th>`;
+// also pull out label, which should be used on 1st column
-//       };
+predsList.sort();
-//       return html`
-//               <thead>
+const thead = () => {
-//                 <tr>
+const predColumnHead = (pred: NamedNode) => {
-//                   <th></th>
+return html`<th>${this.nodeDisplay.getHtml(pred)}</th>`;
-//                   ${predsList.map(predColumnHead)}
+};
-//                 </tr>
+return html`
-//               </thead>`;
+<thead>
-//     };
+<tr>
+<th></th>
-//     const instanceRow = (subj) => {
+${predsList.map(predColumnHead)}
-//       const cell = (pred) => {
+</tr>
-//         const objs = graphCells.get(subj + '|||' + pred);
+</thead>`;
-//         if (!objs) {
+};
-//           return html`<td></td>`;
-//         }
+const instanceRow = (subj: NamedNode) => {
-//         const objsList = Array.from(objs);
+const cell = (pred: NamedNode) => {
-//         objsList.sort();
+const objs = graphCells.get(subj + '|||' + pred);
-//         const draw = (obj) => {
+if (!objs) {
-//           return html`<div>${rdfNode(obj)}</div>`
+return html`<td></td>`;
-//         };
+}
-//         return html`<td>${objsList.map(draw)}</td>`;
+const objsList = Array.from(objs);
-//       };
+objsList.sort();
+const draw = (obj: Term) => {
-//       return html`
+return html`<div>${this.nodeDisplay.getHtml(obj)}</div>`
-//               <tr>
+};
-//                 <td>${rdfNode(new NamedNode(subj))}</td>
+return html`<td>${objsList.map(draw)}</td>`;
-//                 ${predsList.map(cell)}
+};
-//               </tr>
-//             `;
+return html`
-//     };
+<tr>
+<td>${this.nodeDisplay.getHtml(subj)}</td>
-//     return html`
+${predsList.map(cell)}
-//           <div>[icon] ${rdfNode(new NamedNode(typeUri))} resources</div>
+</tr>
-// <div class="typeBlockScroll">
+`;
-//           <table class="typeBlock">
+};
-//             ${thead()}
-//             ${subjs.map(instanceRow)}
+return html`
-//           </table>
+<div>[icon] ${this.nodeDisplay.getHtml(typeUri)} resources</div>
-// </div>
+<div class="typeBlockScroll">
-//         `;
+<table class="typeBlock">
-//   };
+${thead()}
+${subjs.map(instanceRow)}
+</table>
+</div>
+`;
+};
 makeTemplate(): TemplateResult {
 const { byType, untyped } = groupByRdfType(this.graph);
 const typedSubjs = Array.from(byType.keys());
 <div>
 <!-- todo: graphs and provenance.
 These statements are all in the
 <span data-bind="html: $root.createCurie(graphUri())">...</span> graph.-->
 </div>
-{typedSubjs.map(byTypeBlock)}
+${typedSubjs.map((t: NamedNode) => this.byTypeBlock(byType, t))}
 <div class="spoGrid">
 ${untypedSubjs.map(this._subjBlock.bind(this))}
 </div>
 </section>
 `;

Mercurial > code > home > repos > streamed-graph

comparison src/graph_view.ts @ 39:f551a089a98f