From e919ead1c96309b22ce705c72ab9a2b5d86305d8 Mon Sep 17 00:00:00 2001 From: Christoph Cernusca Date: Mon, 29 Jun 2026 16:42:56 +0200 Subject: [PATCH 1/4] Search update - Added search bar in topbar - Matches are highlighted, non-matches are greyed out --- ARCHITECTURE.md | 9 +++++++++ README.md | 1 + css/style.css | 30 ++++++++++++++++++++++++++++++ index.html | 1 + js/main.js | 22 ++++++++++++++++++++++ 5 files changed, 63 insertions(+) diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index a58b640..343ec8e 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -80,6 +80,15 @@ For each selection item (tag/genre) that appears in at least `clusterMin` connec The `document` `mousemove` fallback returns early when cursor is over `.sidebar-left`, preventing the per-frame `clearHighlights()` from erasing stat-hover highlights. +## Graph search filter + +`#graph-search` text input in topbar. On `input` event: if query non-empty, adds `.filter-active` to `#results` and `.filter-match` to each `.anime-circle` whose `mediaStore[idx]` title (romaji or english) includes the query (case-insensitive). CSS: + +- `.filter-active .anime-circle` → `opacity: 0.15` +- `.filter-active .anime-circle.filter-match` → `opacity: 1`, `border-width: 7px` + +On clear: removes `.filter-active` + all `.filter-match`. Cleared automatically on new Search. Independent of hover highlights — both can coexist. + ## Media type Three buttons in topbar center: **Anime**, **Manga**, **Novel**. Sets `mediaType` state (`'ANIME'` | `'MANGA'` | `'NOVEL'`). Default: `'ANIME'`. diff --git a/README.md b/README.md index ac7d046..2953780 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ Open `index.html` in a browser — no build step required. Then: 1. Use the **media type buttons** in the topbar to select Anime, Manga, or Novel. All input modes and features work for each type. + Use the **filter bar** (topbar, between type buttons and AniList link) to highlight matching circles by title — non-matching entries dim while typing. 2. Use the **right sidebar** to import a `.txt` file (one title per line) and click **Search**. 3. Matching entries appear as **circles** in a live physics simulation — nodes repel each other, shared-selection connections act as springs. 4. **Drag** the center area to pan. **Scroll** over the center area to zoom. diff --git a/css/style.css b/css/style.css index e6d68bb..d9ada0a 100644 --- a/css/style.css +++ b/css/style.css @@ -133,6 +133,36 @@ body { background: var(--bg); } +.graph-search { + flex: 1; + max-width: 320px; + background: transparent; + border: 1px solid #444; + border-radius: 4px; + color: #fff; + font-size: 0.85rem; + padding: 0.3rem 0.6rem; + outline: none; +} + +.graph-search:focus { + border-color: #fff; +} + +.graph-search::placeholder { + color: #555; +} + +#results.filter-active .anime-circle { + opacity: 0.15; + transition: opacity 0.15s; +} + +#results.filter-active .anime-circle.filter-match { + opacity: 1; + border-width: 7px; +} + .media-type-switch { display: flex; gap: 0.25rem; diff --git a/index.html b/index.html index d7b13c1..b8ff889 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@

anigraph

+ AniList ↗
diff --git a/js/main.js b/js/main.js index f01febf..016fcd2 100644 --- a/js/main.js +++ b/js/main.js @@ -740,6 +740,26 @@ document.getElementById('vis-labels').addEventListener('change', e => { document.getElementById('labels-svg').style.display = e.target.checked ? '' : 'none'; }); +document.getElementById('graph-search').addEventListener('input', e => { + const q = e.target.value.trim().toLowerCase(); + const circleEls = document.querySelectorAll('.anime-circle'); + if (!q) { + results.classList.remove('filter-active'); + circleEls.forEach(el => el.classList.remove('filter-match')); + return; + } + results.classList.add('filter-active'); + circleEls.forEach(el => { + const idx = parseInt(el.dataset.index); + const media = mediaStore[idx]; + const match = media && ( + (media.title.romaji ?? '').toLowerCase().includes(q) || + (media.title.english ?? '').toLowerCase().includes(q) + ); + el.classList.toggle('filter-match', !!match); + }); +}); + percentSlider.addEventListener('input', () => { relevancePercent = parseInt(percentSlider.value); percentVal.textContent = relevancePercent; @@ -849,6 +869,8 @@ function displayResults(mediaArray) { searchBtn.addEventListener('click', async () => { stopSimulation(); results.innerHTML = ''; + results.classList.remove('filter-active'); + document.getElementById('graph-search').value = ''; document.getElementById('connections-svg').innerHTML = ''; document.getElementById('clusters-svg').innerHTML = ''; document.getElementById('labels-svg').innerHTML = ''; From 7df83258a4bb5a290e0f966b2f8fe4d9f4a5a986 Mon Sep 17 00:00:00 2001 From: Christoph Cernusca <155837307+CCernusca@users.noreply.github.com> Date: Mon, 29 Jun 2026 16:53:46 +0200 Subject: [PATCH 2/4] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 2953780..b8367b6 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,10 @@ Then: *An image of the full interface of anigraph* +image + +*Top 100 Anime being filtered for "Attack on Titan"* + Anime sharing selection items are connected by lines. Spring stiffness and line opacity scale with connection strength (relative to the strongest connection). Configure physics and selection in the right sidebar: | Setting | Effect | From ac57de604fb5b3c4c85889dbd1a93c7fe04551a3 Mon Sep 17 00:00:00 2001 From: Christoph Cernusca Date: Mon, 29 Jun 2026 17:52:49 +0200 Subject: [PATCH 3/4] Icon update - SVG icon & favicon --- ARCHITECTURE.md | 10 ++++++++++ README.md | 9 +++++++-- css/style.css | 11 +++++++++-- favicon.svg | 33 +++++++++++++++++++++++++++++++++ index.html | 3 ++- 5 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 favicon.svg diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 343ec8e..eb593e4 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -10,10 +10,20 @@ Static HTML webapp. No build tooling, no framework, no bundler. Dark-themed, ful ``` index.html shell — layout markup, links stylesheet + script +favicon.svg browser tab icon — inline SVG node-graph spelling "ag" css/style.css global styles, layout, component styles js/main.js all application logic ``` +## Favicon + +`favicon.svg` — `viewBox="0 0 33 50"`, default transparent background. Two node clusters: + +- **'a & g' cluster** (hue 190, cyan): 5 nodes forming a diamond (top/left/bottom/right) + stem-bottom. Lines: open circle A-B-C-D + descending stem D-E. Cluster polygon: `hsla(190,60%,60%,0.10)` fill. +- **'g' cluster** (hue 30, orange): 3 nodes — 3-node descending hook (E-F-G-H). Cluster polygon: `hsla(30,60%,60%,0.10)` fill. + +Nodes are simple filled circles to improve readability. + ## Layout CSS Grid, full viewport (`100vh`, `overflow: hidden`): diff --git a/README.md b/README.md index 2953780..22652de 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# anigraph +# anigraph favicon anigraph A little webapp for visualising information and statistics about anime. -image +anigraph screenshot *A graph of shared tags among the top 100 popular anime on AniList with highlighted clusters* @@ -46,10 +46,15 @@ Anime sharing selection items are connected by lines. Spring stiffness and line Unmatched titles are silently omitted. Feedback (errors, rate limits) appears below the search button. +## Favicon + +`favicon.svg` — inline SVG depicting "a" and "g" overlaid as one node-graph. + ## Project structure ``` index.html entry point +favicon.svg browser tab icon css/style.css global styles js/main.js application logic ``` diff --git a/css/style.css b/css/style.css index d9ada0a..4264c4d 100644 --- a/css/style.css +++ b/css/style.css @@ -41,6 +41,14 @@ body { .site-title { margin: 0; font-size: 1.3rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.site-icon { + height: 2rem; + width: auto; } .content-area { @@ -134,8 +142,7 @@ body { } .graph-search { - flex: 1; - max-width: 320px; + width: 180px; background: transparent; border: 1px solid #444; border-radius: 4px; diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..e150444 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index b8ff889..20f3603 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,13 @@ anigraph +
-

anigraph

+

anigraph

From 718abaabe4eda14d773dd5dafd103d8c9eae336c Mon Sep 17 00:00:00 2001 From: Christoph Cernusca Date: Mon, 29 Jun 2026 18:03:17 +0200 Subject: [PATCH 4/4] icon height fix - In deployment, icon size increased (potentially because rem was used?) - Changed to directed px, as topbar does not change height anyway --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 4264c4d..73c9c59 100644 --- a/css/style.css +++ b/css/style.css @@ -47,7 +47,7 @@ body { } .site-icon { - height: 2rem; + height: 50px; width: auto; }