Skip to content

Commit 9173d5e

Browse files
ryan-roemerryan-roemer
authored
Chore: Banner link and JSON data (#2)
- Update GH link - Add JSON data view
1 parent 9e4c05f commit 9173d5e

5 files changed

Lines changed: 114 additions & 12 deletions

File tree

‎public/app/components/json-data-link.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { html, openTextInNewWindow } from "../util/html.js";
2+
3+
export const JsonDataLink = ({ data }) => {
4+
if (!data) {
5+
return "";
6+
}
7+
8+
const handleOpen = () => openTextInNewWindow(JSON.stringify(data, null, 2));
9+
10+
return html`
11+
<button
12+
type="button"
13+
onClick=${handleOpen}
14+
title="View raw search data"
15+
className="json-data-link"
16+
>
17+
<i className="ph ph-brackets-curly"></i>
18+
</button>
19+
`;
20+
};

‎public/app/components/posts-table.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { html } from "../util/html.js";
22
import { Category } from "./category.js";
3+
import { JsonDataLink } from "./json-data-link.js";
34
import { useTableSort } from "../hooks/use-table-sort.js";
45

56
const HEADINGS = {
@@ -9,7 +10,7 @@ const HEADINGS = {
910
"categories.primary": "Category",
1011
};
1112

12-
export const PostsTable = ({ posts = [] }) => {
13+
export const PostsTable = ({ posts = [], searchData = null }) => {
1314
const { getSortSymbol, handleColumnSort, sortItems } = useTableSort();
1415

1516
if (posts.length === 0) {
@@ -21,6 +22,7 @@ export const PostsTable = ({ posts = [] }) => {
2122
<div className="results-header">
2223
<h2>Results</h2>
2324
<span className="results-count">${posts.length} posts found</span>
25+
<${JsonDataLink} data=${searchData} />
2426
</div>
2527
<div className="table-container">
2628
<table className="posts-table">

‎public/app/index.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { PostsTable } from "./components/posts-table.js";
1111
import { search } from "./data/index.js";
1212

1313
export const App = () => {
14+
const [searchData, setSearchData] = useState(null);
1415
const [posts, setPosts] = useState([]);
1516
const [selectedPostTypes, setSelectedPostTypes] = useState([]);
1617
const [selectedCategories, setSelectedCategories] = useState([]);
@@ -26,13 +27,16 @@ export const App = () => {
2627
}
2728

2829
setIsFetching(true);
30+
setSearchData(null);
31+
setPosts([]);
2932
try {
3033
const result = await search({
3134
query,
3235
postType: selectedPostTypes.map(({ value }) => value),
3336
categoryPrimary: selectedCategories.map(({ value }) => value),
3437
minDate,
3538
});
39+
setSearchData(result);
3640
setPosts(result.posts);
3741
} catch (err) {
3842
// TODO(CLEANUP): Use a proper UI error for user.
@@ -46,17 +50,16 @@ export const App = () => {
4650
<div className="container">
4751
<header className="header">
4852
<h1>Vector Search Web Demo</h1>
49-
<p>Search blog posts using semantic vector similarity</p>
50-
<div className="badges">
53+
<div className="subtitle-row">
54+
<p>Search blog posts using semantic vector similarity.</p>
5155
<a
5256
href="https://github.com/nearform/vector-search-web"
5357
target="_blank"
5458
rel="noopener noreferrer"
59+
className="github-link"
60+
aria-label="View on GitHub"
5561
>
56-
<img
57-
src="https://badgen.net/github/release/nearform/vector-search-web?icon=github"
58-
alt="GitHub release"
59-
/>
62+
<i className="ph ph-github-logo"></i>
6063
</a>
6164
</div>
6265
</header>
@@ -80,7 +83,7 @@ export const App = () => {
8083
</form>
8184
</section>
8285
83-
<${PostsTable} posts=${posts} />
86+
<${PostsTable} posts=${posts} searchData=${searchData} />
8487
8588
<footer className="footer">
8689
<a

‎public/app/util/html.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
1+
/* global window:false */
12
import React from "react";
23
import htm from "htm";
34

45
export const html = htm.bind(React.createElement);
56

7+
export const openTextInNewWindow = (text) => {
8+
const win = window.open("", "_blank");
9+
win.document.write("<html><body><pre></pre></body></html>");
10+
win.document.close();
11+
win.document.querySelector("pre").innerText = text;
12+
};
13+
614
export const getElements = (event) => {
715
const propNames = Object.getOwnPropertyNames(
816
event.currentTarget.elements,

‎public/styles.css‎

Lines changed: 73 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,59 @@ body {
5757
font-size: 1.1rem;
5858
}
5959

60-
.badges {
61-
margin-top: 16px;
60+
.subtitle-row {
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
gap: 12px;
65+
}
66+
67+
.github-link {
68+
position: relative;
69+
display: flex;
70+
align-items: center;
71+
justify-content: center;
72+
width: 32px;
73+
height: 32px;
74+
background: var(--color-border);
75+
border-radius: 50%;
76+
font-size: 1.2rem;
77+
color: var(--color-text);
78+
transition:
79+
background 0.15s,
80+
color 0.15s;
81+
}
82+
83+
.github-link:hover {
84+
background: var(--color-accent);
85+
color: white;
6286
}
6387

64-
.badges img {
65-
height: 20px;
88+
.github-link::after {
89+
content: "View on GitHub";
90+
position: absolute;
91+
top: 100%;
92+
left: 50%;
93+
transform: translateX(-50%);
94+
margin-top: 8px;
95+
padding: 6px 10px;
96+
background: var(--color-text);
97+
color: var(--color-surface);
98+
font-size: 0.75rem;
99+
font-weight: 500;
100+
white-space: nowrap;
101+
border-radius: 4px;
102+
opacity: 0;
103+
visibility: hidden;
104+
transition:
105+
opacity 0.15s,
106+
visibility 0.15s;
107+
pointer-events: none;
108+
}
109+
110+
.github-link:hover::after {
111+
opacity: 1;
112+
visibility: visible;
66113
}
67114

68115
/* Search Section */
@@ -285,6 +332,28 @@ body {
285332
text-align: center;
286333
}
287334

335+
/* JSON Data Link */
336+
.json-data-link {
337+
display: inline-flex;
338+
align-items: center;
339+
justify-content: center;
340+
cursor: pointer;
341+
color: var(--color-text-muted);
342+
transition: color 0.15s;
343+
background: none;
344+
border: none;
345+
padding: 0;
346+
font: inherit;
347+
}
348+
349+
.json-data-link:hover {
350+
color: var(--color-accent-dark);
351+
}
352+
353+
.json-data-link i {
354+
font-size: 1.1rem;
355+
}
356+
288357
/* Category Label */
289358
.category-label {
290359
display: inline-block;

0 commit comments

Comments
 (0)