Haystack V2: Removing entities completely

This commit is contained in:
2025-07-29 14:52:33 +01:00
parent 3d05ff708e
commit a0bf27dd16
47 changed files with 16 additions and 3052 deletions

View File

@@ -1,28 +0,0 @@
import { ImageComponent } from "@components/image";
import { ItemModal } from "@components/item-modal/ItemModal";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router";
import { Component, For, Show } from "solid-js";
export const Entity: Component = () => {
const params = useParams<{ entityId: string }>();
const { images } = useSearchImageContext();
const entity = () => images().find((i) => i.data.ID === params.entityId);
return (
<Show when={entity()} fallback={<>Sorry, this entity could not be found</>}>
{(e) => (
<div>
<ItemModal item={e()} />
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 bg-white p-4 rounded-xl border border-neutral-200">
<For each={e().data.Images}>
{(imageId) => <ImageComponent ID={imageId} />}
</For>
</div>
</div>
)}
</Show>
);
};

View File

@@ -1,21 +1,8 @@
import { Component, For } from "solid-js";
import { A } from "@solidjs/router";
import {
SearchImageStore,
useSearchImageContext,
} from "@contexts/SearchImageContext";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import fastHashCode from "../../utils/hash";
// TODO: lots of stuff to do with Entities, this could be seperated into a centralized place.
const CategoryColor: Record<
keyof ReturnType<SearchImageStore["categories"]>,
string
> = {
contact: "bg-orange-50",
location: "bg-red-50",
event: "bg-purple-50",
};
const colors = [
"bg-emerald-50",
"bg-lime-50",
@@ -31,30 +18,10 @@ const colors = [
];
export const Categories: Component = () => {
const { categories, lists } = useSearchImageContext();
const { lists } = useSearchImageContext();
return (
<div class="rounded-xl bg-white p-4 flex flex-col gap-2">
<h2 class="text-xl font-bold">Entities</h2>
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4">
<For each={Object.entries(categories())}>
{([category, group]) => (
<A
href={`/gallery/${category}`}
class={
"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
"capitalize " +
CategoryColor[category as keyof typeof CategoryColor] +
" " +
(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
}
>
<p class="text-xl font-bold">{category}s</p>
<p class="text-lg">{group.length}</p>
</A>
)}
</For>
</div>
<h2 class="text-xl font-bold">Generated Lists</h2>
<div class="w-full grid grid-cols-3 auto-rows-[minmax(100px,1fr)] gap-4">
<For each={lists()}>

View File

@@ -1,52 +0,0 @@
import { Component, For, Show } from "solid-js";
import { useParams } from "@solidjs/router";
import { union, literal, safeParse, InferOutput, parse } from "valibot";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { SearchCard } from "@components/search-card/SearchCard";
const entityValidator = union([
literal("event"),
literal("note"),
literal("location"),
literal("contact"),
]);
const EntityGallery: Component<{
entity: InferOutput<typeof entityValidator>;
}> = (props) => {
// Just to be doubly sure.
parse(entityValidator, props.entity);
// These names are being silly. Entity or Category?
const { images } = useSearchImageContext();
const filteredCategories = () =>
images().filter((i) => i.type === props.entity);
return (
<div class="w-full flex flex-col gap-4 capitalize bg-white rounded-xl p-4">
<h2 class="font-bold text-xl">
{props.entity}s ({filteredCategories().length})
</h2>
<div class="grid grid-cols-3 gap-4">
<For each={filteredCategories()}>
{(category) => <SearchCard item={category} />}
</For>
</div>
</div>
);
};
export const Gallery: Component = () => {
const params = useParams();
const validated = safeParse(entityValidator, params.entity);
return (
<Show
when={validated.success}
fallback={<p>Sorry, this entity is not supported</p>}
>
<EntityGallery entity={validated.output as any} />
</Show>
);
};

View File

@@ -1,25 +1,16 @@
import { ImageComponent } from "@components/image";
import { SearchCard } from "@components/search-card/SearchCard";
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { UserImage } from "@network/index";
import { useParams } from "@solidjs/router";
import { createEffect, For, Show, type Component } from "solid-js";
import { type Component } from "solid-js";
import SolidjsMarkdown from "solidjs-markdown";
export const ImagePage: Component = () => {
const { imageId } = useParams<{ imageId: string }>();
const { imagesWithProperties, userImages } = useSearchImageContext();
const { userImages } = useSearchImageContext();
const image = () => userImages().find((i) => i.ImageID === imageId);
createEffect(() => {
console.log(userImages());
});
const imageProperties = (): UserImage[] | undefined =>
Object.entries(imagesWithProperties()).find(([id]) => id === imageId)?.[1];
return (
<main class="flex flex-col items-center gap-4">
<div class="w-full bg-white rounded-xl p-4">
@@ -29,15 +20,7 @@ export const ImagePage: Component = () => {
<h2 class="font-bold text-xl">Description</h2>
<SolidjsMarkdown>{image()?.Image.Description}</SolidjsMarkdown>
</div>
<div class="w-full grid grid-cols-3 gap-2 grid-flow-row-dense p-4 bg-white rounded-xl">
<Show when={imageProperties()}>
{(image) => (
<For each={image()}>
{(property) => <SearchCard item={property} />}
</For>
)}
</Show>
</div>
<div class="w-full grid grid-cols-3 gap-2 grid-flow-row-dense p-4 bg-white rounded-xl"></div>
</main>
);
};

View File

@@ -1,9 +1,7 @@
export * from "./front";
export * from "./gallery";
export * from "./image";
export * from "./settings";
export * from "./login";
export * from "./entity";
export * from "./search";
export * from "./all-images";
export * from "./list";

View File

@@ -2,13 +2,13 @@ import { Component, createSignal, For } from "solid-js";
import { Search } from "@kobalte/core/search";
import { IconSearch } from "@tabler/icons-solidjs";
import { useSearch } from "./search";
import { UserImage } from "@network/index";
import { SearchCard } from "@components/search-card/SearchCard";
import { JustTheImageWhatAreTheseNames } from "@network/index";
export const SearchPage: Component = () => {
const fuse = useSearch();
const [searchItems, setSearchItems] = createSignal<UserImage[]>([]);
const [searchItems, setSearchItems] =
createSignal<JustTheImageWhatAreTheseNames>([]);
return (
<Search
@@ -36,7 +36,9 @@ export const SearchPage: Component = () => {
<Search.Portal>
<Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
<Search.Arrow />
<For each={searchItems()}>{(item) => <SearchCard item={item} />}</For>
<For each={searchItems()}>
{(item) => <div>{item.Image.Description}</div>}
</For>
<Search.NoResult>No result found</Search.NoResult>
</Search.Content>
</Search.Portal>

View File

@@ -1,46 +1,12 @@
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { UserImage } from "@network/index";
import Fuse from "fuse.js";
// This language is stupid. `keyof` only returns common keys but this somehow doesnt.
type KeysOfUnion<T> = T extends T ? keyof T : never;
const weightedTerms: Record<
KeysOfUnion<UserImage["data"]>,
number | undefined
> = {
ID: undefined,
LocationID: undefined,
OrganizerID: undefined,
Images: undefined,
Description: 10,
Name: 5,
Address: 2,
PhoneNumber: 2,
Email: 2,
CreatedAt: 1,
StartDateTime: 1,
EndDateTime: 1,
};
export const useSearch = () => {
const { images, userImages } = useSearchImageContext();
const imageDescriptions = () =>
userImages().map((i) => ({ data: { Description: i.Image.Description } }));
const { userImages } = useSearchImageContext();
return () =>
new Fuse([...images(), ...imageDescriptions()], {
new Fuse(userImages(), {
shouldSort: true,
keys: Object.entries(weightedTerms)
.filter(([, w]) => w != null)
.map(([name, weight]) => ({
name: `data.${name}`,
weight,
})),
keys: ["Image.Description"],
});
};