Linux File System Hierarchy Explorer¶
Specification¶
The full specification below is extracted from Chapter 11: Booting, the Desktop, and the Linux Terminal on the Pi 500+.
Type: graph-data-model
**sim-id:** file-system-hierarchy-explorer<br/>
**Library:** vis-network<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how directories are organized in the Linux file system hierarchy, and locate the home directory and current working directory within it.
Canvas: 700x480px vis-network hierarchical graph, responsive — call `network.fit()` inside a `window.addEventListener('resize', ...)` handler so the tree re-centers and rescales to its container.
Layout: a top-down hierarchical vis-network graph rooted at a node labeled `/` (root). Root branches to common top-level directories: `/home`, `/etc`, `/usr`, `/var`. The `/home` node branches to two example user home-directory nodes, `/home/pi` and `/home/student`, colored raspberry `#C2185B` and marked with a small house icon label to reinforce "home directory." One file node, `robot_control.py`, hangs beneath `/home/pi`, colored copper gold `#D4AF37`, with a highlighted border representing "current working directory contains this file."
Controls: a `createButton()`-style HTML button labeled "Show My Working Directory" that animates a highlight pulse to the `/home/pi` node and its file, reinforcing that the working directory is just one specific node in the larger tree; a "Reset View" button that calls `network.fit()` again.
Interaction: clicking any directory node opens an infobox below the graph naming it and, for `/home/pi` specifically, explaining that this is a home directory. Clicking the `robot_control.py` file node explains that its full path (`/home/pi/robot_control.py`) is built by following the tree from the root down. Hovering any edge shows a tooltip reading "contains."
Implementation: vis-network with `layout: {hierarchical: {direction: 'UD', sortMethod: 'directed'}}`. Node and edge data defined as vis-network DataSet objects with a small lookup table mapping node id to its infobox text. Register a `click` event handler for the infobox behavior described above.