Skip to content

Conversation

sid597
Copy link
Collaborator

@sid597 sid597 commented Jul 21, 2025

https://www.loom.com/share/d3d53d536c1d445c9052e01517eac201?sid=76e85ee4-1412-4a83-b48a-6000774dbe66

Summary by CodeRabbit

  • New Features

    • Added the ability to toggle the node menu between showing full discourse node types and a simplified tag view, based on Shift key state and text selection.
    • Menu display dynamically updates according to keyboard interaction and selected text.
  • Improvements

    • Enhanced keyboard handling for more intuitive menu toggling.
    • Menu now visually distinguishes between node types and tags for easier selection.

Copy link

linear bot commented Jul 21, 2025

@sid597 sid597 changed the base branch from eng-620-update-actions-to-use-npm-ci to eng-610-tag-assignment-in-roam-dg-plugin-settings-menu July 21, 2025 11:10
@sid597
Copy link
Collaborator Author

sid597 commented Jul 21, 2025

@coderabbitai full review

Copy link
Contributor

coderabbitai bot commented Jul 21, 2025

✅ Actions performed

Full review triggered.

Copy link
Contributor

coderabbitai bot commented Jul 21, 2025

📝 Walkthrough

Walkthrough

The changes introduce a toggleable mode for the discourse node menu in the Roam app, allowing users to switch between viewing full node types and a simplified tag view. This mode is controlled by Shift key state and text selection, affecting menu display, filtering, selection logic, and keyboard interactions across related components and utility functions.

Changes

File(s) Change Summary
apps/roam/src/components/DiscourseNodeMenu.tsx Enhanced NodeMenu and TextSelectionNodeMenu components to support toggling between node types and tag views via new props and logic.
apps/roam/src/utils/initializeObserversAndListeners.ts Updated handleNodeMenuRender to detect text selection and Shift key state, passing new context to menu rendering.
apps/roam/src/utils/renderTextSelectionPopup.tsx Passed new isTextSelected prop as true to TextSelectionNodeMenu when rendering the popup.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Textarea
    participant NodeMenu
    participant UtilityFunctions

    User->>Textarea: Selects text or presses Shift
    Textarea->>UtilityFunctions: handleNodeMenuRender(event)
    UtilityFunctions->>NodeMenu: renderDiscourseNodeMenu(textarea, isShift, isTextSelected)
    NodeMenu->>User: Displays menu (node types or tags)
    User->>NodeMenu: Selects menu item
    NodeMenu->>UtilityFunctions: onSelect (node type or tag logic)
Loading

Estimated code review effort

3 (30–60 minutes)


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (2)
apps/roam/src/components/DiscourseNodeMenu.tsx (2)

51-51: Add null check for node tag property

When showNodeTypes is false, the filter condition n.tag might evaluate to a falsy value like empty string or undefined. Consider being more explicit:

-        (n) => n.backedBy === "user" && (showNodeTypes || n.tag),
+        (n) => n.backedBy === "user" && (showNodeTypes || (n.tag && n.tag.trim())),

105-111: Incomplete tag selection implementation

The tag selection branch only logs the selected tag without performing any action. This appears to be incomplete functionality that doesn't align with the PR objective of showing node tag options in the creation menu.

Would you like me to help implement the tag selection functionality or open an issue to track this TODO?

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 27bd7e9 and 3d3558c.

📒 Files selected for processing (3)
  • apps/roam/src/components/DiscourseNodeMenu.tsx (6 hunks)
  • apps/roam/src/utils/initializeObserversAndListeners.ts (1 hunks)
  • apps/roam/src/utils/renderTextSelectionPopup.tsx (1 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: sid597
PR: DiscourseGraphs/discourse-graph#232
File: apps/roam/src/utils/getAllDiscourseNodesSince.ts:18-31
Timestamp: 2025-06-22T10:40:52.752Z
Learning: In apps/roam/src/utils/getAllDiscourseNodesSince.ts, the user confirmed that querying for `?title` with `:node/title` and mapping it to the `text` field in the DiscourseGraphContent type is the correct implementation for retrieving discourse node content from Roam Research, despite it appearing to query page titles rather than block text content.
Learnt from: maparent
PR: DiscourseGraphs/discourse-graph#220
File: apps/roam/src/utils/conceptConversion.ts:11-40
Timestamp: 2025-06-23T11:49:45.457Z
Learning: In the DiscourseGraphs/discourse-graph codebase, direct access to `window.roamAlphaAPI` is the established pattern throughout the codebase. The team prefers to maintain this pattern consistently rather than making piecemeal changes, and plans to address dependency injection as a global refactor when scheduled.
Learnt from: maparent
PR: DiscourseGraphs/discourse-graph#220
File: apps/roam/src/utils/conceptConversion.ts:42-56
Timestamp: 2025-06-17T23:37:45.289Z
Learning: In the DiscourseNode interface from apps/roam/src/utils/getDiscourseNodes.ts, the field `node.type` serves as the UID field rather than having a conventional `node.uid` field. This is an unusual naming convention where the type field actually contains the unique identifier.
Learnt from: CR
PR: DiscourseGraphs/discourse-graph#0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.610Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use the roamAlphaApi documentation from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when working with the Roam API
Learnt from: maparent
PR: DiscourseGraphs/discourse-graph#220
File: apps/roam/src/utils/conceptConversion.ts:42-56
Timestamp: 2025-06-17T23:37:45.289Z
Learning: In the DiscourseNode interface from apps/roam/src/utils/getDiscourseNodes.ts, the field `type` serves as the unique identifier field, not a type classification field. The interface has no `uid` or `id` field, making `node.type` the correct field to use for UID-related operations.
Learnt from: CR
PR: DiscourseGraphs/discourse-graph#0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.610Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension
apps/roam/src/utils/renderTextSelectionPopup.tsx (3)

Learnt from: CR
PR: DiscourseGraphs/discourse-graph#0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.610Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Learnt from: CR
PR: DiscourseGraphs/discourse-graph#0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.610Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use Roam Depot/Extension API documentation from https://roamresearch.com/#/app/developer-documentation/page/y31lhjIqU when working with the Roam Extension API

Learnt from: CR
PR: DiscourseGraphs/discourse-graph#0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.610Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use the roamAlphaApi documentation from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when working with the Roam API

apps/roam/src/utils/initializeObserversAndListeners.ts (3)

Learnt from: sid597
PR: #232
File: apps/roam/src/utils/getAllDiscourseNodesSince.ts:18-31
Timestamp: 2025-06-22T10:40:52.752Z
Learning: In apps/roam/src/utils/getAllDiscourseNodesSince.ts, the user confirmed that querying for ?title with :node/title and mapping it to the text field in the DiscourseGraphContent type is the correct implementation for retrieving discourse node content from Roam Research, despite it appearing to query page titles rather than block text content.

Learnt from: CR
PR: DiscourseGraphs/discourse-graph#0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.610Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use the roamAlphaApi documentation from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when working with the Roam API

Learnt from: sid597
PR: #232
File: apps/roam/src/utils/getAllDiscourseNodesSince.ts:15-16
Timestamp: 2025-06-22T10:40:21.679Z
Learning: In the getAllDiscourseNodesSince function in apps/roam/src/utils/getAllDiscourseNodesSince.ts, date validation is performed before the function is called, so additional date validation within the function is not needed.

apps/roam/src/components/DiscourseNodeMenu.tsx (5)

Learnt from: sid597
PR: #232
File: apps/roam/src/utils/getAllDiscourseNodesSince.ts:18-31
Timestamp: 2025-06-22T10:40:52.752Z
Learning: In apps/roam/src/utils/getAllDiscourseNodesSince.ts, the user confirmed that querying for ?title with :node/title and mapping it to the text field in the DiscourseGraphContent type is the correct implementation for retrieving discourse node content from Roam Research, despite it appearing to query page titles rather than block text content.

Learnt from: maparent
PR: #220
File: apps/roam/src/utils/conceptConversion.ts:42-56
Timestamp: 2025-06-17T23:37:45.289Z
Learning: In the DiscourseNode interface from apps/roam/src/utils/getDiscourseNodes.ts, the field node.type serves as the UID field rather than having a conventional node.uid field. This is an unusual naming convention where the type field actually contains the unique identifier.

Learnt from: maparent
PR: #220
File: apps/roam/src/utils/conceptConversion.ts:42-56
Timestamp: 2025-06-17T23:37:45.289Z
Learning: In the DiscourseNode interface from apps/roam/src/utils/getDiscourseNodes.ts, the field type serves as the unique identifier field, not a type classification field. The interface has no uid or id field, making node.type the correct field to use for UID-related operations.

Learnt from: CR
PR: DiscourseGraphs/discourse-graph#0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.610Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Learnt from: CR
PR: DiscourseGraphs/discourse-graph#0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-07-19T22:34:23.610Z
Learning: Applies to apps/roam/**/*.{js,jsx,ts,tsx} : Use the roamAlphaApi documentation from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when working with the Roam API

🔇 Additional comments (2)
apps/roam/src/utils/initializeObserversAndListeners.ts (1)

162-169: Clean implementation for detecting text selection and keyboard state

The changes correctly capture the text selection state and shift key modifier to enable the new menu display modes. Good use of typed variables to avoid repeated casting.

apps/roam/src/utils/renderTextSelectionPopup.tsx (1)

62-62: Correct prop value for text selection context

Setting isTextSelected={true} is appropriate here since this popup only appears when text is actually selected.

sid597 and others added 4 commits July 25, 2025 11:06
… into eng-621-show-node-tag-options-in-inline-node-creation-menu
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@sid597 sid597 requested a review from mdroidian July 25, 2025 06:05
Copy link
Contributor

@mdroidian mdroidian left a comment

Choose a reason for hiding this comment

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

Good stuff so far!

@mdroidian
Copy link
Contributor

@sid597 When no text is selected and you press Shift to show nodeTypes, user cannot use up/down/enter or the Keyboard shortcut to select.

https://www.loom.com/share/66c7c188e0cb4fc1a733ddf3ffc3a358

@sid597 sid597 requested a review from mdroidian July 27, 2025 11:39
@sid597
Copy link
Collaborator Author

sid597 commented Jul 27, 2025

@sid597 When no text is selected and you press Shift to show nodeTypes, user cannot use up/down/enter or the Keyboard shortcut to select.

Missed this before asking for review will fix
Fixed now

Copy link
Contributor

@mdroidian mdroidian left a comment

Choose a reason for hiding this comment

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

👍

(n) => n.backedBy === "user" && (showNodeTypes || n.tag),
),
[showNodeTypes],
() => userDiscourseNodes.filter((n) => showNodeTypes || n.tag),
Copy link
Contributor

Choose a reason for hiding this comment

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

Because getDiscourseNodes is memoized (which is the expensive query), discourseNodes doesn't also need to be memoized because it is a simple filter.

Base automatically changed from eng-610-tag-assignment-in-roam-dg-plugin-settings-menu to main August 3, 2025 19:49
@sid597 sid597 merged commit 6f6e957 into main Aug 4, 2025
5 checks passed
@github-project-automation github-project-automation bot moved this to Done in General Aug 4, 2025
@coderabbitai coderabbitai bot mentioned this pull request Oct 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants