Create file-system tree view for scanned codebases

Organization: AboutCode

Projects: Scancode.io

Mentee: Aayush Kumar (aayushkdev)

Mentors:

• Thomas Druez

• Tushar Goel

• Omkar Phansopkar

• Swastik Sharma

Overview

ScanCode.io previously allowed browsing project scans only one directory at a time, which made exploring large codebases or container images slow and inefficient.

This project introduced an interactive codebase tree view that lets users navigate directories and files hierarchically, similar to a file explorer.

---

Implementation

• Changes in the CodebaseResource model:

  • Introduced a new parent_path field to the CodebaseResource model to efficiently fetch the children of a directory.

  • Ensured that top-level paths are stored during resource creation, which is necessary for rendering root-level nodes in the file tree.

• Backend View:

  • Implemented a new CodebaseResourceTreeView View to fetch and display immediate children of a directory.

  • Added a new CodebaseResourceTableView View to display the details of a file in tabular format with support for filtering.

  • Used HTMX to update data in place without needing to reload the file for each change.

• Frontend Codebase Tree:

  • Introduced a collapsible file tree panel in the left pane of the project resource view.

  • Implemented chevron toggling to expand or collapse a directory’s immediate children:

    • If children were already fetched, they are simply shown or hidden.

    • Directories with no children display without a chevron.

  • Enabled lazy loading to fetch directory contents only when expanded, reducing initial load time.

• Testing:

  • Conducted large-scale testing to ensure API and UI can handle thousands of files efficiently.

  • Added unit tests for both backend and frontend to verify that the APIs return correct data, the tree view expands and collapses properly, and file/directory details are displayed as expected.

Linked Pull Requests

Sr. no	Name	Link	Status
1	Add support for tracking parent of CodebaseResource	aboutcode.org/scancode.io#1691	Merged
2	Add a resource tree explorer to explore scanned images	aboutcode.org/scancode.io#1704	Open
3	Add filter and search support to the codebase tree	aboutcode.org/scancode.io#1828	Open

Related Issues

Sr. no	Name	Link
1	Provide an explorer-style tree in resource view	#697
2	Add support for tracking parent of CodebaseResource entries and ensure top level paths are stored	#1687
3	Add a resource tree explorer to explore scanned images	#1682

Pre GSoC Work

Here are some of the PR’s I submitted before GSoC:

• Enforced –path as a required parameter for scancode-license-data module

• Fixed missing migration for Project.purl field

• Reorder XLSX output fields in RESOURCES sheet

• Added the ability to export the current filtered QuerySet of a FilterView to JSON format

• Added support for “caramel” license

• Added the is_notice flag to the –classify option

Post GSoC

I plan to continue contributing by implementing further performance optimizations in my project and enhancing the overall user experience by refining and polishing the UI.

Links

• Project Idea

• Official GSoC project page

• GSoC Proposal

• Project Board

Acknowledgements

I would like to thank my mentors:

• Thomas Druez

• Tushar Goel

• Omkar Phansopkar

• Swastik Sharma

The weekly status calls were extremely valuable, as they provided me with guidance on how to approach problems, break tasks into manageable steps, and stay on track with my progress. These discussions helped me clarify doubts quickly and gave me a clear direction on how to get things done efficiently.