Skip to content

Tweak viewer toolbar: dropdown fix, icon polish #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emilio-balda merged 4 commits into from
Sep 2, 2026
Merged

Tweak viewer toolbar: dropdown fix, icon polish #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e3f4c8a
chore: remove graph layout selector
emilio-balda Sep 2, 2026
1664173
Migrate inline SVG icons to lucide-react
emilio-balda Sep 2, 2026
cbcd5a6
Fix type filter dropdown padding and text clipping
emilio-balda Sep 2, 2026
47d120a
Increase theme toggle icon stroke weight for better visibility
emilio-balda Sep 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
},
"dependencies": {
"cytoscape": "^3.34.2",
"lucide-react": "^1.39.0",
"markdown-to-jsx": "^7.7.17",
"react": "^19.2.8",
"react-dom": "^19.2.8",
Expand Down
32 changes: 4 additions & 28 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
// limitations under the License.

import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
import { Moon, PanelLeft, Sun } from "lucide-react";

import { filterConceptIds } from "./navigation.js";
import { Sidebar } from "./Sidebar.jsx";
Expand All @@ -24,7 +25,6 @@ const Graph = lazy(() => import("./Graph.jsx").then((module) => ({ default: modu
export function App({ bundle }) {
const [search, setSearch] = useState("");
const [typeFilter, setTypeFilter] = useState("");
const [layout, setLayout] = useState("cose");
const [selectedId, setSelectedId] = useState(bundle.nodes[0]?.data.id || null);
const [resetSignal, setResetSignal] = useState(0);
const [sidebarOpen, setSidebarOpen] = useState(
Expand Down Expand Up @@ -88,12 +88,7 @@ export function App({ bundle }) {
aria-label={sidebarOpen ? "Hide file sidebar" : "Show file sidebar"}
onClick={() => setSidebarOpen((open) => !open)}
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<rect x="2.25" y="2.75" width="11.5" height="10.5" rx="1.5" stroke="currentColor" strokeWidth="1.25" />
<path d="M5.75 3v10" stroke="currentColor" strokeWidth="1.25" />
<path d="M3.5 5.25h1" stroke="currentColor" strokeWidth="1.25" />
<path d="M3.5 7.75h1" stroke="currentColor" strokeWidth="1.25" />
</svg>
<PanelLeft size={16} strokeWidth={1.25} aria-hidden="true" />
</button>
<div className="title">
<strong>{bundle.name}</strong>
Expand All @@ -115,19 +110,6 @@ export function App({ bundle }) {
</option>
))}
</select>
<select
aria-label="Graph layout"
id="graph-layout"
name="graph-layout"
value={layout}
onChange={(event) => setLayout(event.target.value)}
>
<option value="cose">cose (force)</option>
<option value="concentric">concentric</option>
<option value="breadthfirst">breadth-first</option>
<option value="circle">circle</option>
<option value="grid">grid</option>
</select>
<button type="button" onClick={resetView}>
Reset view
</button>
Expand All @@ -139,14 +121,9 @@ export function App({ bundle }) {
onClick={toggleTheme}
>
{theme === "dark" ? (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="1.25" />
<path d="M8 1.75v1.5M8 12.75v1.5M1.75 8h1.5M12.75 8h1.5M3.6 3.6l1.05 1.05M11.35 11.35l1.05 1.05M12.4 3.6l-1.05 1.05M4.65 11.35 3.6 12.4" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
</svg>
<Sun size={16} strokeWidth={1.5} aria-hidden="true" />
) : (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M12.9 10.2A5.2 5.2 0 0 1 5.8 3.1 5.25 5.25 0 1 0 12.9 10.2Z" stroke="currentColor" strokeWidth="1.25" strokeLinejoin="round" />
</svg>
<Moon size={16} strokeWidth={1.5} aria-hidden="true" />
)}
</button>
</div>
Expand Down Expand Up @@ -186,7 +163,6 @@ export function App({ bundle }) {
<Suspense fallback={<section className="graph loading-panel muted">Loading graph…</section>}>
<Graph
bundle={bundle}
layout={layout}
matchingIds={matchingIds}
selectedId={selectedId}
resetSignal={resetSignal}
Expand Down
8 changes: 4 additions & 4 deletions src/Graph.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function graphStyle(theme) {
];
}

export function Graph({ bundle, layout, matchingIds, selectedId, resetSignal, theme, onSelect }) {
export function Graph({ bundle, matchingIds, selectedId, resetSignal, theme, onSelect }) {
const containerRef = useRef(null);
const graphRef = useRef(null);

Expand All @@ -102,7 +102,7 @@ export function Graph({ bundle, layout, matchingIds, selectedId, resetSignal, th
container: containerRef.current,
elements: [...bundle.nodes, ...buildUndirectedEdges(bundle.edges)],
style: graphStyle(theme),
layout: { name: layout, animate: false, padding: 30 },
layout: { name: "cose", animate: false, padding: 30 },
minZoom: 0.2,
maxZoom: 2,
});
Expand Down Expand Up @@ -133,8 +133,8 @@ export function Graph({ bundle, layout, matchingIds, selectedId, resetSignal, th
if (!graph) {
return;
}
graph.layout({ name: layout, animate: false, padding: 30 }).run();
}, [layout, bundle]);
graph.layout({ name: "cose", animate: false, padding: 30 }).run();
}, [bundle]);

useEffect(() => {
const graph = graphRef.current;
Expand Down
13 changes: 2 additions & 11 deletions src/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import { Search } from "lucide-react";
import { useMemo } from "react";

import { buildFolderTree } from "./navigation.js";
Expand Down Expand Up @@ -96,17 +97,7 @@ export function Sidebar({
return (
<nav className="sidebar" aria-label="Bundle files">
<div className="sidebar-search-wrap">
<svg
className="sidebar-search-icon"
width="15"
height="15"
viewBox="0 0 16 16"
fill="none"
aria-hidden="true"
>
<circle cx="7" cy="7" r="4.25" stroke="currentColor" strokeWidth="1.4" />
<path d="m10.2 10.2 3 3" stroke="currentColor" strokeWidth="1.4" />
</svg>
<Search className="sidebar-search-icon" size={15} strokeWidth={1.4} aria-hidden="true" />
<input
aria-label="Search bundle files"
id="concept-search"
Expand Down
13 changes: 13 additions & 0 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,19 @@ select {
box-shadow: var(--shadow-sm);
}

.controls select {
max-width: 160px;
padding-right: 24px;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23767b87' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
Comment on lines +188 to +193
background-position: right var(--space-8) center;
text-overflow: ellipsis;
white-space: nowrap;
appearance: none;
-webkit-appearance: none;
}

.controls select:hover,
.controls button:hover,
.icon-button:hover {
Expand Down