Virtual filesystem - the full demo

virtual filesystem overview

Source: examples/panels/wunderbaum/virtual_filesystem.py Test: tests/panels/wunderbaum/examples/test_virtual_filesystem.py

The kitchen-sink example: a multi-root filesystem browser combining nearly every Wunderbaum feature - columns, checkboxes, context menu, drag-and-drop, inline rename, external file drop, and programmatic manipulation from Python buttons. An in-memory dict is the backend.

Features on display

  • Multiple root mounts (/home, /tmp) with folder/file icons.

  • Columns: name, size, modified date (tree + table mode).

  • Context menu (right-click): New Folder, New File, Delete, Delete Checked.

  • Checkboxes + a “Delete Checked” batch action.

  • Drag-and-drop to move nodes, F2 / click to rename inline.

  • External file drop onto the tree via file_drop_callback.

  • Python API buttons for add-folder / add-file / delete by key.

The wiring

tree = Wunderbaum(
    source=fs_to_tree_source(),
    columns=columns,
    context_menu_items=[
        {"id": "new_folder", "label": "New Folder", "icon": "bi bi-folder-plus"},
        {"id": "new_file", "label": "New File", "icon": "bi bi-file-earmark-plus"},
        {"id": "delete", "label": "Delete", "icon": "bi bi-trash"},
        {"id": "delete_checked", "label": "Delete Checked", "icon": "bi bi-trash-fill"},
    ],
    options={
        "checkbox": True,
        "dnd": True,
        "edit": {"trigger": ["clickActive", "F2"]},
    },
    tree_event_callback=on_tree_event,
    file_drop_callback=on_file_drop,
)

Key points:

  • fs_to_tree_source() converts a flat {path: info} dict into a nested tree - the canonical “adapt your data model to a source” pattern.

  • options enables the interactive features: checkbox, dnd, and edit (with rename triggers).

  • on_tree_event dispatches on event_name - contextmenu, activate, drop, edit.apply - and mutates the tree with add_folder, add_file, remove_node, or a batch_update for “Delete Checked”.

  • file_drop_callback receives dropped files and adds them under the target node.

  • A tree.param.watch(..., ["source"]) keeps a live “Checked” display in sync.

How the test exercises it

The test file is the broadest in the suite:

  • Render: rows and column headers appear.

  • Python API: clicking “Add Folder” / “Add File” creates the node; tree.remove_node(...) removes it.

  • Drag-and-drop: dragging document.txt onto /tmp moves it (asserted on both server tree.source and client children) and leaves no duplicate.

  • Context menu: test_context_menu_visible is marked xfail - dispatching a contextmenu event through the shadow DOM is unreliable under Playwright, so it is expected to fail rather than flake.

Run it live

This example runs entirely in your browser via Pyodide. The first load downloads packages, so give it a few seconds.

Open fullscreen

See also