show type avatars

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rdf-sketch",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,8 +17,8 @@
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@primevue/themes": "^4.2.5",
     "@rdfjs-elements/rdf-editor": "^0.5.10",
-    "@vue-flow/core": "^1.41.6",
-    "@zazuko/env": "^2.4.2",
+    "@vue-flow/core": "^1.42.1",
+    "@zazuko/env": "^2.5.1",
     "@zazuko/prefixes": "^2.2.0",
     "elkjs": "^0.9.3",
     "primeicons": "^7.0.0",
@@ -30,19 +30,19 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@rdfjs/types": "^1.1.2",
     "@rollup/plugin-inject": "^5.0.5",
-    "@rushstack/eslint-patch": "^1.8.0",
+    "@rushstack/eslint-patch": "^1.10.5",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.14.5",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-typescript": "^14.1.4",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/tsconfig": "^0.7.0",
-    "eslint": "^9.17.0",
+    "eslint": "^9.19.0",
     "eslint-plugin-vue": "^9.32.0",
     "npm-run-all2": "^6.2.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "typescript": "~5.4.0",
+    "typescript": "~5.7.3",
     "vite": "^5.4.10",
     "vite-plugin-pwa": "^0.21.0",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^2.2.0"
   }
 }

src-vscode/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Change Log
 
+## 1.0.3
+- Fix missing icon in readme.md
+
 ## 1.0.2
 - Activate the extension by file extension and not just langageId 
 

src-vscode/package.json

@@ -2,7 +2,7 @@
   "name": "vscode-rdf-sketch",
   "displayName": "RDF Sketch",
   "description": "Graphical rendering of RDF data",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "icon": "images/zazuko.png",
   "publisher": "Zazuko",

src/components/graph/resource-node/ResourceNode.vue

@@ -6,6 +6,7 @@ import { Handle, Position, useVueFlow } from '@vue-flow/core'
 
 import RdfTerm from '../../RdfTerm.vue'
 import type { Term } from '@rdfjs/types';
+import { Avatar,AvatarGroup } from 'primevue';
 
 const { fitView, nodeLookup} = useVueFlow()
 
@@ -35,10 +36,16 @@ function zoomToNode(term: Term) {
 
       <header class="resource-card-header">
 
-        <h3 class="resource-title">
+        <AvatarGroup>
+            <Avatar v-for="(avatar, index) in props.data.resource.avatars" :key="index" :label="avatar.label" :style="{ backgroundColor: avatar.color, color: 'black', borderColor: 'rgba(0,0,0,0)', opacity: 0.8 }" size="large" shape="circle"/>
+        </AvatarGroup>
+        <div class="resource-title">
+          <div>
           {{ props.data.resource.name }}
-
-        </h3>
+          </div>
+
+        </div>
+
 
       </header>
       <div class="table-container">
@@ -85,18 +92,17 @@ function zoomToNode(term: Term) {
 .resource-card-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: .5rem;
-    padding-bottom: .5rem;
+    justify-content: flex-start;
+    gap: 1rem;
+    padding: 1rem;
     background-color: gray;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }
 
 .resource-title {
-  font-weight: bold;
+  display: flex;
+  flex-direction: column;
 }
 
 table {

src/model/resource.model.ts

@@ -5,11 +5,18 @@ export interface Resource {
     id: string,
     name: string,
     term: Term,
-    properties: Property[]
+    properties: Property[],
+    avatars: ResourceAvatar[],
 }
 
 export interface Property {
     id: string,
     name: string,
     values: TermSet,
 }
+
+export interface ResourceAvatar {
+    label: string;
+    color: string;
+    iri: string;
+}

src/resources-utils.ts

@@ -14,7 +14,15 @@ export function resourcesFromDataset(dataset: Dataset): Resource[] {
     const nodeSet = new TermSet([...extractedSubjects, ...extractedObject])
 
     const resources = [...nodeSet].map(node => {
-        const quads = dataset.match(node)
+        const quads = dataset.match(node);
+        const rdfClasses = [...quads].filter(quad => quad.predicate.equals(rdfEnvironment.namedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'))).map(quad => quad.object.value);
+        const avatars = rdfClasses.map(rdfClass => {
+            return {
+                label: mapTypeToLabel(rdfClass),
+                color: mapTypeToColor(rdfClass),
+                iri: rdfClass
+            }
+        });
         const properties = [...quads].reduce((acc, { predicate, object }) => {
             if (!acc.has(predicate.value)) {
                 const property = {
@@ -40,7 +48,8 @@ export function resourcesFromDataset(dataset: Dataset): Resource[] {
             id: node.value === '' ? '_:nobody' : node.value,
             term: node,
             name: shrinkTerm(node),
-            properties: orderedProperties
+            properties: orderedProperties,
+            avatars
         } as Resource
     });
     return resources
@@ -73,4 +82,35 @@ export function linksFromResources(resources: Resource[]): Link[] {
         },
             []);
     return links
+}
+
+export const colorPalette = ["#b30000", "#7c1158", "#4421af", "#1a53ff", "#0d88e6", "#00b7c7", "#5ad45a", "#8be04e", "#ebdc78"];
+
+export function mapTypeToColor(typeIri: string): string {
+    const typeHash = Array.from(typeIri).reduce((hash, char) => {
+        return char.charCodeAt(0) + ((hash << 5) - hash);
+    }, 0);
+
+    const colorIndex = Math.abs(typeHash) % colorPalette.length;
+    return colorPalette[colorIndex];
+}
+function mapTypeToLabel(typeIri: string): string {
+    const iriParts = typeIri.split(/[#\/]/).filter(Boolean);
+    const lastPart = iriParts[iriParts.length - 1];
+
+    const cc = lastPart.replace(/[a-z]/g, '');
+    console.log(lastPart);
+    console.log(cc);
+    if (cc.length > 1) {
+
+        return cc.slice(0, 2);
+    }
+    const label = lastPart.replace(/([a-z])([A-Z])/g, '$1 $2')
+        .split(/[^a-zA-Z0-9]/)
+        .filter(Boolean)
+        .map(part => part[0].toUpperCase() + (part[1] ? part[1].toLowerCase() : ''))
+        .join('')
+        .slice(0, 2);
+
+    return label;
 }