Skip to content

Commit

Permalink
Merge pull request #249 from JaneliaSciComp/order-search-result-proje…
Browse files Browse the repository at this point in the history
…ct-cards-by-match-score

layout: if search query, order cards by relevance score
  • Loading branch information
allison-truhlar authored May 23, 2024
2 parents d864efb + b1cfdb0 commit bafca2d
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 8 deletions.
24 changes: 19 additions & 5 deletions src/components/projects/CardContainer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,13 @@ export default function CardContainer({
contentType,
}) {
const [visible, setVisible] = useState("relative");
const [order, setOrder] = useState(0);
const urlQuery = useStore($urlQuery);
const projectData = useStore($projectData);
const ecosystemData = useStore($ecosystemData);
const $selectedTags = useStore(selectedTags);
const $selectedProjectType = useStore(selectedProjectType);
const tagsArray = extractUniqueTagValueArray(tagsObj);

let contentData = null;
if (contentType === "projects") {
Expand All @@ -33,18 +37,27 @@ export default function CardContainer({
}
}

const $selectedTags = useStore(selectedTags);
const $selectedProjectType = useStore(selectedProjectType);
const tagsArray = extractUniqueTagValueArray(tagsObj);
function findMatchingIndex(contentData, title) {
if (!contentData) {
return -1;
}

const index = contentData.findIndex(
(content) => content.item.title === title
);
return index;
}

//determine whether card is visible or not based on: search query, tag selections, project type selections
useEffect(() => {
if (typeof window !== "undefined") {
const matchingIndex = findMatchingIndex(contentData, title);
setOrder(matchingIndex);

const isSearchMatch =
(urlQuery === "" &&
(contentData === null || contentData.length === 0)) ||
(contentData &&
contentData.some((content) => content.item.title === title));
(contentData && matchingIndex !== -1);

const hasMatchingTags =
$selectedTags.length === 0 ||
Expand Down Expand Up @@ -73,6 +86,7 @@ export default function CardContainer({

return (
<div
style={{ order }}
className={`${visible} col-span-1 w-full h-full mx-auto mb-4 bg-white dark:bg-slate-900 rounded-md shadow-md overflow-hidden border-gray-200 dark:border-slate-800 border-2 hover:shadow-lg transition duration-300 transform hover:scale-105`}
>
<a href={url} className="absolute top-0 left-0 bottom-0 right-0"></a>
Expand Down
2 changes: 2 additions & 0 deletions src/components/projects/stores/projectSearchResultsStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const $projectsFuse = atom(null);
const projectsOptions = {
ignoreLocation: true,
threshold: 0.3,
includeScore: true,
keys: [
"title",
"tagline",
Expand Down Expand Up @@ -51,6 +52,7 @@ export const $projectData = computed(
// Handle fuse search
if (currentFuseInstance) {
const searchResults = currentFuseInstance.search(currentUrlQuery);
console.log(searchResults);
return searchResults;
}
}
Expand Down
4 changes: 1 addition & 3 deletions src/pages/projects.json.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import { getCollection } from "astro:content";
import Fuse from "fuse.js";

async function getProjects() {
const allProjects = (await getCollection("projects")).sort(
(a, b) => a.data.title.valueOf() - b.data.title.valueOf()
);
const allProjects = await getCollection("projects");
return allProjects.map((project) => ({
title: project.data.title,
tagline: project.data.tagline,
Expand Down

0 comments on commit bafca2d

Please sign in to comment.