Merge pull request #745 from visualize-admin/fix/search

app/components/debug-search.tsx

@@ -127,10 +127,17 @@ const Search = ({
         {cubes.data?.dataCubes.map((c) => {
           return (
             <div key={c.dataCube.iri}>
-              <Typography variant="h6">{c.highlightedTitle}</Typography>
-              <Typography variant="caption">
-                {c?.highlightedDescription?.slice(0, 100) ?? "" + "..."}
-              </Typography>
+              <Typography
+                variant="h6"
+                dangerouslySetInnerHTML={{ __html: c.highlightedTitle! }}
+              />
+              <Typography
+                variant="caption"
+                dangerouslySetInnerHTML={{
+                  __html:
+                    c?.highlightedDescription?.slice(0, 100) ?? "" + "...",
+                }}
+              />
               <br />
               <Typography variant="caption">{c?.dataCube?.iri}</Typography>
               <Stack spacing={2} direction="row">

app/configurator/components/dataset-browse.tsx

@@ -1169,7 +1169,7 @@ export const DatasetResult = ({
           {highlightedDescription ? (
             <Box
               component="span"
-              sx={{ "& > strong": { backgroundColor: "primaryLight" } }}
+              sx={{ "& > b": { backgroundColor: "primary.light" } }}
               dangerouslySetInnerHTML={{ __html: highlightedDescription }}
             />
           ) : (

app/configurator/components/select-dataset-step.tsx

@@ -64,7 +64,7 @@ const useStyles = makeStyles(() => ({
   },
   panelMiddle: {
     paddingTop: 0,
-    paddingLeft: 6,
+    paddingLeft: 18,
     gridColumnStart: "middle",
     gridColumnEnd: "right",
   },

app/configurator/components/stepper.tsx

@@ -116,7 +116,7 @@ export const StepperDumb = ({
             stepState={steps[currentStepIndex] as StepState | undefined}
           />
         </Flex>
-        <Flex sx={{ minWidth: 200, justifyContent: "flex-end" }}>
+        <Flex sx={{ minWidth: 200, justifyContent: "flex-end", mr: 2 }}>
           <Button
             endIcon={
               state.state === "DESCRIBING_CHART" ? null : <SvgIcChevronRight />

app/rdf/query-cube-metadata.ts

@@ -7,6 +7,7 @@ import { schema, dcat, dcterms, cube } from "../../app/rdf/namespace";
 import { DataCubeOrganization, DataCubeTheme } from "../graphql/query-hooks";
 
 import { makeLocalesFilter } from "./query-labels";
+import { makeVisualizeDatasetFilter } from "./query-utils";
 
 type RawDataCubeTheme = Omit<DataCubeTheme, "__typename">;
 type RawDataCubeOrganization = Omit<DataCubeOrganization, "__typename">;
@@ -129,20 +130,6 @@ export const queryDatasetCountByOrganization = async ({
     .filter((r) => r.iri);
 };
 
-const makeVisualizeDatasetFilter = (options?: { includeDrafts?: boolean }) => {
-  const includeDrafts = options?.includeDrafts || false;
-  return sparql`
-    ?iri ${schema.workExample} <https://ld.admin.ch/application/visualize>.
-    ${
-      includeDrafts
-        ? ""
-        : sparql`?iri ${schema.creativeWorkStatus} <https://ld.admin.ch/vocabulary/CreativeWorkStatus/Published>.`
-    }
-    FILTER NOT EXISTS {?iri ${schema.expires} ?expiryDate }
-    FILTER NOT EXISTS {?iri ${schema.validThrough} ?validThrough }
-    `;
-};
-
 export const queryDatasetCountByTheme = async ({
   sparqlClient,
   organization,

app/rdf/query-search-score-utils.spec.ts

@@ -0,0 +1,23 @@
+import { highlight } from "./query-search-score-utils";
+
+describe("highlighting search words in query", () => {
+  it("should work", () => {
+    const tests = [
+      ["Pollution is bad", "bad", "Pollution is <b>bad</b>"],
+      [
+        "The assessment of bathing waters is made on the basis of hygienic quality using E.coli and intestina",
+        "Bathing",
+        "The assessment of <b>bathing</b> waters is made on the basis of hygienic quality using E.coli and intestina",
+      ],
+      [
+        "GEB - Einmalvergütung für Photovoltaikanlagen",
+        "Einmalvergütung",
+        "GEB - <b>Einmalvergütung</b> für Photovoltaikanlagen",
+      ],
+    ] as [string, string, string][];
+    for (const t of tests) {
+      const result = highlight(t[0], t[1]);
+      expect(result).toEqual(t[2]);
+    }
+  });
+});

app/rdf/query-search-score-utils.ts

@@ -20,24 +20,24 @@ export const weights: Record<string, number> = {
  */
 export const computeScores = (
   scoresRaw: any[],
-  { query }: { query?: string }
+  { query, identifierName }: { query?: string; identifierName: string }
 ) => {
   const infoPerCube = {} as Record<string, { score: number }>;
   if (query) {
     for (let scoreRow of scoresRaw) {
       let score = 0;
       for (let [field, weight] of Object.entries(weights)) {
-        const val = scoreRow[field]?.value;
+        const val = scoreRow[field];
         if (!val) {
           continue;
         }
         for (let tok of query.split(" ")) {
-          if (val.toLowerCase().includes(tok.toLowerCase())) {
+          if (val && val.toLowerCase().includes(tok.toLowerCase())) {
             score += weight;
           }
         }
       }
-      infoPerCube[scoreRow.cube.value] = { score };
+      infoPerCube[scoreRow[identifierName]] = { score };
     }
     for (let k of Object.keys(infoPerCube)) {
       if (infoPerCube[k]?.score === 0) {
@@ -46,8 +46,13 @@ export const computeScores = (
     }
   } else {
     for (let scoreRow of scoresRaw) {
-      infoPerCube[scoreRow.cube.value] = { score: 1 };
+      infoPerCube[scoreRow[identifierName]] = { score: 1 };
     }
   }
   return infoPerCube;
 };
+
+export const highlight = (text: string, query: string) => {
+  const re = new RegExp(query.toLowerCase().split(" ").join("|"), "gi");
+  return text.replace(re, (m) => `<b>${m}</b>`);
+};

app/rdf/query-search.spec.ts

@@ -1,5 +1,3 @@
-import mapValues from "lodash/mapValues";
-
 import { computeScores, weights } from "./query-search-score-utils";
 
 // jest.mock("rdf-ext", () => ({}));
@@ -17,11 +15,12 @@ describe("compute scores", () => {
     { cube: "b", name: "national", description: "economy" },
     { cube: "c", creatorLabel: "national" },
     { cube: "d", creatorLabel: "" },
-  ].map((x) => mapValues(x, (v) => ({ value: v })));
+  ];
 
   it("should compute weighted score per cube from score rows", () => {
     const reduced = computeScores(scores, {
       query: "national economy",
+      identifierName: "cube",
     });
     expect(reduced["a"].score).toEqual(weights.name);
     expect(reduced["b"].score).toEqual(weights.name + weights.description);