adriano/nist-ai-glossary-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: adriano:92416a03be672c2d2bd99886b663667d4937417f
Branches Tags
adriano:main
...
compare: adriano:main
Branches Tags
adriano:main

6 Commits
92416a03be ... main

Author SHA1 Message Date
Adrian Rumpold
06bf874b80 Switch to SWC Vite plugin, ESLint rules 2025-05-22 09:26:56 +02:00
Adrian Rumpold
0335e0cedb Use suspense / error boundary 2025-05-22 08:13:43 +02:00
Adrian Rumpold
7ccaa531e1 Fix overflow on narrow screens 2025-05-21 12:46:16 +02:00
Adrian Rumpold
6ad3ad8044 Remove page min-width 2025-05-21 12:34:35 +02:00
Adrian Rumpold
e31ed72957 Implement citations 2025-05-21 12:29:12 +02:00
Adrian Rumpold
7a0355aebf Add license footer 2025-05-21 10:14:09 +02:00
19 changed files with 883 additions and 674 deletions
Expand all files Collapse all files

42
eslint.config.js
View File

@@ -1,28 +1,42 @@
import js from '@eslint/js' import js from "@eslint/js";
import globals from 'globals' import reactDOM from "eslint-plugin-react-dom";
import reactHooks from 'eslint-plugin-react-hooks' import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from 'eslint-plugin-react-refresh' import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from 'typescript-eslint' import reactX from "eslint-plugin-react-x";
import globals from "globals";
import tseslint from "typescript-eslint";
export default tseslint.config( export default tseslint.config(
{ ignores: ['dist'] }, { ignores: ["dist"] },
{ {
extends: [js.configs.recommended, ...tseslint.configs.recommended], extends: [
files: ['**/*.{ts,tsx}'], js.configs.recommended,
...tseslint.configs.recommendedTypeChecked,
...tseslint.configs.stylisticTypeChecked,
],
files: ["**/*.{ts,tsx}"],
languageOptions: { languageOptions: {
ecmaVersion: 2020, ecmaVersion: 2020,
globals: globals.browser, globals: globals.browser,
parserOptions: {
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
tsconfigRootDir: import.meta.dirname,
},
}, },
plugins: { plugins: {
'react-hooks': reactHooks, "react-hooks": reactHooks,
'react-refresh': reactRefresh, "react-refresh": reactRefresh,
"react-x": reactX,
"react-dom": reactDOM,
}, },
rules: { rules: {
...reactHooks.configs.recommended.rules, ...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [ ...reactX.configs["recommended-typescript"].rules,
'warn', ...reactDOM.configs.recommended.rules,
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true }, { allowConstantExport: true },
], ],
}, },
}, }
) );

17
index.html
View File

@@ -7,7 +7,24 @@
<title>NIST AI Glossary Browser</title> <title>NIST AI Glossary Browser</title>
</head> </head>
<body> <body>
<main>
<div id="root"></div> <div id="root"></div>
</main>
<footer>
The content on this web site is based on Daniel Atherton, Reva Schwartz,
Peter C. Fontana, Patrick Hall (2023) The Language of Trustworthy AI: An
In-Depth Glossary of Terms. (National Institute of Standards and
Technology, Gaithersburg, MD), NIST Artificial Intelligence
<a href="https://doi.org/10.6028/NIST.AI.100-3" target="_blank"
>AI 100-3</a
>, republished courtesy of the National Institute of Standards and
Technology.
<a
href="https://www.nist.gov/open/copyright-fair-use-and-licensing-statements-srd-data-software-and-technical-series-publications#techpubs"
>License conditions</a
>
apply.
</footer>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

1131
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -22,10 +22,12 @@
"@types/papaparse": "^5.3.16", "@types/papaparse": "^5.3.16",
"@types/react": "^19.1.2", "@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2", "@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^4.4.1", "@vitejs/plugin-react-swc": "^3.9.0",
"eslint": "^9.25.0", "eslint": "^9.25.0",
"eslint-plugin-react-dom": "^1.49.0",
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.19",
"eslint-plugin-react-x": "^1.49.0",
"globals": "^16.0.0", "globals": "^16.0.0",
"typescript": "~5.8.3", "typescript": "~5.8.3",
"typescript-eslint": "^8.30.1", "typescript-eslint": "^8.30.1",

30
src/App.tsx
View File

@@ -1,18 +1,18 @@
import { useState } from "react"; import { useState } from "react";
import AlphabeticalFilter from "./components/AlphabeticalFilter/AlphabeticalFilter"; import AlphabeticalFilter from "./components/AlphabeticalFilter/AlphabeticalFilter";
import CitationEntry from "./components/CitationEntry/CitationEntry";
import GlossaryEntry from "./components/GlossaryEntry/GlossaryEntry"; import GlossaryEntry from "./components/GlossaryEntry/GlossaryEntry";
import StringFilter from "./components/StringFilter/StringFilter"; import StringFilter from "./components/StringFilter/StringFilter";
import useGlossary from "./hooks/useGlossary"; import useGlossary from "./hooks/useGlossary";
function App() { function App() {
const { data: glossary, error, isPending } = useGlossary(); const { glossary, citations } = useGlossary();
const [alphabeticalFilter, setAlphabeticalFilter] = useState(""); const [alphabeticalFilter, setAlphabeticalFilter] = useState("");
const [stringFilter, setStringFilter] = useState(""); const [stringFilter, setStringFilter] = useState("");
const [selectedCitation, setSelectedCitation] = useState<string | null>(null);
if (isPending) return <div>Loading...</div>; const entries = glossary
if (error) return <div>Error: {error.message}</div>;
const entries = glossary?.definitions
.filter((entry) => { .filter((entry) => {
if (!stringFilter) { if (!stringFilter) {
return true; return true;
@@ -30,16 +30,28 @@ function App() {
}); });
return ( return (
<div> <>
<StringFilter onChange={setStringFilter} /> <StringFilter onChange={setStringFilter} />
<AlphabeticalFilter onChange={setAlphabeticalFilter} /> <AlphabeticalFilter onChange={setAlphabeticalFilter} />
{entries.length} entries found {entries.length} entries found
<dl> {selectedCitation && (
<CitationEntry
citation={citations.find(
(citation) => citation.key === selectedCitation
)}
onClose={() => setSelectedCitation(null)}
/>
)}
<dl style={{ maxWidth: "min(100vw, 64ch)" }}>
{entries.map((term) => ( {entries.map((term) => (
<GlossaryEntry term={term} key={term.term} /> <GlossaryEntry
term={term}
key={term.term}
onSelectCitation={setSelectedCitation}
/>
))} ))}
</dl> </dl>
</div> </>
); );
} }
export default App; export default App;

5
src/components/AlphabeticalFilter/AlphabeticalFilter.tsx
View File

@@ -1,9 +1,9 @@
import { useState } from "react"; import { useState } from "react";
import "./AlphabeticalFilter.css"; import "./AlphabeticalFilter.css";
type AlphabeticalFilterProps = { interface AlphabeticalFilterProps {
onChange: (value: string) => void; onChange: (value: string) => void;
}; }
function AlphabeticalFilter({ onChange }: AlphabeticalFilterProps) { function AlphabeticalFilter({ onChange }: AlphabeticalFilterProps) {
const [selectedLetter, setSelectedLetter] = useState<string | null>(null); const [selectedLetter, setSelectedLetter] = useState<string | null>(null);
@@ -24,6 +24,7 @@ function AlphabeticalFilter({ onChange }: AlphabeticalFilterProps) {
const buttons = letters.map((letter) => ( const buttons = letters.map((letter) => (
<button <button
onClick={() => handleClick(letter)} onClick={() => handleClick(letter)}
type="button"
key={letter} key={letter}
className={[ className={[
"alphabetical-filter-button", "alphabetical-filter-button",

16
src/components/CitationEntry/CitationEntry.css Normal file
View File

@@ -0,0 +1,16 @@
.citation-entry {
display: flex;
flex-direction: column;
padding: 10px;
margin-bottom: 10px;
gap: 1rem;
max-width: 48ch;
.title {
font-weight: bold;
}
.authors {
font-style: italic;
}
}

60
src/components/CitationEntry/CitationEntry.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { useEffect, useRef } from "react";
import type { Citation } from "../../lib/nist-api";
import "./CitationEntry.css";
interface CitationEntryProps {
citation?: Citation;
onClose?: () => void;
}
export default function CitationEntry({
citation,
onClose,
}: CitationEntryProps) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!ref.current) {
return;
}
if (citation) {
ref.current.showPopover();
}
}, [citation]);
if (!citation) {
return null;
}
const richTitle = citation.year
? `${citation.title} (${citation.year})`
: citation.title;
const onToggle = (e: React.ToggleEvent) => {
if (e.newState === "closed") {
onClose?.();
}
};
return (
<div
popover="auto"
ref={ref}
className="citation-modal"
onToggle={onToggle}
>
<div className="citation-entry">
<div className="title">
{citation.url ? (
<a href={citation.url} target="_blank">
{richTitle}
</a>
) : (
richTitle
)}
</div>
{citation.authors && <div className="authors">{citation.authors}</div>}
{citation.publication && <div>{citation.publication}</div>}
{citation.issue && <div>Issue {citation.issue}</div>}
{citation.volume && <div>Volume {citation.volume}</div>}
{citation.pages && <div>{citation.pages}</div>}
</div>
</div>
);
}

9
src/components/ErrorBoundary/ErrorBoundary.css Normal file
View File

@@ -0,0 +1,9 @@
.error-boundary {
color: red;
font-size: 1.2rem;
text-align: center;
pre {
color: var(--color-text);
}
}

43
src/components/ErrorBoundary/ErrorBoundary.tsx Normal file
View File

@@ -0,0 +1,43 @@
import type { ReactNode } from "react";
import React, { Component } from "react";
import "./ErrorBoundary.css";
interface ErrorBoundaryProps {
children: ReactNode;
}
interface ErrorBoundaryState {
hasError: boolean;
error: Error | null;
}
class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error: Error) {
return { hasError: true, error };
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
componentDidCatch(_: Error, __: React.ErrorInfo) {
// You can log the error to an error reporting service here
}
render() {
if (this.state.hasError) {
return (
<div className="error-boundary">
<h2>Something went wrong.</h2>
<pre>{this.state.error?.message}</pre>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;

14
src/components/GlossaryEntry/GlossaryEntry.css
View File

@@ -2,10 +2,6 @@ dt {
font-weight: bold; font-weight: bold;
} }
dd {
max-width: 64ch;
}
dd + dd { dd + dd {
margin-top: 1rem; margin-top: 1rem;
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
@@ -19,3 +15,13 @@ dd + dt {
dt + dd { dt + dd {
margin-top: 1rem; margin-top: 1rem;
} }
.citation {
display: block;
cursor: pointer;
font-size: 0.8em;
color: var(--color-text-alt);
}
.citation::after {
content: " ↗";
}

22
src/components/GlossaryEntry/GlossaryEntry.tsx
View File

@@ -1,16 +1,28 @@
import type { GlossaryTerm } from "../../lib/nist-api"; import type { GlossaryTerm } from "../../lib/nist-api";
import { hash } from "../../lib/util";
import "./GlossaryEntry.css"; import "./GlossaryEntry.css";
type GlossaryEntryProps = { interface GlossaryEntryProps {
term: GlossaryTerm; term: GlossaryTerm;
}; onSelectCitation?: (citationKey: string) => void;
}
function GlossaryEntry({ term }: GlossaryEntryProps) { function GlossaryEntry({ term, onSelectCitation }: GlossaryEntryProps) {
return ( return (
<> <>
<dt key={term.term}>{term.term}</dt> <dt key={term.term}>{term.term}</dt>
{term.definitions.map((def, index) => ( {term.definitions.map((def) => (
<dd key={term.term + index}>{def.definition}</dd> <dd key={`${hash(def.definition)}-${hash(def.citationKey)}`}>
{def.definition}
<a
className="citation"
onClick={() =>
onSelectCitation && onSelectCitation(def.citationKey)
}
>
{def.citationKey}
</a>
</dd>
))} ))}
</> </>
); );

26
src/hooks/useGlossary.ts
View File

@@ -1,10 +1,22 @@
import { useQuery } from "@tanstack/react-query"; import { useSuspenseQuery } from "@tanstack/react-query";
import { fetchGlossary } from "../lib/nist-api"; import { fetchCitations, fetchDefinitions } from "../lib/nist-api";
const useGlossary = () => const useGlossary = () => {
useQuery({ const definitionsQuery = useSuspenseQuery({
queryKey: ["glossary"], queryKey: ["definitions"],
queryFn: fetchGlossary, queryFn: fetchDefinitions,
staleTime: 5 * 60 * 1000, // 5 minutes staleTime: 1000 * 60 * 60, // 1 hour
}); });
const citationsQuery = useSuspenseQuery({
queryKey: ["citations"],
queryFn: fetchCitations,
staleTime: 1000 * 60 * 60, // 1 hour
});
return {
glossary: definitionsQuery.data,
citations: citationsQuery.data,
};
};
export default useGlossary; export default useGlossary;

11
src/index.css
View File

@@ -25,19 +25,24 @@ a:hover {
} }
body { body {
margin: 0; margin: 1rem;
display: flex; display: flex;
flex-direction: column;
place-items: center; place-items: center;
min-width: 320px;
min-height: 100vh; min-height: 100vh;
} }
footer {
margin-top: 2rem;
font-size: 0.6rem;
}
#root { #root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-items: center; place-items: center;
width: 100%; width: 100%;
padding: 2rem; max-width: 100%;
} }
button { button {

89
src/lib/nist-api.ts
View File

@@ -1,12 +1,12 @@
import { Axios } from "axios"; import { Axios } from "axios";
import Papa from "papaparse"; import Papa from "papaparse";
export type Definition = { export interface Definition {
definition: string; definition: string;
citationKey: string; citationKey: string;
}; }
export type Citation = { export interface Citation {
key: string; key: string;
title: string; title: string;
authors: string; authors: string;
@@ -16,37 +16,61 @@ export type Citation = {
pages?: string; pages?: string;
year: string; year: string;
url: string; url: string;
}; }
export type GlossaryTerm = { export interface GlossaryTerm {
term: string; term: string;
definitions: Definition[]; definitions: Definition[];
relatedTerms: string; relatedTerms: string;
legalDefinition: string; legalDefinition: string;
}; }
export type Glossary = { export interface Glossary {
definitions: GlossaryTerm[]; definitions: GlossaryTerm[];
citations: Citation[]; citations: Citation[];
}; }
const glossaryUrl = const baseUrl =
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTRBYglcOtgaMrdF11aFxfEY3EmB31zslYI4q2_7ZZ8z_1lKm7OHtF0t4xIsckuogNZ3hRZAaDQuv_K/pub?output=csv"; "https://docs.google.com/spreadsheets/d/e/2PACX-1vTRBYglcOtgaMrdF11aFxfEY3EmB31zslYI4q2_7ZZ8z_1lKm7OHtF0t4xIsckuogNZ3hRZAaDQuv_K/pub?output=csv";
const glossaryGid = "0";
const citationGid = "2053825396";
export const fetchGlossary = async () => { const makeClient = () => {
const resp = await new Axios().get(glossaryUrl); const client = new Axios({
const data = resp.data; baseURL: baseUrl,
return parseGlossary(data); timeout: 2500,
});
return client;
}; };
const parseGlossary = (data: string): Glossary => { export const fetchCitations = async () => {
const parsed = Papa.parse<string[]>(data, { const client = makeClient();
const resp = await client.get<string>(baseUrl, {
params: {
gid: citationGid,
},
});
return parseCitations(resp.data);
};
export const fetchDefinitions = async () => {
const client = makeClient();
const resp = await client.get<string>(baseUrl, {
params: {
gid: glossaryGid,
},
});
return parseDefinitions(resp.data);
};
const parseDefinitions = (glossaryData: string): GlossaryTerm[] => {
const terms: GlossaryTerm[] = [];
const parsed = Papa.parse<string[]>(glossaryData, {
delimiter: ",", delimiter: ",",
header: false, header: false,
dynamicTyping: true, dynamicTyping: true,
skipEmptyLines: true, skipEmptyLines: true,
}); });
const glossary: Glossary = { definitions: [], citations: [] };
for (const record of parsed.data.slice(1)) { for (const record of parsed.data.slice(1)) {
const fields = record.map((field) => const fields = record.map((field) =>
@@ -70,7 +94,7 @@ const parseGlossary = (data: string): Glossary => {
const legalDefinition = fields[fields.length - 1]; const legalDefinition = fields[fields.length - 1];
if (term && definitions.length > 0) { if (term && definitions.length > 0) {
glossary.definitions.push({ terms.push({
term, term,
definitions, definitions,
relatedTerms, relatedTerms,
@@ -78,6 +102,33 @@ const parseGlossary = (data: string): Glossary => {
}); });
} }
} }
return terms;
return glossary; };
const parseCitations = (citationData: string): Citation[] => {
const citations: Citation[] = [];
const parsed = Papa.parse<string[]>(citationData, {
delimiter: ",",
header: false,
dynamicTyping: true,
skipEmptyLines: true,
});
for (const record of parsed.data.slice(1)) {
const fields = record;
const citation: Citation = {
key: fields[0],
title: fields[1],
authors: fields[2],
publication: fields[3],
volume: fields[4],
issue: fields[5],
pages: fields[6],
year: fields[7],
url: fields[8],
};
citations.push(citation);
}
return citations;
}; };

13
src/lib/util.ts Normal file
View File

@@ -0,0 +1,13 @@
/**
* Generate a (non-cryptographic) hash value from a string.
* @param s string
* @returns string
*/
export function hash(s: string): string {
let hash = 0;
for (let i = 0; i < s.length; i++) {
hash = (hash << 5) - hash + s.charCodeAt(i);
hash |= 0; // Convert to 32bit integer
}
return hash.toString(16);
}

13
src/main.tsx
View File

@@ -1,15 +1,26 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { StrictMode } from "react"; import { StrictMode, Suspense } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import App from "./App.tsx"; import App from "./App.tsx";
import ErrorBoundary from "./components/ErrorBoundary/ErrorBoundary";
import "./index.css"; import "./index.css";
const queryClient = new QueryClient(); const queryClient = new QueryClient();
createRoot(document.getElementById("root")!).render( createRoot(document.getElementById("root")!).render(
<StrictMode> <StrictMode>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ErrorBoundary>
<Suspense
fallback={
<div style={{ textAlign: "center", marginTop: "2rem" }}>
Loading...
</div>
}
>
<App /> <App />
</Suspense>
</ErrorBoundary>
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider> </QueryClientProvider>
</StrictMode> </StrictMode>

2
src/theme.css
View File

@@ -4,6 +4,7 @@
--color-background: #242424; --color-background: #242424;
--color-background-alt: #1e1e1e; --color-background-alt: #1e1e1e;
--color-text: #ffffff; --color-text: #ffffff;
--color-text-alt: #aaaaaa;
--color-accent: #646cff; --color-accent: #646cff;
--color-accent-hover: #535bf2; --color-accent-hover: #535bf2;
--color-border: #444444; --color-border: #444444;
@@ -14,6 +15,7 @@
--color-background: #ffffff; --color-background: #ffffff;
--color-background-alt: #f5f5f5; --color-background-alt: #f5f5f5;
--color-text: #213547; --color-text: #213547;
--color-text-alt: #000000;
--color-accent: #747bff; --color-accent: #747bff;
--color-accent-hover: #646cff; --color-accent-hover: #646cff;
--color-border: #d9d9d9; --color-border: #d9d9d9;

6
vite.config.ts
View File

@@ -1,7 +1,7 @@
import { defineConfig } from 'vite' import react from "@vitejs/plugin-react-swc";
import react from '@vitejs/plugin-react' import { defineConfig } from "vite";
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
}) });