332 lines
12 KiB
TypeScript
332 lines
12 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
|
|
type Definition = {
|
|
source: string;
|
|
title: string;
|
|
url: string;
|
|
definition: string;
|
|
};
|
|
|
|
type BulkTermMeta = {
|
|
definitions_count: number;
|
|
taxonomy_count: number;
|
|
};
|
|
|
|
type BulkTermResult = {
|
|
term: string;
|
|
results: Definition[];
|
|
taxonomy?: TaxonomyMatch[];
|
|
meta: BulkTermMeta;
|
|
error?: string | null;
|
|
};
|
|
|
|
type BulkDefinitionResponse = {
|
|
terms: string[];
|
|
results: Record<string, BulkTermResult>;
|
|
request_id?: string | null;
|
|
};
|
|
|
|
type TaxonomyMatch = {
|
|
category: string;
|
|
class_name: string;
|
|
class_code: string;
|
|
type_description?: string | null;
|
|
type_code?: string | null;
|
|
annex?: string | null;
|
|
full_name: string;
|
|
};
|
|
|
|
const API_BASE_URL =
|
|
import.meta.env.VITE_API_BASE_URL?.toString() || "http://localhost:8000";
|
|
|
|
const MAX_TERMS = 5;
|
|
|
|
export default function App() {
|
|
const [termInput, setTermInput] = useState("");
|
|
const [resultsByTerm, setResultsByTerm] = useState<
|
|
Record<string, BulkTermResult>
|
|
>({});
|
|
const [orderedTerms, setOrderedTerms] = useState<string[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const parsedTerms = useMemo(() => {
|
|
const terms: string[] = [];
|
|
const seen = new Set<string>();
|
|
for (const line of termInput.split(/\r?\n/)) {
|
|
const trimmed = line.trim();
|
|
if (!trimmed || seen.has(trimmed)) continue;
|
|
terms.push(trimmed);
|
|
seen.add(trimmed);
|
|
}
|
|
return terms;
|
|
}, [termInput]);
|
|
|
|
const hasTooManyTerms = parsedTerms.length > MAX_TERMS;
|
|
const canSearch = parsedTerms.length > 0 && !hasTooManyTerms && !loading;
|
|
|
|
const apiUrl = useMemo(() => {
|
|
const url = new URL("/api/definitions/bulk", API_BASE_URL);
|
|
return url.toString();
|
|
}, [API_BASE_URL]);
|
|
|
|
const summary = useMemo(() => {
|
|
let definitions = 0;
|
|
let taxonomy = 0;
|
|
let failed = 0;
|
|
|
|
for (const term of orderedTerms) {
|
|
const item = resultsByTerm[term];
|
|
if (!item) continue;
|
|
if (item.error) failed += 1;
|
|
definitions += item.meta?.definitions_count ?? item.results?.length ?? 0;
|
|
taxonomy += item.meta?.taxonomy_count ?? item.taxonomy?.length ?? 0;
|
|
}
|
|
|
|
return { definitions, taxonomy, failed };
|
|
}, [orderedTerms, resultsByTerm]);
|
|
|
|
const handleSearch = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
|
|
if (!canSearch) return;
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await fetch(apiUrl, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ terms: parsedTerms }),
|
|
});
|
|
if (!response.ok) {
|
|
let message = "Failed to fetch definitions.";
|
|
try {
|
|
const payload = (await response.json()) as { detail?: string };
|
|
if (payload?.detail) {
|
|
message = payload.detail;
|
|
}
|
|
} catch {
|
|
// ignore JSON parsing errors
|
|
}
|
|
throw new Error(message);
|
|
}
|
|
const data = (await response.json()) as BulkDefinitionResponse;
|
|
setOrderedTerms(data.terms ?? parsedTerms);
|
|
setResultsByTerm(data.results ?? {});
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Something went wrong.");
|
|
setOrderedTerms([]);
|
|
setResultsByTerm({});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen px-6 py-12">
|
|
<div className="mx-auto flex w-full max-w-3xl flex-col gap-8">
|
|
<header className="space-y-3">
|
|
<p className="text-sm font-semibold uppercase tracking-wide text-sky-600">
|
|
TermSearch
|
|
</p>
|
|
<h1 className="text-4xl font-semibold text-slate-900">
|
|
Oil & Gas term definitions
|
|
</h1>
|
|
<p className="text-base text-slate-600">
|
|
Search multiple glossary sources from a single interface.
|
|
</p>
|
|
</header>
|
|
|
|
<form
|
|
onSubmit={handleSearch}
|
|
className="flex flex-col gap-4 rounded-2xl bg-white p-6 shadow-sm"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-sm font-medium text-slate-700" htmlFor="terms">
|
|
Search terms (one per line)
|
|
</label>
|
|
<span
|
|
className={`text-xs ${
|
|
hasTooManyTerms ? "text-rose-600" : "text-slate-500"
|
|
}`}
|
|
>
|
|
{parsedTerms.length}/{MAX_TERMS} terms
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col gap-3 sm:flex-row">
|
|
<textarea
|
|
id="terms"
|
|
name="terms"
|
|
rows={4}
|
|
value={termInput}
|
|
onChange={(
|
|
event: React.ChangeEvent<HTMLTextAreaElement>
|
|
) => setTermInput(event.target.value)}
|
|
placeholder={`Ex:\ngas lift\npump\nflow assurance`}
|
|
className="flex-1 rounded-xl border border-slate-200 px-4 py-3 text-base focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={!canSearch}
|
|
className="rounded-xl bg-sky-600 px-6 py-3 text-base font-semibold text-white transition hover:bg-sky-700 disabled:cursor-not-allowed disabled:bg-slate-300"
|
|
>
|
|
{loading ? "Searching..." : "Search"}
|
|
</button>
|
|
</div>
|
|
{hasTooManyTerms ? (
|
|
<p className="text-xs text-rose-600">
|
|
Maximum of {MAX_TERMS} terms allowed. Please remove extra terms to
|
|
continue.
|
|
</p>
|
|
) : (
|
|
<p className="text-xs text-slate-500">
|
|
Maximum of {MAX_TERMS} terms per search.
|
|
</p>
|
|
)}
|
|
<p className="text-xs text-slate-500">
|
|
API base: <span className="font-medium">{API_BASE_URL}</span>
|
|
</p>
|
|
</form>
|
|
|
|
<section className="space-y-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<h2 className="text-xl font-semibold text-slate-800">Results</h2>
|
|
<span className="text-sm text-slate-500">
|
|
{summary.definitions} definitions · {summary.taxonomy} taxonomy
|
|
matches · {summary.failed} failed term
|
|
{summary.failed === 1 ? "" : "s"}
|
|
</span>
|
|
</div>
|
|
|
|
{error ? (
|
|
<div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-600">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
{orderedTerms.length === 0 && !loading ? (
|
|
<div className="rounded-xl border border-dashed border-slate-200 bg-white p-6 text-sm text-slate-500">
|
|
No definitions yet. Add terms and search.
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="space-y-6">
|
|
{orderedTerms.map((term) => {
|
|
const item = resultsByTerm[term];
|
|
const definitions = item?.results ?? [];
|
|
const taxonomy = item?.taxonomy ?? [];
|
|
const termError = item?.error;
|
|
|
|
return (
|
|
<section
|
|
key={term}
|
|
className="space-y-4 rounded-2xl border border-slate-100 bg-white p-5 shadow-sm"
|
|
>
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<h3 className="text-lg font-semibold text-slate-900">
|
|
{term}
|
|
</h3>
|
|
<span className="text-xs text-slate-500">
|
|
{definitions.length} source
|
|
{definitions.length === 1 ? "" : "s"} · {taxonomy.length}
|
|
{taxonomy.length === 1 ? " match" : " matches"}
|
|
</span>
|
|
</div>
|
|
|
|
{termError ? (
|
|
<div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-600">
|
|
{termError}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="space-y-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
|
Definitions
|
|
</h4>
|
|
{definitions.length === 0 ? (
|
|
<div className="rounded-xl border border-dashed border-slate-200 bg-white p-4 text-sm text-slate-500">
|
|
No definitions found for this term.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{definitions.map((result) => (
|
|
<article
|
|
key={`${term}-${result.source}-${result.title}`}
|
|
className="rounded-xl border border-slate-100 bg-white p-4 shadow-sm"
|
|
>
|
|
<h5 className="text-xs font-semibold uppercase tracking-wide text-sky-600">
|
|
{result.source}
|
|
</h5>
|
|
<p className="mt-2 text-base font-semibold text-slate-900">
|
|
{result.title}
|
|
</p>
|
|
<a
|
|
href={result.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="mt-2 inline-flex text-sm font-medium text-sky-600 hover:text-sky-700"
|
|
>
|
|
View source
|
|
</a>
|
|
<p className="mt-2 text-sm text-slate-700">
|
|
{result.definition}
|
|
</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
|
ISO 14224 Taxonomy
|
|
</h4>
|
|
{taxonomy.length === 0 ? (
|
|
<div className="rounded-xl border border-dashed border-slate-200 bg-white p-4 text-sm text-slate-500">
|
|
No taxonomy matches found for this term.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{taxonomy.map((item) => (
|
|
<article
|
|
key={`${term}-${item.class_code}-${
|
|
item.type_code ?? "class"
|
|
}`}
|
|
className="rounded-xl border border-slate-100 bg-white p-4 shadow-sm"
|
|
>
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-emerald-600">
|
|
{item.category}
|
|
</p>
|
|
<h5 className="mt-2 text-base font-semibold text-slate-900">
|
|
{item.full_name}
|
|
</h5>
|
|
<div className="mt-2 flex flex-wrap gap-3 text-sm text-slate-600">
|
|
<span>
|
|
Class: {item.class_name} ({item.class_code})
|
|
</span>
|
|
{item.type_description ? (
|
|
<span>
|
|
Type: {item.type_description} ({item.type_code})
|
|
</span>
|
|
) : null}
|
|
{item.annex ? <span>Annex: {item.annex}</span> : null}
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|