From 9ebdd203c926b6564642e0bf0f8dd65b037db71a Mon Sep 17 00:00:00 2001 From: "@s.roertgen" Date: Thu, 28 Mar 2024 10:19:41 +0100 Subject: [PATCH] Add `scopeNote` as searchable field. #285 Added test for scopeNote. Added documentation on how to add searchable fields. --- README.md | 20 ++++++++++++++ cypress/config.e2e.yaml | 1 + cypress/e2e/searchAndFilter.cy.js | 14 ++++++++++ gatsby-node.js | 10 +------ src/common.js | 1 + src/hooks/configAndConceptSchemes.js | 40 ++++++++++++++++++++++++++++ src/templates/App.jsx | 2 +- src/templates/helpers.js | 18 +++++-------- 8 files changed, 84 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 7532566..5536142 100644 --- a/README.md +++ b/README.md @@ -143,6 +143,7 @@ You can configure the following settings: - Logo - Colors - Fonts +- Searchable Fields The settings are explained in the following sections. @@ -275,6 +276,25 @@ url: [String] This will add the `url` field, being an array of strings. For other types, compare with already existing properties and just copy as you need. +## Adding Searchable Fields + +To add a field to be searchable you have to make the following adjustments: + +- Add the field in the `config.yaml` file to `searchableAttributes`, e.g. `editorialNote` +- In `src/queries.js` add it to `ConceptFields` (around line 176): +```graphql +editorialNote { + ${[...languages].join(" ")} +} +``` +- Add it to the labels to be indexed. Go to `gatsby-node.js` and add it the document object around line 341. For fields being *single* language tagged labels (e.g. `skos:prefLabel`) use `prefLabel` as an example. For fields being arrays of language tagged labels (e.g. `skos:altLabel`) use `altLabel` as an example. For `skos:editorialNote` it would be: +```js +...(concept.editorialNote && +Object.hasOwn(concept.editorialNote, language) && { + editorialNote: i18n(language)(concept.editorialNote), +}), +``` + ## Troubleshooting Depending on special circumstances you may get errors in the log files, e.g. diff --git a/cypress/config.e2e.yaml b/cypress/config.e2e.yaml index 4b2ceb4..8046a3f 100644 --- a/cypress/config.e2e.yaml +++ b/cypress/config.e2e.yaml @@ -10,6 +10,7 @@ searchableAttributes: - "hiddenLabel" - "example" - "definition" + - "scopeNote" ui: title: "SkoHub Vocabs" # Title is mandatory logo: "skohub-signet-color.svg" # Path diff --git a/cypress/e2e/searchAndFilter.cy.js b/cypress/e2e/searchAndFilter.cy.js index b64e0f0..38503dc 100644 --- a/cypress/e2e/searchAndFilter.cy.js +++ b/cypress/e2e/searchAndFilter.cy.js @@ -151,4 +151,18 @@ describe("search and filter", () => { cy.get("#closeModal").click() cy.get("span").contains("Konzept 1").should("exist") }) + + it("turning on scopeNote checkbox returns scopeNote matches", () => { + cy.visit("/w3id.org/index.html", { + onBeforeLoad(win) { + Object.defineProperty(win.navigator, "language", { value: "de-DE" }) + }, + }) + cy.findByRole("textbox").type("Scope") + cy.get("p").contains("Nothing found").should("exist") + cy.get("#settings").click() + cy.get("#scopeNoteCheckBox").click() + cy.get("#closeModal").click() + cy.get("span").contains("Konzept 1").should("exist") + }) }) diff --git a/gatsby-node.js b/gatsby-node.js index 9f6c549..e0db5a3 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -289,15 +289,7 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => { document: { id: "id", // store: ["prefLabel", "altLabel"], /* not working when importing, bug in flexsearch */ - index: [ - "notation", - "prefLabel", - "altLabel", - "hiddenLabel", - "definition", - "example", - "scopeNote" - ], + index: [...config.searchableAttributes], }, }) return [l, index] diff --git a/src/common.js b/src/common.js index 54c0efd..9064e1a 100644 --- a/src/common.js +++ b/src/common.js @@ -98,6 +98,7 @@ const parseLanguages = (graph) => { * @property {string} tokenizer * @property {Object} colors * @property {string} customDomain + * @property {string[]} searchableAttributes */ /** diff --git a/src/hooks/configAndConceptSchemes.js b/src/hooks/configAndConceptSchemes.js index 2becd67..161f618 100644 --- a/src/hooks/configAndConceptSchemes.js +++ b/src/hooks/configAndConceptSchemes.js @@ -1,5 +1,45 @@ import { useStaticQuery, graphql } from "gatsby" +/** + * @returns {{ + * config: { + * colors: { + * skoHubWhite: string, + * skoHubDarkColor: string, + * skoHubMiddleColor: string, + * skoHubLightColor: string, + * skoHubThinColor: string, + * skoHubBlackColor: string, + * skoHubAction: string, + * skoHubNotice: string, + * skoHubDarkGrey: string, + * skoHubMiddleGrey: string, + * skoHubLightGrey: string + * }, + * logo: string, + * title: string, + * fonts: { + * bold: { + * font_family: string, + * font_style: string, + * font_weight: string, + * name: string + * }, + * regular: { + * font_family: string, + * font_style: string, + * font_weight: string, + * name: string + * } + * }, + * searchableAttributes: string[], + * customDomain: string, + * failOnValidation: boolean + * }, + * conceptSchemes: Object + * }} An object containing `config` and `conceptSchemes` + * + */ export const getConfigAndConceptSchemes = () => { const { site, allConceptScheme } = useStaticQuery(graphql` query Colors { diff --git a/src/templates/App.jsx b/src/templates/App.jsx index 57cd894..52d8d9e 100644 --- a/src/templates/App.jsx +++ b/src/templates/App.jsx @@ -130,7 +130,7 @@ const App = ({ pageContext, children, location }) => { labels, data.selectedLanguage, setIndex, - config.customDomain + config ) }, [data, language, labels]) diff --git a/src/templates/helpers.js b/src/templates/helpers.js index 6e87d6b..c28d1b8 100644 --- a/src/templates/helpers.js +++ b/src/templates/helpers.js @@ -1,6 +1,6 @@ import { useEffect } from "react" import Document from "flexsearch/dist/module/document.js" -import { i18n, getFilePath } from "../common" +import { getFilePath } from "../common" import { withPrefix } from "gatsby" export const handleKeypresses = (labels, setLabels) => { @@ -62,7 +62,7 @@ export const importIndex = async ( labels, language, setIndex, - customDomain + config ) => { if (!conceptSchemeId) return const idx = new Document({ @@ -72,15 +72,7 @@ export const importIndex = async ( document: { id: "id", // store: ["prefLabel", "altLabel"], /* not working flexsearchside */ - index: [ - "notation", - "prefLabel", - "altLabel", - "hiddenLabel", - "definition", - "example", - "scopeNote" - ], + index: [...config.searchableAttributes], }, }) // filter from labels object the selected entries @@ -102,7 +94,9 @@ export const importIndex = async ( try { const path = getFilePath(conceptSchemeId) + `-cs/search/${language}/${key}` - data = await fetch(withPrefix(getFilePath(path, `json`, customDomain))) + data = await fetch( + withPrefix(getFilePath(path, `json`, config.customDomain)) + ) const jsonData = await data.json() idx.import(key, jsonData ?? null) } catch (e) {