Merge pull request #89 from RDFLib/edmond/feature/bgs

Add display of colours in concept hierarchy and object page
RDFLib · Aug 8, 2023 · af4e806 · af4e806
2 parents be83b2a + e9cf734
commit af4e806
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 5 deletions.
diff --git a/src/components/ConceptComponent.vue b/src/components/ConceptComponent.vue
@@ -55,7 +55,7 @@ function loadMoreNarrowers() {
             <i :class="`fa-regular fa-${collapse ? 'plus' : 'minus'}`"></i>
         </button>
         <div v-else class="concept-left"></div>
-        <RouterLink class="concept" :to="props.link">{{ props.title || props.iri }}</RouterLink>
+        <RouterLink class="concept" :to="props.link">{{ props.title || props.iri }}</RouterLink> <span v-if="!!props.color" :style="{color: props.color}" class="fa-solid fa-circle fa-2xs"></span>
     </div>
     <div v-if="props.childrenCount > 0" :class="`concept-children ${collapse ? 'collapse' : ''}`">
         <ConceptComponent

diff --git a/src/components/proptable/ObjCell.vue b/src/components/proptable/ObjCell.vue
@@ -33,7 +33,8 @@ const MAX_GEOM_LENGTH = 100; // max character length for geometry strings
                 <template #text>{{ props.description }}</template>
             </component>
             <template v-else>
-                <template v-if="props.value.startsWith('http')">
+                <template v-if="props.predIri === 'https://schema.org/color'">{{ props.value }}<span v-if="!!props.value" :style="{color: props.value, marginLeft: '4px'}" class="fa-solid fa-circle fa-2xs"></span></template>
+                <template v-else-if="props.value.startsWith('http')">
                     <a :href="props.value" target="_blank" rel="noopener noreferrer">{{ props.value }}</a>
                 </template>
                 <div v-else-if="props.datatype && geometryPreds.includes(props.datatype.value)" class="geom-cell">

diff --git a/src/components/proptable/PropRow.vue b/src/components/proptable/PropRow.vue
@@ -16,7 +16,7 @@ const props = defineProps<RowPred>();
             :explanation="props.explanation"
         />
         <td class="prop-objs">
-            <ObjCell v-for="obj in props.objs" v-bind="obj" />
+            <ObjCell v-for="obj in props.objs" v-bind="obj" :predIri="props.iri" />
         </td>
     </tr>
 </template>

diff --git a/src/components/proptable/PropTable.vue b/src/components/proptable/PropTable.vue
@@ -56,6 +56,7 @@ function buildRows(properties: AnnotatedQuad[]): RowPred[] {
         };
 
         propRows[p.predicate.value].objs.push({
+            predIri: p.predicate.value,
             value: p.object.value,
             qname: p.object.termType === "NamedNode" ? iriToQname(p.object.value) : undefined,
             datatype: p.object.termType === "Literal" ? { value: p.object.datatype!.value, qname: iriToQname(p.object.datatype!.value) } : undefined,

diff --git a/src/types.ts b/src/types.ts
@@ -136,6 +136,7 @@ export interface AnnotatedQuad extends Omit<Quad, "predicate" | "object"> {
 };
 
 export interface RowObj {
+    predIri: string;
     value: string;
     qname?: string;
     datatype?: {
@@ -168,6 +169,7 @@ export interface Concept {
     children: Concept[];
     narrower?: string[];
     broader?: string;
+    color?: string;
 };
 
 // extending an interface for defineProps in-file causes errors, defined here instead

diff --git a/src/views/PropTableView.vue b/src/views/PropTableView.vue
@@ -408,7 +408,8 @@ function getTopConcepts(page: number = 1) {
                 title: "",
                 link: "",
                 childrenCount: 0,
-                children: []
+                children: [],
+                color: "",
             };
             conceptStore.value.forEach(q => {
                 if (q.predicate.value === conceptQnameToIri("skos:prefLabel")) {
@@ -417,6 +418,8 @@ function getTopConcepts(page: number = 1) {
                     c.link = q.object.value;
                 } else if (q.predicate.value === conceptQnameToIri("prez:childrenCount")) {
                     c.childrenCount = Number(q.object.value);
+                } else if (q.predicate.value === conceptQnameToIri("sdo:color")) {
+                    c.color = q.object.value;
                 }
             }, object, null, null, null);
             concepts.value.push(c);
@@ -452,7 +455,8 @@ function getNarrowers({ iriPath, link, page = 1 }: { iriPath: string, link: stri
                 title: "",
                 link: "",
                 childrenCount: 0,
-                children: []
+                children: [],
+                color: "",
             };
             conceptStore.value.forEach(q => {
                 if (q.predicate.value === conceptQnameToIri("skos:prefLabel")) {
@@ -461,6 +465,8 @@ function getNarrowers({ iriPath, link, page = 1 }: { iriPath: string, link: stri
                     c.link = q.object.value;
                 } else if (q.predicate.value === conceptQnameToIri("prez:childrenCount")) {
                     c.childrenCount = Number(q.object.value);
+                } else if (q.predicate.value === conceptQnameToIri("sdo:color")) {
+                    c.color = q.object.value;
                 }
             }, object, null, null, null);
             parent!.children.push(c);