Project 3: Show Code Outline

Final Submission Due Date: Wednesday, May 8, 2024 @ 11:59PM


Note There is no new GitHub classroom assignment for this project. Please use the same repository as we have been using for previous projects.
Please do your work for Project 3 in a new branch that you create (do not use the feedback branch or other existing branches).

Motivation

We hope to add a new feature to our IDLE editor window that does a static code analysis of a region of code that is highlighted by the user. Static code analysis can refer to any analysis of the code structure, syntax, and quality of the written source cdoe rather than analysis of the code performance during runtime. Static code analysis can have a variety of uses, such as discovering security vulnerabilities, promoting standard coding conventions, and understanding the code structure. We want to implement a static-code analyzer as an added feature to our codebase. Eventually, we want this feature to be able to perform complex security-related analysis and identify violations of code-standards. However, to adhere to an incremental approach to developing this feature, your team will initially be tasked with adding the option to simply show the code outline by doing an analysis of the code structure.

Task

Required Features

Your specific task will be to add a menu item to the IDLE editor under Options that says Show Code Outline. This option should ONLY be visible when the Python Editor Window is open (i.e., not the Python shell).

When a user selects this option when they have selected/highlighted a region of code, then a user should see the Code Outline for the selected/highlighted lines appear in the IDLE shell.

When a user selects this option when they have not selected/highlighted any code, then a user should see the Code Outline for the entire Python file appear in the IDLE shell.

The button should also have a key binding (i.e., there should be a keyboard shortcut to invoke the Show Code Outline option). You are free to choose which specific keyboard shortcut you choose to attach to your added feature.

When Show Code Outline is selected, the Python shell should display only the classes and methods in the Python file (you can assume it is always a Python file that this will be performed on). Specifically, the outline should look like:

func: sampleFuncName0
class: SampleClassName
    func: sampleFuncName1
        func: innerFunc
    func: sampleFuncName2

Note that the level of indent should match between the outline and file (i.e., you should be able to process functions outside of classes, functions within functions, etc.)

Sometimes, there may be code with no functions or classes. Think about how you want to handle such an edge case and defend your reason for making that design decision.

Optional Features

Optional Feature 1

To further implement this specific feature, we would like you to create the outline to be interactive such that a user can then click on or type in the class or function name and then go to that class or function. We think there are a couple ways you can go about this:

  1. You could create the Code outline in an interactive widget where a user can click on the name of the class/function and then we go to where that is implemented.
  2. You could have it be part of the Python shell interaction where the outline is displayed to the Python shell and the user can then type in the name of the class or function to go to.

Optional Feature 2

To go a step further, try adding the outline as a sidebar in the IDLE editor. Look to the VS code implementation of Outline as the motivation. Specifically, we should have a sidebar on the left side that is keeping track of the classes and functions that are being written. The outline view should then update as classes and functions are defined.

Submission

Please submit this by 11:59PM on Wednesday, May 8. In the final pull request description, please summarize the changes you made (which features you implemented) and include screenshots of your new feature in action.

Documentation:

Project Folder: Create a folder named “Project 3”. Process Journal File (journal.md): Please visit the instructions for a Process Journal here. Design Documentation (design.md): Provide comprehensive descriptions (and you might want to leverage some diagrams) to illustrate the changes made to the codebase. Ensure this document allows someone who has never touched your project to understand the implementation and rationale without needing to ask for clarification. Remember that the Design Document should at least have the following headers:

High-Level Diagram(s)

Description of Code Changes

Justification of Code Changes

Instructions for Future Changes

Note: We are adding a video submission for Project 3. Read the description below for how to submit this video.

In addition to the Pull Request, please make a video that is no longer than 6 minutes (it can certainly be shorter). The video should:

  1. Show the outline feature when code is highlighted (you should show a couple different situations)
  2. Show the outline feature when no code is highlighted
  3. Show and discuss where in the code base you made changes
  4. Show and discuss the diagram(s) that you came up with

The video is best done on a private Zoom room, where you share your screen and record the meeting. Then, you can download the video and upload it (to either Google Drive or Youtube), and include the link to the video in your pull request description.