Refactor `GraphDropdown` component from being a child of Graph to being a child of NavBar #1637

Japleen-Kaur2409 · 2025-11-23T21:19:09Z

Proposed Changes

Refactor GraphDropdown component from being a child of Graph to being a child of NavBar
Removed the current logic for controlling this using direct DOM manipulation, and refactored the code so that it is controlled entirely through React props/state.

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)
♻️ Refactoring (internal change to codebase, without changing functionality)	X
🚦 Test update (change that only adds or modifies tests)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

I have performed a self-review of my changes.
- Check that all changed files included in this pull request are intentional changes.
- Check that all changes are relevant to the purpose of this pull request, as described above.
I have added tests for my changes, if applicable.
- This is required for all bug fixes and new features.
I have updated the project documentation, if applicable.
- This is required for new features.
If this is my first contribution, I have added myself to the list of contributors.
I have updated the project Changelog (this is required for all changes).

After opening your pull request:

I have verified that the CircleCI checks have passed.
I have requested a review from a project maintainer.

david-yz-liu · 2025-11-25T14:34:14Z

js/components/graph/Graph.js

 import { CourseModal } from "../common/react_modal.js.jsx"
 import { ExportModal } from "../common/export.js.jsx"
-import { getProgram } from "../common/utils.js"
+import { getPost } from "../common/utils.js"


This change is unrelated to this PR

david-yz-liu · 2025-11-25T14:36:43Z

js/components/common/NavBar.js.jsx

+    setDropdownTimeouts(dropdownTimeouts.concat(timeout))
+  }
+
+    React.useEffect(() => {


The indentation at this line is incorrect

david-yz-liu · 2025-11-25T14:38:19Z

js/components/common/NavBar.js.jsx

+  }
+
+    React.useEffect(() => {
+    const navGraph = document.querySelector("#nav-graph")


Part of your task is to remove DOM manipulation. This includes accessing DOM elements direction and manually adding callbacks (addEventListener, below). Instead, these callbacks should be managed by the React components themselves. Make sure you understand the existing behaviour (on master) so that you can replicate it with your changes.

js/components/graph/Graph.js

david-yz-liu · 2025-11-25T14:41:04Z

js/components/graph/GraphDropdown.js

        data-testid={"test-graph-dropdown"}
-        style={{ left: graphTabLeft }}
+        style={{ left: graphTabLeft, top: "50px", zIndex: 1000
+        }}


Put the }} on the same line as the {{.

Also, in this file there is still direct DOM manipulation, which you should remove by handling the logic in the parent NavBar component.

david-yz-liu · 2025-12-16T21:56:22Z

CHANGELOG.md

 - Switched CircleCI ImageMagick download to use http
 - Modified CI config to take advantage of partial dependency caching and exploit parallelism when resolving/updating dependencies
 - Migrate graph-related components (FocusBar, FocusTab, GraphDropdown, GraphFallback, Infobox, and Sidebar) from classes to functions
+- Refactor GraphDropdown component from being a child of Graph to being a child of NavBar


Please do another merge from master, as I've made a new release; after doing this merge, this entry should be moved into the "unreleased" section.

david-yz-liu · 2025-12-16T21:57:31Z

js/components/common/NavBar.js.jsx

            <a href="/graph">Graph</a>
+            {selected_page === "graph" && (
+              <GraphDropdown
+                showGraphDropdown={showGraphDropdown }


delete the extra space

david-yz-liu · 2025-12-16T21:58:52Z

js/components/graph/Graph.js

    }
  }

  clearAllTimeouts = timeoutName => {


This function no longer needs to take an argument (timeoutName is now unused)

david-yz-liu · 2025-12-16T22:02:12Z

js/components/common/NavBar.js.jsx

-          <li id="nav-graph" className={isActive("graph")}>
+          <li 
+            id="nav-graph"
+            className={`${isActive("graph")} show-dropdown-arrow`}


In the previous version of the code, it looks like show-dropdown-arrow only appeared when there is at least one graph option.

david-yz-liu · 2025-12-16T22:02:42Z

js/components/common/NavBar.js.jsx

 * NavBar component.
 */
-export function NavBar({ selected_page, open_modal }) {
+export function NavBar({ selected_page, open_modal, graphs = [], updateGraph}) {


include a space before the }

david-yz-liu · 2025-12-16T22:03:12Z

js/components/graph/FocusTab.js

   * @param {bool} value
   */
-  const toggleFocusModal = value => {
+  const toggleFocusModal = (value => {


Revert all of the changes in this file (these are all unrelated to the PR)

david-yz-liu · 2025-12-16T22:04:10Z

js/components/graph/Sidebar.js

  }

-  const filteredSearch = query => {
+  const filteredSearch = (query) => {


The changes in this file are unrelated to this PR

Japleen-Kaur2409 added 4 commits November 14, 2025 14:18

Convert FocusBar from class component to function component

49c31a2

complete class-to-function migration for graph components

c8b4bfb

Updated CHANGELOG.md file.

a3876fc

Merge branch 'master' into master

8b95c12

Japleen-Kaur2409 requested a review from david-yz-liu November 23, 2025 21:19

david-yz-liu reviewed Nov 25, 2025

View reviewed changes

refactor graphdown

50c911d

Japleen-Kaur2409 force-pushed the refactor-graph branch from 0325234 to 50c911d Compare December 15, 2025 04:51

Japleen-Kaur2409 requested a review from david-yz-liu December 15, 2025 04:52

Merge branch 'master' into refactor-graph

319807d

david-yz-liu reviewed Dec 16, 2025

View reviewed changes

Japleen-Kaur2409 added 2 commits December 20, 2025 13:28

Fix dropdown arrow visibility and remove unused argument

f54965e

added space for syntax

e8ab951

Japleen-Kaur2409 requested a review from david-yz-liu December 20, 2025 21:28

Revert unrelated Sidebar changes

8f7280b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Refactor `GraphDropdown` component from being a child of Graph to being a child of NavBar #1637

Refactor `GraphDropdown` component from being a child of Graph to being a child of NavBar #1637

Uh oh!

Japleen-Kaur2409 commented Nov 23, 2025

Uh oh!

david-yz-liu Nov 25, 2025

Uh oh!

david-yz-liu Nov 25, 2025

Uh oh!

david-yz-liu Nov 25, 2025

Uh oh!

Uh oh!

david-yz-liu Nov 25, 2025

Uh oh!

david-yz-liu Dec 16, 2025

Uh oh!

david-yz-liu Dec 16, 2025

Uh oh!

david-yz-liu Dec 16, 2025

Uh oh!

david-yz-liu Dec 16, 2025

Uh oh!

david-yz-liu Dec 16, 2025

Uh oh!

david-yz-liu Dec 16, 2025

Uh oh!

david-yz-liu Dec 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Refactor GraphDropdown component from being a child of Graph to being a child of NavBar #1637

Are you sure you want to change the base?

Refactor GraphDropdown component from being a child of Graph to being a child of NavBar #1637

Uh oh!

Conversation

Japleen-Kaur2409 commented Nov 23, 2025

Proposed Changes

Type of Change

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Refactor `GraphDropdown` component from being a child of Graph to being a child of NavBar #1637

Refactor `GraphDropdown` component from being a child of Graph to being a child of NavBar #1637