Find a way to shorten blank node ids

samples/first.sparqlbook

@@ -74,7 +74,7 @@
   {
     "kind": 2,
     "language": "sparql",
-    "value": "# [endpoint=http://test.lindas.admin.ch/query]\nPREFIX schema: <http://schema.org/>\n\nSELECT ?propertyShape ?p ?o  WHERE {\n   BIND (<https://politics.ld.admin.ch/vocabulary/party> as ?set)\n   ?set <http://www.w3.org/ns/shacl#property> ?propertyShape . \n   ?propertyShape ?p ?o .\n} ",
+    "value": "# [endpoint=http://test.lindas.admin.ch/query]\nPREFIX schema: <http://schema.org/>\n\nSELECT ?propertyShape ?p ?o  WHERE {\n   {\n   SELECT ?propertyShape WHERE {\n      ?set <http://www.w3.org/ns/shacl#property> ?propertyShape . \n      FILTER(isBlank(?propertyShape))\n   } LIMIT 30\n   }\n   ?propertyShape ?p ?o .\n} ",
     "metadata": {}
   }
 ]

src/renderer/components/bnode-component/bnode-component.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Term } from '../../model/sparql-result-json.model';
+import { shrinkBnode } from './shrink-bnode';
 
 interface BNodeComponentProps {
     term: Term;
@@ -16,7 +17,7 @@ export const BNodeComponent: React.FC<BNodeComponentProps> = ({ term }) => {
                 throw new Error('Term is not a blank node');
             }
 
-            const value = term.value;
+            const value = shrinkBnode(term.value);
 
 
             const bNode: BlankNode = {
@@ -32,7 +33,7 @@ export const BNodeComponent: React.FC<BNodeComponentProps> = ({ term }) => {
 
     return (
         <div style={{ display: 'flex', flexDirection: 'row' }}>
-            <span>[{blankNode?.value}]</span>
+            <span title="Blank Node">{blankNode?.value}</span>
         </div>
     );
 };

src/renderer/components/bnode-component/shrink-bnode.ts

@@ -0,0 +1,12 @@
+
+let bNodeIdIndex = 0;
+const bNodeMap = new Map<string, string>();
+
+export function shrinkBnode(bNodeId: string): string {
+    if (bNodeMap.has(bNodeId)) {
+        return bNodeMap.get(bNodeId) ?? '';
+    }
+    const newBNodeId = `_:b${bNodeIdIndex++}`;
+    bNodeMap.set(bNodeId, newBNodeId);
+    return newBNodeId;
+}

src/renderer/components/literal-component/literal-component.tsx

@@ -38,7 +38,7 @@ export const LiteralComponent: React.FC<LiteralComponentProps> = ({ term }) => {
 
     return (
         <div className="row">
-            <span className="value">{literal?.value}</span>
+            <span title="Literal" className="value">{literal?.value}</span>
             <span className="meta">
                 {' '}
                 {literal?.languageTag ? '@' + literal.languageTag : ''}