Skip to content

Modernize Graph and Mind Map Workbench (Phase 6)#92

Merged
d-oit merged 3 commits intomainfrom
feat/graph-mindmap-modernization-9989539020139947263
May 2, 2026
Merged

Modernize Graph and Mind Map Workbench (Phase 6)#92
d-oit merged 3 commits intomainfrom
feat/graph-mindmap-modernization-9989539020139947263

Conversation

@d-oit
Copy link
Copy Markdown
Owner

@d-oit d-oit commented May 2, 2026

Modernized the Graph and Mind Map views with:

  • GraphInspector panel for selected nodes (showing details, claims, and links).
  • Dynamic Mind Map hierarchy generation from data relationships.
  • URL search parameter persistence for selected nodes and focus modes.
  • Relation type filters and depth controls.
  • Accessible text alternatives (visually hidden summaries).
  • Tokenized visualization colors in tokens.css.
  • Improved mobile UX by moving controls into the view-level toolbar.
  • Full A11y support with aria-pressed, proper dialog semantics, and focus management.

Fixes #82

PR created automatically by Jules for task 9989539020139947263 started by @d-oit

@google-labs-jules @d-oit
feat(graph): phase 6 - graph and mind map workbench modernization
3ab7a26 
Co-authored-by: d-oit <6849456+d-oit@users.noreply.github.com>
@google-labs-jules
Copy link
Copy Markdown
Contributor

google-labs-jules Bot commented May 2, 2026

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

@google-labs-jules google-labs-jules Bot mentioned this pull request May 2, 2026
Closed
@github-actions github-actions Bot added the config label May 2, 2026
@deepsource-io
Copy link
Copy Markdown

deepsource-io Bot commented May 2, 2026 •
edited
Loading

DeepSource Code Review

We reviewed changes in 9c1530e...dfdebf0 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

Important

Some issues found as part of this review are outside of the diff in this pull request and aren't shown in the inline review comments due to GitHub's API limitations. You can see those issues on the DeepSource dashboard.

PR Report Card

Overall Grade   Security  

Reliability  

Complexity  

Hygiene  

Code Review Summary

Analyzer Status Updated (UTC) Details
JavaScript May 2, 2026 4:22p.m. Review ↗
Python May 2, 2026 4:22p.m. Review ↗
Shell May 2, 2026 4:22p.m. Review ↗
SQL May 2, 2026 4:22p.m. Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

deepsource-io[bot]
deepsource-io Bot reviewed May 2, 2026
View reviewed changes
Comment thread src/features/graph/GraphInspector.tsx
onClose: () => void;
}

const GraphInspector: React.FC<GraphInspectorProps> = ({
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

`GraphInspector` has a cyclomatic complexity of 8 with "medium" risk


A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

Comment thread src/features/graph/GraphView.tsx
const focusMode = propsFocusMode !== undefined ? propsFocusMode : internalFocusMode;

// Sync with URL search parameters
useEffect(() => {
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function has a cyclomatic complexity of 6 with "medium" risk


A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

Comment thread src/features/graph/GraphView.tsx
y: 0
});
} else {
filteredData.entities.forEach((e, i) => {
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function has a cyclomatic complexity of 7 with "medium" risk


A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

Comment thread src/features/graph/GraphView.tsx
);

return (
<div className="graph-container">
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSX tree is too deeply nested. Found 5 levels of nesting


Nesting JSX elements too deeply can confuse developers reading the code. To make maintenance and refactoring easier, DeepSource recommends limiting the maximum JSX tree depth to 4.

Comment thread src/features/graph/GraphView.tsx
<GraphControls
focusMode={focusMode}
setFocusMode={setFocusMode}
hasSelection={!!selectedNode}
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use `Boolean(selectedNode)` instead


Prefer using explicit casts by calling Number, Boolean, or String over using operators like +, !! or "" +. This is considered best practice as it improves readability.

Comment thread src/features/mindmap/MindMapView.tsx
Comment on lines +87 to +93
return () => {
if (mindInstance.current) {
// MindElixir doesn't have a clear kill method in some versions,
// but we can clear the container
if (currentContainer) currentContainer.innerHTML = '';
}
};
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Arrow function expected no return value


Any code paths that do not have explicit returns will return undefined. It is recommended to replace any implicit dead-ends that return undefined with a return null statement.

@d-oit d-oit marked this pull request as ready for review May 2, 2026 10:48
d-oit and others added 2 commits May 2, 2026 12:48
@d-oit
Merge branch 'main' into feat/graph-mindmap-modernization-99895390201…
22dbe29 
…39947263
@google-labs-jules @d-oit
feat(graph): phase 6 - modernization of graph and mind map
dfdebf0 
- Integrated GraphInspector for detailed node analysis.
- Dynamically generated Mind Map hierarchy from data relationships.
- Added relation filters, depth controls, and root entity picker.
- Implemented URL persistence for selected nodes and focus modes.
- Modernized visuals using design tokens in tokens.css.
- Enhanced accessibility with aria-pressed, dialog semantics, and text summaries.
- Improved mobile UX by moving controls into the view-level toolbar.

Verified with:
- npm run typecheck
- npm run lint
- npm test
- quality gate (verify.sh --fast)

Co-authored-by: d-oit <6849456+d-oit@users.noreply.github.com>
@github-actions github-actions Bot added the tests Related to automated/manual tests label May 2, 2026
@d-oit d-oit merged commit 76ede91 into main May 2, 2026
20 of 21 checks passed
@d-oit d-oit deleted the feat/graph-mindmap-modernization-9989539020139947263 branch May 2, 2026 16:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@deepsource-io deepsource-io[bot] deepsource-io[bot] left review comments

Assignees

No one assigned

Labels

config tests Related to automated/manual tests

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

feat(graph): Phase 6 - Graph and Mind Map Workbench

1 participant

@d-oit