Add citation

RDFLib · Apr 13, 2024 · 9533a12 · 9533a12
1 parent 91cbc41
commit 9533a12
Show file tree

Hide file tree

Showing 10 changed files with 321 additions and 108 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/prez-components/package.json b/prez-components/package.json
@@ -27,6 +27,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "build:watch": "concurrently \"vite build --watch\" \"vue-tsc --emitDeclarationOnly\"",
     "types": "vue-tsc ",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
@@ -47,6 +48,7 @@
     "@storybook/vue3-vite": "^7.5.3",
     "@types/node": "^20.4.1",
     "@vitejs/plugin-vue": "^4.2.3",
+    "concurrently": "^8.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.63.6",

diff --git a/prez-components/src/custom-components/CustomCitation.d.ts b/prez-components/src/custom-components/CustomCitation.d.ts
@@ -0,0 +1,13 @@
+import { PrezProperty, PrezTerm } from "prez-lib";
+const fields = [
+    'http://purl.org/dc/terms/title',
+    'http://purl.org/dc/terms/identifier',
+//    'http://www.w3.org/ns/dcat#Resource',
+    'https://www.opengis.net/def/metamodel/ogc-na/doctype',
+    'http://purl.org/dc/terms/creator',
+    'http://purl.org/dc/terms/created',
+] as const;
+
+export type CitationFields = typeof fields[number];
+
+export type CitationProperties = Partial<Record<CitationFields, PrezProperty>>;
diff --git a/prez-components/src/custom-components/CustomCitation.vue b/prez-components/src/custom-components/CustomCitation.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { PrezProperty, PrezLiteral, PrezNode } from 'prez-lib';
+import type { CitationProperties } from './CustomCitation'
+defineProps<{focusNode: PrezNode, properties: CitationProperties}>();
+
+const propertyValue = (property:PrezProperty|undefined, dataType?:string) => 
+    property?.objects?.filter(obj => !dataType || (obj.termType == "Literal" && dataType == (obj as PrezLiteral).datatype?.value))
+    .map(obj => obj.value).join(', ') || "";
+
+const firstTruthy = (...args: any[]): any => args.find(Boolean);
+
+</script>
+
+<template>
+
+    <div v-if="propertyValue(properties['http://purl.org/dc/terms/identifier'], 'http://www.opengis.net/def/metamodel/ogc-na/doc_no')">
+        Open Geospatial Consortium, 
+        <em>{{ propertyValue(properties['http://purl.org/dc/terms/title']) }}</em> 
+        (<em>{{ propertyValue(properties['http://purl.org/dc/terms/identifier'], 'http://www.opengis.net/def/metamodel/ogc-na/doc_no') }}</em>) 
+        ({{ propertyValue(properties['http://purl.org/dc/terms/created']) }}).
+        OGC {{ propertyValue(properties['https://www.opengis.net/def/metamodel/ogc-na/doctype']) }}, 
+        Eds. {{ propertyValue(properties["http://purl.org/dc/terms/creator"]) }}. 
+        {{ firstTruthy(
+                propertyValue(properties['http://purl.org/dc/terms/identifier'], 'http://example.com/datatypes/DOI'), 
+                focusNode?.value
+            ) }}
+    </div>
+
+</template>
+<style scoped>
+div {
+    float:right;
+    width:400px;
+    font-size:small;
+}
+</style>
diff --git a/prez-components/src/custom-components/CustomProperty.vue b/prez-components/src/custom-components/CustomProperty.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { PrezProperty, PrezLiteral, PrezNode, PrezProperties } from 'prez-lib';
+defineProps<{focusNode: PrezNode, properties: PrezProperties}>();
+
+const propertyValue = (property:PrezProperty|undefined, dataType?:string) => 
+    property?.objects?.filter(obj => !dataType || (obj.termType == "Literal" && dataType == (obj as PrezLiteral).datatype?.value))
+    .map(obj => obj.value).join(', ') || "";
+
+</script>
+
+<template>
+
+  <h1>Properties</h1>
+
+  <div v-for="(value, key) in properties" :key="key">
+    <p v-if="value">{{ key }}: {{ propertyValue(value) }}</p>
+  </div>
+
+  Focus Node = {{ focusNode?.value }}
+
+</template>
diff --git a/prez-components/src/index.ts b/prez-components/src/index.ts
@@ -9,6 +9,7 @@ import PrezUITerm from "./components/PrezUITerm.vue";
 import PrezUINode from "./components/PrezUINode.vue";
 import PrezUILiteral from "./components/PrezUILiteral.vue";
 import PrezUIBlankNode from "./components/PrezUIBlankNode.vue";
+import CustomCitation from './custom-components/CustomCitation.vue';
 
 export * from "./types";
 
@@ -20,4 +21,5 @@ export {
     PrezUINode,
     PrezUILiteral,
     PrezUIBlankNode,
+    CustomCitation
 };
diff --git a/prez-components/src/stories/CustomCitation.stories.ts b/prez-components/src/stories/CustomCitation.stories.ts
@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import CustomCitation from "../custom-components/CustomCitation.vue";
+import type { CitationFields } from '../custom-components/CustomCitation'
+import { node, literal, PrezTerm } from "prez-lib";
+import { setProperties } from "../util/helpers";
+
+type CitationInputFields = Record<CitationFields, string|PrezTerm[]>
+
+        //{
+
+    // title: { description: "Doc Title", value: "object"},
+    // docId: { description: "Doc Id", value: "string"},
+    // year: { description: "Year", value: "number"},
+    // docType: { description: "Doc Type", value: "string"},
+    // // 'https://www.opengis.net/def/metamodel/ogc-na/doctype': 
+    // //     { description: "Doc Type", value: "string"},
+    // creatorNames: { description: "Creator Names", value: "string"},
+    // url: { description: "url", value: "string"},
+    // doi: { description: "doi", value: "string"},
+        //}
+
+const argTypeProps:Record<CitationFields, object> = {
+    "http://purl.org/dc/terms/creator": { description: "Creator Names"},
+    "https://www.opengis.net/def/metamodel/ogc-na/doctype": { description: "Doc Type"},
+    "http://purl.org/dc/terms/created": { description: "Date created"},
+    "http://purl.org/dc/terms/identifier": { description: "Doc Identifier"},
+    "http://purl.org/dc/terms/title": { description: "Title" }
+};
+
+const meta = {
+    title: "CustomCitation",
+    component: CustomCitation,
+    tags: ["autodocs"],
+    argTypes: { properties: argTypeProps, focusNode: { "description": "Focus Node URI"} }
+} satisfies Meta<typeof CustomCitation>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// export const Default: Story = {
+//     render: (args)=> ({
+//         components: { CustomCitation },
+//         setup() {
+//             return {args}
+//         },
+//         template: `<CustomCitation :properties="args"></CustomCitation>`
+//     }),
+//     args:  {
+//         properties: {
+//             title: "Sensor Collection Service",
+//             docId: "02-028",
+//             year: 2002,
+//             docType: "Interoperability Program Report",
+//             creatorNames: "Tom McCarthy",
+//             url: "http://www.opengis.net/def/docs/02-028",
+//         }
+//     }
+// };
+
+export const WithoutDOI: Story = {
+    args:  {
+        properties: setProperties(
+            {
+                "http://purl.org/dc/terms/creator": "Tom McCarthy",
+                "http://purl.org/dc/terms/created": "2002-04-19",
+                "http://purl.org/dc/terms/identifier": [
+                    literal({datatype: node('http://www.opengis.net/def/metamodel/ogc-na/doc_no'), value: "02-028"})],
+                "http://purl.org/dc/terms/title": "Sensor Collection Service",
+                "https://www.opengis.net/def/metamodel/ogc-na/doctype": "Interoperability Program Report"
+            } as CitationInputFields
+        ),
+        focusNode: node('http://www.opengis.net/def/docs/02-028')
+    }
+};
+
+export const WithDOI: Story = {
+    args:  {
+        properties: setProperties(
+            {
+                "http://purl.org/dc/terms/creator": "Tom McCarthy",
+                "http://purl.org/dc/terms/created": "2002-04-19",
+                "http://purl.org/dc/terms/identifier": [
+                    literal({datatype: node('http://www.opengis.net/def/metamodel/ogc-na/doc_no'), value: "02-028"}),
+                    literal({datatype: node('http://example.com/datatypes/DOI'), value: 'https://doi.org/ogc-02-028'})
+                ],
+                "http://purl.org/dc/terms/title": "Sensor Collection Service",
+                "https://www.opengis.net/def/metamodel/ogc-na/doctype": "Interoperability Program Report"
+            } as CitationInputFields
+        ),
+        focusNode: node('http://www.opengis.net/def/docs/02-028')
+    }
+};
+
+export const WithNoDocNo: Story = {
+    args:  {
+        properties: setProperties(
+            {
+                "http://purl.org/dc/terms/creator": "Tom McCarthy",
+                "http://purl.org/dc/terms/created": "2002-04-19",
+                "http://purl.org/dc/terms/identifier": [
+                    literal({datatype: node('http://example.com/datatypes/DOI'), value: 'https://doi.org/ogc-02-028'})
+                ],
+                "http://purl.org/dc/terms/title": "Sensor Collection Service",
+                "https://www.opengis.net/def/metamodel/ogc-na/doctype": "Interoperability Program Report"
+            } as CitationInputFields
+        ),
+        focusNode: node('http://www.opengis.net/def/docs/02-028')
+    }
+};
+
+
+// export const WithDOI: Story = {
+//     args:  {
+//         title: "Sensor Collection Service",
+//         docId: "02-028",
+//         year: 2002,
+//         docType: "Interoperability Program Report",
+//         creatorNames: "Tom McCarthy",
+//         url: "http://www.opengis.net/def/docs/02-028",
+//         doi: "https://doi.org/ogc-00-029"
+//     }
+// };
diff --git a/prez-components/src/util/consts.ts b/prez-components/src/util/consts.ts
@@ -25,6 +25,6 @@ export const HIDDEN_PREDICATES: string[] = [
     "http://www.w3.org/2004/02/skos/core#hasTopConcept",
     // system predicates
     "https://prez.dev/link",
-    "http://www.w3.org/1999/02/22-rdf-syntax-ns#type",
-    "http://purl.org/dc/terms/identifier",
+    "http://www.w3.org/1999/02/22-rdf-syntax-ns#type"
+    //"http://purl.org/dc/terms/identifier"
 ];
diff --git a/prez-components/src/util/helpers.ts b/prez-components/src/util/helpers.ts
@@ -1,6 +1,19 @@
 // to be moved to prez-lib
 
-import { PrezLiteral, PrezNode } from "prez-lib";
+import { PrezLiteral, PrezNode, PrezTerm, node, PrezProperties } from "prez-lib";
+
+export type SimpleProperties = Record<string, PrezTerm|PrezTerm[]|string>;
+
+export function setProperties(properties: SimpleProperties) {
+    const prezProperties:PrezProperties = {};
+    for(const pred in properties) {
+        const terms:PrezTerm[] = typeof properties[pred] == 'string' ? 
+            [node(properties[pred] as string)] : 
+            (Array.isArray(properties[pred]) ? properties[pred] as PrezTerm[] : [properties[pred] as PrezTerm]);
+        prezProperties[pred] = { predicate: node(pred), objects: terms}
+    }
+    return prezProperties;
+}
 
 export function sortLiterals(a: PrezLiteral, b: PrezLiteral, direction: "asc" | "desc" = "asc"): number {
     return direction === "asc" ? a.value.localeCompare(b.value) : b.value.localeCompare(a.value);

diff --git a/prez-ui/components/ItemLayout.vue b/prez-ui/components/ItemLayout.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PrezUINode, CopyButton } from "prez-components";
+import { PrezUINode, CopyButton, CustomCitation } from "prez-components";
 import type { ProfileHeader, PrezItem } from "prez-lib";
 import Message from "primevue/message";
 import Skeleton from "primevue/skeleton";
@@ -37,6 +37,9 @@ const tableData = computed(() => {
                     <Skeleton width="30rem" class="mb-2" style="margin-bottom: 12px"></Skeleton>
                 </template>
                 <template v-else-if="props.data">
+                    <div style="float:right;">
+                        <CustomCitation :focusNode="props.data?.focusNode" :properties="props.data?.properties" />
+                    </div>
                     <h1>{{ props.data.focusNode.label?.value || props.data.focusNode.value }}</h1>
                     <div class="flex-row" style="margin-bottom: 8px">Type: <div class="types"><PrezUINode v-for="t in props.data.focusNode.rdfTypes" v-bind="t" badge :showProv="false" :showType="false" /></div></div>
                     <div class="flex-row">IRI: <div class="iri"><a :href="props.data.focusNode.value" target="_blank" rel="noopener noreferrer">{{ props.data.focusNode.value }}</a><CopyButton :value="props.data.focusNode.value" iconOnly /></div></div>