From 4ed701e6f04d32fb2238d39d3d91f784e603268b Mon Sep 17 00:00:00 2001
From: jamiefeiss <jamie.feiss@gmail.com>
Date: Tue, 1 Aug 2023 17:11:13 +1000
Subject: [PATCH 1/3] Added basic FAIR & CARE score widgets

---
 .env                                  |  1 +
 env.d.ts                              |  1 +
 src/components/CircleProgress.vue     | 76 +++++++++++++++++++++++++++
 src/components/navs/RightSideBar.vue  |  8 +++
 src/components/scores/CareScore.vue   | 57 ++++++++++++++++++++
 src/components/scores/FairScore.vue   | 57 ++++++++++++++++++++
 src/components/scores/ScoreBadge.vue  | 13 +++++
 src/components/scores/ScoreWidget.vue | 22 ++++++++
 src/config.ts                         |  1 +
 src/main.ts                           |  3 +-
 src/types.ts                          |  1 +
 src/util/helpers.ts                   |  4 ++
 src/views/PropTableView.vue           | 48 +++++++++++++++--
 13 files changed, 287 insertions(+), 5 deletions(-)
 create mode 100644 src/components/CircleProgress.vue
 create mode 100644 src/components/scores/CareScore.vue
 create mode 100644 src/components/scores/FairScore.vue
 create mode 100644 src/components/scores/ScoreBadge.vue
 create mode 100644 src/components/scores/ScoreWidget.vue

diff --git a/.env b/.env
index 8a4566f..d9ebe78 100644
--- a/.env
+++ b/.env
@@ -3,6 +3,7 @@
 ## ---------------------------------------
 VITE_SIDENAV=true
 VITE_ENABLED_PREZS=CatPrez,SpacePrez,VocPrez
+VITE_ENABLE_SCORES=true
 
 ## ---------------------------------------
 ## MAP DISPLAY DEFAULT SETTINGS 
diff --git a/env.d.ts b/env.d.ts
index b10c65f..3002a68 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -2,6 +2,7 @@
 interface ImportMetaEnv {
     readonly VITE_SIDENAV: string; // true | false
     readonly VITE_ENABLED_PREZS: string; // CatPrez | SpacePrez | VocPrez comma separated
+    readonly VITE_ENABLE_SCORES: string; // true | false
     readonly VITE_API_BASE_URL: string;
     readonly VITE_MAP_SETTINGS_API_KEY: string;
     readonly VITE_MAP_SETTINGS_OPTIONS_CENTER_LAT: number;
diff --git a/src/components/CircleProgress.vue b/src/components/CircleProgress.vue
new file mode 100644
index 0000000..a3f0d67
--- /dev/null
+++ b/src/components/CircleProgress.vue
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+// import ToolTip from "@/components/ToolTip.vue";
+
+const props = defineProps<{
+    value?: number;
+    max?: number;
+    percentage?: number;
+    label?: string;
+    // tooltip?: boolean;
+}>();
+
+const percent = computed(() => {
+    if (props.value !== undefined && props.max !== undefined) {
+        return props.value / props.max * 100;
+    } else if (props.percentage !== undefined) {
+        return props.percentage;
+    } else {
+        return 0;
+    }
+});
+
+const percentColour = computed(() => {
+    if (percent.value < 30) {
+        return "255, 0, 0"; // red
+    } else if (percent.value < 70) {
+        return "255, 165, 0"; // orange
+    } else if (percent.value <= 100) {
+        return "0, 255, 0"; // green
+    } else {
+        return "128, 128, 128"; // grey, invalid
+    }
+});
+</script>
+
+<template>
+    <!-- <component :is="props.tooltip ? ToolTip : 'slot'"> -->
+        <div :class="`circle-progress`" :style="{ background: `conic-gradient(rgb(${percentColour}) ${percent}%, 0, rgba(${percentColour}, 0.2) ${100 - percent}%)` }">
+            <div class="circle-overlay">
+                <span class="circle-value">
+                    <template v-if="props.label">{{ props.label }}</template>
+                    <template v-else-if="props.value !== undefined && props.max !== undefined">{{ props.value }}/{{ props.max }}</template>
+                    <template v-else-if="props.percentage !== undefined">{{ props.percentage }}%</template>
+                </span>
+            </div>
+        </div>
+        <!-- <template v-if="props.tooltip" #text>
+            <template v-if="props.value !== undefined && props.max !== undefined">{{ props.value }}/{{ props.max }}</template>
+            <template v-else-if="props.percentage !== undefined">{{ props.percentage }}%</template>
+        </template>
+    </component> -->
+</template>
+
+<style lang="scss" scoped>
+.circle-progress {
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+    aspect-ratio: 1;
+    position: relative;
+
+    .circle-overlay {
+        border-radius: 50%;
+        background-color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        inset: 0.5rem;
+
+        .circle-value {
+            font-size: 0.9em;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/navs/RightSideBar.vue b/src/components/navs/RightSideBar.vue
index 235348b..4b85347 100644
--- a/src/components/navs/RightSideBar.vue
+++ b/src/components/navs/RightSideBar.vue
@@ -20,11 +20,13 @@ const teleportChildren = computed(() => {
 
 <template>
     <div id="right-nav">
+        <div id="search-teleport"></div>
         <div id="right-bar-content" ref="teleportRef"></div>
         <hr v-if="(props.profiles && props.profiles.length > 0) && teleportChildren > 0"/>
         <Transition name="fade">
             <AltNav v-show="!!props.profiles && props.profiles.length > 0" :profiles="props.profiles" :currentUrl="props.currentUrl" />
         </Transition>
+        <div id="score-teleport"></div>
     </div>
 </template>
 
@@ -37,6 +39,12 @@ const teleportChildren = computed(() => {
     display: flex;
     flex-direction: column;
     gap: 12px;
+
+    #score-teleport {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
 }
 
 hr {
diff --git a/src/components/scores/CareScore.vue b/src/components/scores/CareScore.vue
new file mode 100644
index 0000000..ca8f07e
--- /dev/null
+++ b/src/components/scores/CareScore.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import CircleProgress from '@/components/CircleProgress.vue';
+
+// need max scores per sub-score
+const MAX_SCORES: {[key: string]: number} = {
+    c: 8,
+    a: 9,
+    r: 9,
+    e: 3
+};
+
+const props = defineProps<{
+    score: {[key: string]: number};
+}>();
+</script>
+
+<template>
+    <div class="care-scores">
+        <h5>CARE Score</h5>
+        <div class="circles">
+            <div v-for="score in 'care'" class="circle">
+                <CircleProgress :value="props.score[score]" :max="MAX_SCORES[score]" />
+                <div class="circle-name">{{ score.toUpperCase() }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.care-scores {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    h5 {
+        margin: 0;
+        font-size: 1rem;
+    }
+
+    .circles {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 8px;
+
+        .circle {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            align-items: center;
+
+            .circle-name {
+
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scores/FairScore.vue b/src/components/scores/FairScore.vue
new file mode 100644
index 0000000..5f36416
--- /dev/null
+++ b/src/components/scores/FairScore.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import CircleProgress from '@/components/CircleProgress.vue';
+
+// need max scores per sub-score
+const MAX_SCORES: {[key: string]: number} = {
+    f: 17,
+    a: 10,
+    i: 8,
+    r: 7
+};
+
+const props = defineProps<{
+    score: {[key: string]: number};
+}>();
+</script>
+
+<template>
+    <div class="fair-scores">
+        <h5>FAIR Score</h5>
+        <div class="circles">
+            <div v-for="score in 'fair'" class="circle">
+                <CircleProgress :value="props.score[score]" :max="MAX_SCORES[score]" />
+                <div class="circle-name">{{ score.toUpperCase() }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.fair-scores {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    h5 {
+        margin: 0;
+        font-size: 1rem;
+    }
+
+    .circles {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 8px;
+
+        .circle {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            align-items: center;
+
+            .circle-name {
+
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scores/ScoreBadge.vue b/src/components/scores/ScoreBadge.vue
new file mode 100644
index 0000000..69dc869
--- /dev/null
+++ b/src/components/scores/ScoreBadge.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+    <div>
+
+    </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/scores/ScoreWidget.vue b/src/components/scores/ScoreWidget.vue
new file mode 100644
index 0000000..8f1b838
--- /dev/null
+++ b/src/components/scores/ScoreWidget.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import FairScore from "@/components/scores/FairScore.vue";
+import CareScore from "@/components/scores/CareScore.vue";
+
+const props = defineProps<{
+    score: {[key: string]: number};
+    name: string;
+}>();
+
+const collapse = ref(false); // collapse to a badge
+// click info to open modal
+</script>
+
+<template>
+    <FairScore v-if="props.name === 'fair'" :score="score" />
+    <CareScore v-else-if="props.name === 'care'" :score="score" />
+</template>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/config.ts b/src/config.ts
index 9b7b5fb..88ed457 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,6 +1,7 @@
 export default {
     sidenav: import.meta.env.VITE_SIDENAV,
     enabledPrezs: import.meta.env.VITE_ENABLED_PREZS,
+    enableScores: import.meta.env.VITE_ENABLE_SCORES,
     apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
     map: {
         settings: {
diff --git a/src/main.ts b/src/main.ts
index 323eb70..d5505a6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,7 @@ import pinia from "@/stores/pinia";
 import App from "@/App.vue";
 import router from "@/router";
 import config from "@/config";
-import { sidenavConfigKey, enabledPrezsConfigKey, apiBaseUrlConfigKey, mapConfigKey } from "@/types";
+import { sidenavConfigKey, enabledPrezsConfigKey, apiBaseUrlConfigKey, mapConfigKey, enableScoresKey } from "@/types";
 
 import VueGoogleMaps from '@fawmi/vue-google-maps'
 
@@ -13,6 +13,7 @@ const app = createApp(App);
 
 app.provide(sidenavConfigKey, config.sidenav === "true");
 app.provide(enabledPrezsConfigKey, config.enabledPrezs.split(","));
+app.provide(enableScoresKey, config.enableScores === "true");
 app.provide(apiBaseUrlConfigKey, config.apiBaseUrl.replace(/\/$/, ""));
 app.provide(mapConfigKey, config.map);
 
diff --git a/src/types.ts b/src/types.ts
index 86307fa..9718f20 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -6,6 +6,7 @@ export type PrezFlavour = "CatPrez" | "SpacePrez" | "VocPrez";
 export const mapConfigKey: InjectionKey<MapConfig> = Symbol();
 export const sidenavConfigKey: InjectionKey<boolean> = Symbol();
 export const enabledPrezsConfigKey: InjectionKey<PrezFlavour[]> = Symbol();
+export const enableScoresKey: InjectionKey<boolean> = Symbol();
 export const apiBaseUrlConfigKey: InjectionKey<string> = Symbol();
 
 export interface MapConfig {
diff --git a/src/util/helpers.ts b/src/util/helpers.ts
index 7a7b9bd..fd8a137 100644
--- a/src/util/helpers.ts
+++ b/src/util/helpers.ts
@@ -29,3 +29,7 @@ export function ensureProfiles() {
 export function copyToClipboard(text: string) {
     navigator.clipboard.writeText(text.trim());
 }
+
+export function titleCase(s: string): string {
+    return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
\ No newline at end of file
diff --git a/src/views/PropTableView.vue b/src/views/PropTableView.vue
index fbaeda1..c18be9d 100644
--- a/src/views/PropTableView.vue
+++ b/src/views/PropTableView.vue
@@ -5,7 +5,7 @@ import { BlankNode, DataFactory, Quad, Store, Literal } from "n3";
 import { useUiStore } from "@/stores/ui";
 import { useRdfStore } from "@/composables/rdfStore";
 import { useGetRequest } from "@/composables/api";
-import { apiBaseUrlConfigKey, type ListItem, type AnnotatedQuad, type Breadcrumb, type Concept, type PrezFlavour, type Profile, type ListItemExtra, type ListItemSortable } from "@/types";
+import { apiBaseUrlConfigKey, enableScoresKey, type ListItem, type AnnotatedQuad, type Breadcrumb, type Concept, type PrezFlavour, type Profile, type ListItemExtra, type ListItemSortable } from "@/types";
 import PropTable from "@/components/proptable/PropTable.vue";
 import ConceptComponent from "@/components/ConceptComponent.vue";
 import AdvancedSearch from "@/components/search/AdvancedSearch.vue";
@@ -16,11 +16,13 @@ import MapClient from "@/components/MapClient.vue";
 import type { WKTResult } from "@/stores/mapSearchStore.d";
 import SortableTabularList from "@/components/SortableTabularList.vue";
 import LoadingMessage from "@/components/LoadingMessage.vue";
-import { ensureProfiles } from "@/util/helpers";
+import { ensureProfiles, titleCase } from "@/util/helpers";
+import ScoreWidget from "@/components/scores/ScoreWidget.vue";
 
 const { namedNode } = DataFactory;
 
 const apiBaseUrl = inject(apiBaseUrlConfigKey) as string;
+const enableScores = inject(enableScoresKey) as boolean;
 const route = useRoute();
 const ui = useUiStore();
 const { store, prefixes, parseIntoStore, qnameToIri, iriToQname } = useRdfStore();
@@ -49,7 +51,8 @@ const childrenPredicate = ref("");
 const hiddenPredicates = ref<string[]>([
     qnameToIri("a"),
     qnameToIri("dcterms:identifier"),
-    qnameToIri("prez:count")
+    qnameToIri("prez:count"),
+    "https://linked.data.gov.au/def/scores/hasScore"
 ]);
 const defaultProfile = ref<Profile | null>(null);
 const childrenConfig = ref({
@@ -59,6 +62,8 @@ const childrenConfig = ref({
     buttonTitle: "",
     buttonLink: ""
 });
+const hasScores = ref(false);
+const scores = ref<{[key: string]: {[key: string]: number}}>({}); // {fair: {f: 0, a: 0, i: 0, r: 0}, ...}
 
 function configByBaseClass(baseClass: string) {
     item.value.baseClass = baseClass;
@@ -163,6 +168,8 @@ function getProperties() {
                     link: `/object?uri=${item.value.iri}`
                 })
             }, q.object, namedNode(qnameToIri("geo:asWKT")), null, null)
+        } else if (q.predicate.value === "https://linked.data.gov.au/def/scores/hasScore" && enableScores && !hasScores.value) {
+            hasScores.value = true;
         }
 
         if (!isAltView.value) {
@@ -174,12 +181,42 @@ function getProperties() {
         }
     }, subject, null, null, null);
 
+    if (hasScores.value) {
+        getScores();
+    }
+
     // set the item title after the item title has been set
     geoResults.value.forEach(result => {
         result.label = item.value.title ? item.value.title : item.value.iri
     });
 }
 
+function getScore(scoreName: string, normalised: boolean = false): {[key: string]: number} {
+    const scores: {[key: string]: number} = {};
+
+    store.value.forObjects(o => {
+        store.value.forEach(q => {
+            store.value.forObjects(o2 => {
+                store.value.forEach(q2 => {
+                    const match = q2.predicate.value.match(`https:\/\/linked.data.gov.au\/def\/scores\/${scoreName}([A-Z]){1}Score${normalised ? "Normalised" : ""}`);
+                    if (match) {
+                        scores[match[1].toLowerCase()] = Number(q2.object.value);
+                    }
+                }, o2, null, null, null);
+            }, q.subject, namedNode("http://purl.org/linked-data/cube#observation"), null);
+        }, o, namedNode(qnameToIri("a")), namedNode(`https://linked.data.gov.au/def/scores/${titleCase(scoreName)}Score${normalised ? "Normalised" : ""}`), null);
+    }, namedNode(item.value.iri), namedNode("https://linked.data.gov.au/def/scores/hasScore"), null);
+
+    return scores;
+}
+
+function getScores() {
+    scores.value = {
+        fair: getScore("fair"),
+        care: getScore("care"),
+    };
+}
+
 function getBreadcrumbs(): Breadcrumb[] {
     // if /object, then use home/object/<object>
     // else, build out the breadcrumbs using the URL path
@@ -558,9 +595,12 @@ onMounted(() => {
         </PropTable>
         <LoadingMessage v-else-if="loading" />
         <ErrorMessage v-else-if="error" :message="error" />
-        <Teleport v-if="searchEnabled" to="#right-bar-content">
+        <Teleport v-if="searchEnabled" to="#search-teleport">
             <AdvancedSearch v-if="flavour" :flavour="flavour" :query="searchDefaults" />
         </Teleport>
+        <Teleport v-if="enableScores && hasScores" to="#score-teleport">
+            <ScoreWidget v-for="([name, score]) in Object.entries(scores)" :name="name" :score="score" />
+        </Teleport>
     </template>
 </template>
 

From 0c98ed5f54de6867d7c6e7f9fbbbf1f9f2026c74 Mon Sep 17 00:00:00 2001
From: jamiefeiss <jamie.feiss@gmail.com>
Date: Mon, 7 Aug 2023 14:35:17 +1000
Subject: [PATCH 2/3] Added modals for FAIR & CARE scores, added smooth linear
 colour scale option for CircleProgress

---
 src/components/BaseModal.vue          |   2 +-
 src/components/CircleProgress.vue     |  29 ++++--
 src/components/scores/CareScore.vue   | 120 +++++++++++++++++++++++--
 src/components/scores/FairScore.vue   | 121 ++++++++++++++++++++++++--
 src/components/scores/ScoreWidget.vue |   1 -
 5 files changed, 253 insertions(+), 20 deletions(-)

diff --git a/src/components/BaseModal.vue b/src/components/BaseModal.vue
index 37526ca..b5dab50 100644
--- a/src/components/BaseModal.vue
+++ b/src/components/BaseModal.vue
@@ -107,7 +107,7 @@ onUnmounted(() => {
             $borderColor: #c9c9c9;
             display: flex;
             flex-direction: column;
-            padding: 8px;
+            padding: 16px;
             gap: 8px;
             overflow-y: auto;
             border-top: 1px solid $borderColor;
diff --git a/src/components/CircleProgress.vue b/src/components/CircleProgress.vue
index a3f0d67..9c9a8fa 100644
--- a/src/components/CircleProgress.vue
+++ b/src/components/CircleProgress.vue
@@ -7,6 +7,8 @@ const props = defineProps<{
     max?: number;
     percentage?: number;
     label?: string;
+    tickWhenComplete?: boolean;
+    gradient?: boolean;
     // tooltip?: boolean;
 }>();
 
@@ -21,24 +23,39 @@ const percent = computed(() => {
 });
 
 const percentColour = computed(() => {
-    if (percent.value < 30) {
-        return "255, 0, 0"; // red
-    } else if (percent.value < 70) {
+    if (percent.value < 34) {
+        return "230, 0, 0"; // red
+    } else if (percent.value <= 80) {
         return "255, 165, 0"; // orange
-    } else if (percent.value <= 100) {
-        return "0, 255, 0"; // green
+    } else if (percent.value < 100) {
+        return "175, 230, 0"; // light yellowish-green
+    } else if (percent.value == 100) {
+        return "0, 230, 38"; // green
     } else {
         return "128, 128, 128"; // grey, invalid
     }
 });
+
+const percentColourHsl = computed(() => {
+    const startColour = 0; // red
+    const endColour = 75; // light yellowish-green
+    const completeColour = 130; // green
+
+    const hue = percent.value === 100 ? completeColour : (endColour - startColour) * percent.value / 100;
+
+    return `${hue}, 100%, 45%`;
+
+    // 0, 0%, 50% // invalid
+});
 </script>
 
 <template>
     <!-- <component :is="props.tooltip ? ToolTip : 'slot'"> -->
-        <div :class="`circle-progress`" :style="{ background: `conic-gradient(rgb(${percentColour}) ${percent}%, 0, rgba(${percentColour}, 0.2) ${100 - percent}%)` }">
+        <div :class="`circle-progress`" :style="{ background: `conic-gradient(${props.gradient ? `hsl(${percentColourHsl}` : `rgb(${percentColour}`}) ${percent}%, 0, ${props.gradient ? `hsla(${percentColourHsl}` : `rgba(${percentColour}`}, 0.2) ${100 - percent}%)` }">
             <div class="circle-overlay">
                 <span class="circle-value">
                     <template v-if="props.label">{{ props.label }}</template>
+                    <template v-else-if="props.tickWhenComplete && percent === 100"><i class="fa-solid fa-check"></i></template>
                     <template v-else-if="props.value !== undefined && props.max !== undefined">{{ props.value }}/{{ props.max }}</template>
                     <template v-else-if="props.percentage !== undefined">{{ props.percentage }}%</template>
                 </span>
diff --git a/src/components/scores/CareScore.vue b/src/components/scores/CareScore.vue
index ca8f07e..c99e7e3 100644
--- a/src/components/scores/CareScore.vue
+++ b/src/components/scores/CareScore.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import CircleProgress from '@/components/CircleProgress.vue';
+import { ref } from "vue";
+import CircleProgress from "@/components/CircleProgress.vue";
+import BaseModal from "@/components/BaseModal.vue";
 
 // need max scores per sub-score
 const MAX_SCORES: {[key: string]: number} = {
@@ -9,21 +11,70 @@ const MAX_SCORES: {[key: string]: number} = {
     e: 3
 };
 
+// need details for each sub-score
+
 const props = defineProps<{
     score: {[key: string]: number};
 }>();
+
+const showModal = ref<boolean>(false);
 </script>
 
 <template>
     <div class="care-scores">
-        <h5>CARE Score</h5>
+        <div class="score-title">
+            <h5>CARE Score</h5>
+            <button class="btn outline" @click="showModal = true" title="Show details"><i class="fa-regular fa-circle-info"></i></button>
+        </div>
         <div class="circles">
             <div v-for="score in 'care'" class="circle">
-                <CircleProgress :value="props.score[score]" :max="MAX_SCORES[score]" />
+                <CircleProgress :value="props.score[score]" :max="MAX_SCORES[score]" tickWhenComplete />
                 <div class="circle-name">{{ score.toUpperCase() }}</div>
             </div>
         </div>
     </div>
+    <BaseModal v-if="showModal" @modalClosed="showModal = false">
+        <template #headerMiddle><h3>CARE Scores</h3></template>
+        <p>The CARE principles, developed by the <a href="https://www.gida-global.org/care" target="_blank" rel="noopener noreferrer">Global Indigenous Data Alliance (GIDA)</a>, reflect the crucial role of data in advancing Indigenous innovation and self-determination. They ensure that data movements like the open data movement, whatever they're advocating and pursuing, respect the people and purpose behind the data.</p>
+        <div class="score-details">
+            <div class="score-detail">
+                <div class="score-detail-title">
+                    <CircleProgress :value="props.score.c" :max="MAX_SCORES.c" />
+                    <h4>C - Collective Benefit</h4>
+                </div>
+                <div class="score-detail-desc">
+                    <p>Data ecosystems shall be designed and function in ways that enable Indigenous Peoples to derive benefit from the data.</p>
+                </div>
+            </div>
+            <div class="score-detail">
+                <div class="score-detail-title">
+                    <CircleProgress :value="props.score.a" :max="MAX_SCORES.a" />
+                    <h4>A - Authority to Control</h4>
+                </div>
+                <div class="score-detail-desc">
+                    <p>Indigenous Peoples' rights and interests in Indigenous data must be recognised and their authority to control such data be empowered.</p>
+                </div>
+            </div>
+            <div class="score-detail">
+                <div class="score-detail-title">
+                    <CircleProgress :value="props.score.r" :max="MAX_SCORES.r" />
+                    <h4>R - Responsibility</h4>
+                </div>
+                <div class="score-detail-desc">
+                    <p>Those working with Indigenous data have a responsibility to share how those data are used to support Indigenous Peoples' self-determination and collective benefit.</p>
+                </div>
+            </div>
+            <div class="score-detail">
+                <div class="score-detail-title">
+                    <CircleProgress :value="props.score.e" :max="MAX_SCORES.e" />
+                    <h4>E - Ethics</h4>
+                </div>
+                <div class="score-detail-desc">
+                    <p>Indigenous Peoples' rights and wellbeing should be the primary concern at all stages of the data life cycle and across the data ecosystem.</p>
+                </div>
+            </div>
+        </div>
+    </BaseModal>
 </template>
 
 <style lang="scss" scoped>
@@ -32,9 +83,17 @@ const props = defineProps<{
     flex-direction: column;
     gap: 12px;
 
-    h5 {
-        margin: 0;
-        font-size: 1rem;
+    .score-title {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        align-items: center;
+        justify-content: space-between;
+        
+        h5 {
+            margin: 0;
+            font-size: 1rem;
+        }
     }
 
     .circles {
@@ -54,4 +113,53 @@ const props = defineProps<{
         }
     }
 }
+
+.score-details {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .score-detail {
+        background-color: var(--cardBg);
+        border-radius: 4px;
+        overflow: hidden;
+
+        $padding: 8px;
+
+        .score-detail-title {
+            display: flex;
+            flex-direction: row;
+            gap: 8px;
+            align-items: center;
+            // justify-content: space-between;
+            margin-bottom: 8px;
+            border-bottom: 1px solid #9d9d9d;
+            
+            padding: $padding;
+            
+            .circle-progress {
+                $size: 56px;
+                height: $size;
+                width: $size;
+
+                :deep(.circle-overlay) {
+                    // background-color: $titleBg;
+                    background-color: var(--cardBg);
+                    .circle-value {
+                        font-size: 0.85em;
+                    }
+                }
+            }
+        }
+
+        .score-detail-desc {
+            padding: $padding;
+        }
+    }
+}
+
+p {
+    margin-top: 0;
+    margin-bottom: 6px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/scores/FairScore.vue b/src/components/scores/FairScore.vue
index 5f36416..2690ba2 100644
--- a/src/components/scores/FairScore.vue
+++ b/src/components/scores/FairScore.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import CircleProgress from '@/components/CircleProgress.vue';
+import { ref } from "vue";
+import CircleProgress from "@/components/CircleProgress.vue";
+import BaseModal from "@/components/BaseModal.vue";
 
 // need max scores per sub-score
 const MAX_SCORES: {[key: string]: number} = {
@@ -9,21 +11,71 @@ const MAX_SCORES: {[key: string]: number} = {
     r: 7
 };
 
+// need details for each sub-score
+
 const props = defineProps<{
     score: {[key: string]: number};
 }>();
+
+const showModal = ref<boolean>(false);
 </script>
 
 <template>
     <div class="fair-scores">
-        <h5>FAIR Score</h5>
+        <div class="score-title">
+            <h5>FAIR Score</h5>
+            <button class="btn outline" @click="showModal = true" title="Show details"><i class="fa-regular fa-circle-info"></i></button>
+        </div>
         <div class="circles">
             <div v-for="score in 'fair'" class="circle">
-                <CircleProgress :value="props.score[score]" :max="MAX_SCORES[score]" />
+                <CircleProgress :value="props.score[score]" :max="MAX_SCORES[score]" tickWhenComplete />
                 <div class="circle-name">{{ score.toUpperCase() }}</div>
             </div>
         </div>
     </div>
+    <BaseModal v-if="showModal" @modalClosed="showModal = false">
+        <template #headerMiddle><h3>FAIR Scores</h3></template>
+        <p>In 2016, the <a href="https://doi.org/10.1038/sdata.2016.18" target="_blank" rel="noopener noreferrer">'FAIR Guiding Principles for scientific data management and stewardship'</a> were published in the open-access journal, Scientific Data. The authors intended to provide guidelines to improve the Findability, Accessibility, Interoperability, and Reuse of digital assets.</p>
+        <p>The principles are set out in full on the <a href="https://www.go-fair.org/fair-principles/" target="_blank" rel="noopener noreferrer">GO FAIR website</a>. ARDC also offers comprehensive <a href="https://ardc.edu.au/resource/fair-data/" target="_blank" rel="noopener noreferrer">information and training</a>. The FAIR Principles refer to three types of entities: data, metadata and infrastructure. </p>
+        <div class="score-details">
+            <div class="score-detail">
+                <div class="score-detail-title">
+                    <CircleProgress :value="props.score.f" :max="MAX_SCORES.f" />
+                    <h4>F - Findable</h4>
+                </div>
+                <div class="score-detail-desc">
+                    <p>Metadata and data should be easy to find for both humans and computers.</p>
+                </div>
+            </div>
+            <div class="score-detail">
+                <div class="score-detail-title">
+                    <CircleProgress :value="props.score.a" :max="MAX_SCORES.a" />
+                    <h4>A - Accessible</h4>
+                </div>
+                <div class="score-detail-desc">
+                    <p>Once data is found, access information needs to be clearly indicated on the metadata.</p>
+                </div>
+            </div>
+            <div class="score-detail">
+                <div class="score-detail-title">
+                    <CircleProgress :value="props.score.i" :max="MAX_SCORES.i" />
+                    <h4>I - Interoperable</h4>
+                </div>
+                <div class="score-detail-desc">
+                    <p>The data should be able to be integrated with other data.</p>
+                </div>
+            </div>
+            <div class="score-detail">
+                <div class="score-detail-title">
+                    <CircleProgress :value="props.score.r" :max="MAX_SCORES.r" />
+                <h4>R - Reusable</h4>
+                </div>
+                <div class="score-detail-desc">
+                    <p>Metadata and data should be well-described so that they can be replicated and/or combined in different settings.</p>
+                </div>
+            </div>
+        </div>
+    </BaseModal>
 </template>
 
 <style lang="scss" scoped>
@@ -32,9 +84,17 @@ const props = defineProps<{
     flex-direction: column;
     gap: 12px;
 
-    h5 {
-        margin: 0;
-        font-size: 1rem;
+    .score-title {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        align-items: center;
+        justify-content: space-between;
+        
+        h5 {
+            margin: 0;
+            font-size: 1rem;
+        }
     }
 
     .circles {
@@ -54,4 +114,53 @@ const props = defineProps<{
         }
     }
 }
+
+.score-details {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .score-detail {
+        background-color: var(--cardBg);
+        border-radius: 4px;
+        overflow: hidden;
+
+        $padding: 8px;
+
+        .score-detail-title {
+            display: flex;
+            flex-direction: row;
+            gap: 8px;
+            align-items: center;
+            // justify-content: space-between;
+            margin-bottom: 8px;
+            border-bottom: 1px solid #9d9d9d;
+            
+            padding: $padding;
+            
+            .circle-progress {
+                $size: 56px;
+                height: $size;
+                width: $size;
+
+                :deep(.circle-overlay) {
+                    // background-color: $titleBg;
+                    background-color: var(--cardBg);
+                    .circle-value {
+                        font-size: 0.85em;
+                    }
+                }
+            }
+        }
+
+        .score-detail-desc {
+            padding: $padding;
+        }
+    }
+}
+
+p {
+    margin-top: 0;
+    margin-bottom: 6px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/scores/ScoreWidget.vue b/src/components/scores/ScoreWidget.vue
index 8f1b838..b81c888 100644
--- a/src/components/scores/ScoreWidget.vue
+++ b/src/components/scores/ScoreWidget.vue
@@ -9,7 +9,6 @@ const props = defineProps<{
 }>();
 
 const collapse = ref(false); // collapse to a badge
-// click info to open modal
 </script>
 
 <template>

From 685288cf63f67caf13919a0afeac566035654344 Mon Sep 17 00:00:00 2001
From: jamiefeiss <jamie.feiss@gmail.com>
Date: Tue, 8 Aug 2023 13:31:44 +1000
Subject: [PATCH 3/3] Removed unused components & refs for scoring

---
 src/components/scores/ScoreBadge.vue  | 13 -------------
 src/components/scores/ScoreWidget.vue |  3 ---
 src/views/ItemListView.vue            |  2 +-
 3 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 src/components/scores/ScoreBadge.vue

diff --git a/src/components/scores/ScoreBadge.vue b/src/components/scores/ScoreBadge.vue
deleted file mode 100644
index 69dc869..0000000
--- a/src/components/scores/ScoreBadge.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-    <div>
-
-    </div>
-</template>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/scores/ScoreWidget.vue b/src/components/scores/ScoreWidget.vue
index b81c888..2481f7a 100644
--- a/src/components/scores/ScoreWidget.vue
+++ b/src/components/scores/ScoreWidget.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ref } from "vue";
 import FairScore from "@/components/scores/FairScore.vue";
 import CareScore from "@/components/scores/CareScore.vue";
 
@@ -7,8 +6,6 @@ const props = defineProps<{
     score: {[key: string]: number};
     name: string;
 }>();
-
-const collapse = ref(false); // collapse to a badge
 </script>
 
 <template>
diff --git a/src/views/ItemListView.vue b/src/views/ItemListView.vue
index 0983e9e..6ee1a79 100644
--- a/src/views/ItemListView.vue
+++ b/src/views/ItemListView.vue
@@ -340,7 +340,7 @@ onMounted(() => {
             <PaginationComponent :url="route.path" :totalCount="count" :currentPage="currentPageNumber" :perPage="perPage" />
         </template>
         <template v-else>No {{ itemType.label }} found.</template>
-        <Teleport v-if="searchEnabled && flavour" to="#right-bar-content">
+        <Teleport v-if="searchEnabled && flavour" to="#search-teleport">
             <AdvancedSearch :flavour="flavour" :query="searchDefaults" />
         </Teleport>
     </template>