Roam: [Eng-610] tag assignment in roam dg plugin settings menu #297

sid597 · 2025-07-21T08:51:46Z

https://www.loom.com/share/4630914958e0445981dced88379e536c?sid=f72fb8bc-da8b-48cd-aaa0-b02d2647966e

Summary by CodeRabbit

New Features
- Added a "Tag" field to node configuration, allowing users to specify a hashtag for each node type.
- The "Tag" field is now visible and editable when creating or configuring nodes.
Bug Fixes
- Introduced validation for the "Tag" and "Format" fields to prevent conflicts, with error messages displayed for invalid input.
Style
- Updated the layout of the "General" tab to display input panels in a horizontal row for improved usability.

…h other data

linear · 2025-07-21T08:51:49Z

ENG-610 Tag assignment in Roam DG plugin settings menu

supabase · 2025-07-21T08:51:53Z

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

sid597 · 2025-07-21T08:52:05Z

@coderabbitai full review

coderabbitai · 2025-07-21T08:52:10Z

✅ Actions performed

Full review triggered.

coderabbitai · 2025-07-21T08:55:17Z

📝 Walkthrough

Walkthrough

A new "Tag" field has been introduced throughout the discourse node configuration workflow. This field is now included in node creation, initialization, and configuration interfaces, with validation logic added to prevent conflicts between tag and format values. Type definitions and default values have been updated accordingly.

Changes

File(s)	Change Summary
apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx	Added "Tag" child node with empty string to new node creation structure and state.
apps/roam/src/components/settings/NodeConfig.tsx	Introduced validation logic and error display for "Tag" and "Format" fields; updated layout; added `ValidatedInputPanel` component and `useDebouncedRoamUpdater` hook.
apps/roam/src/utils/getDiscourseNodes.ts	Added `tag` property to `DiscourseNode` type; ensured all nodes include a `tag` value.
apps/roam/src/utils/initializeDiscourseNodes.ts	Added "Tag" child node to each discourse node's initialization tree structure.
apps/roam/src/utils/renderNodeConfigPage.ts	Inserted a new "Tag" configuration field in the node configuration page.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant NodeConfigPanel
    participant NodeConfig
    participant NodeUtils

    User->>NodeConfigPanel: Create new node
    NodeConfigPanel->>NodeUtils: Initialize node with "Tag" field (empty)
    User->>NodeConfig: Edit node config
    NodeConfig->>NodeConfig: User inputs Tag/Format
    NodeConfig->>NodeConfig: On blur, validate Tag/Format values
    NodeConfig-->>User: Show error if conflict, else accept input

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 6ec5b52 and bfa4ea7.

📒 Files selected for processing (5)

apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx (2 hunks)
apps/roam/src/components/settings/NodeConfig.tsx (6 hunks)
apps/roam/src/utils/getDiscourseNodes.ts (5 hunks)
apps/roam/src/utils/initializeDiscourseNodes.ts (1 hunks)
apps/roam/src/utils/renderNodeConfigPage.ts (1 hunks)

🔇 Additional comments (12)

apps/roam/src/utils/initializeDiscourseNodes.ts (1)

19-19: LGTM!

The tag field is correctly added to the initialization structure, following the same pattern as other fields with proper fallback to empty string.

apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx (2)

82-85: LGTM!

Tag field properly added to the page tree structure during node creation.

103-103: LGTM!

Tag property correctly initialized in the node state object.

apps/roam/src/utils/renderNodeConfigPage.ts (1)

93-99: LGTM!

Tag field properly integrated into the node configuration UI with clear description and appropriate default value.

apps/roam/src/utils/getDiscourseNodes.ts (4)

18-18: LGTM!

Tag property correctly added to the DiscourseNode type definition.

36-36: LGTM!

Default nodes properly initialized with empty tag values.

Also applies to: 54-54

91-91: LGTM!

Tag value correctly extracted from the configuration tree using the standard pattern.

117-117: LGTM!

Relation-based nodes consistently include the tag property.

apps/roam/src/components/settings/NodeConfig.tsx (4)

138-170: Consider the validation strictness for tag/format conflicts

The current validation prevents any tag that matches a word in the format string. This might be overly restrictive in some cases. For example, if the format is "QUE - {content}", a user cannot use the tag "#QUE".

Consider if this level of strictness is intentional for your use case, or if you want to allow exact matches while preventing only partial conflicts.

19-44: Well-designed reusable component

The ValidatedInputPanel component is well-structured and reusable, providing consistent error display across validated inputs.

46-93: Excellent debouncing implementation

The useDebouncedRoamUpdater hook is well-implemented with proper ref usage to maintain current validation state, appropriate debounce timing, and clean separation of create/update logic.

214-221: Tag field properly integrated into UI

The tag input is correctly placed in the General tab with appropriate validation and error handling.

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.

sid597 · 2025-07-25T05:37:04Z

@coderabbitai full review

coderabbitai · 2025-07-25T05:37:10Z

✅ Actions performed

Full review triggered.

mdroidian

Good stuff so far! The biggest blocker is the validation. We need to check if the tag is referenced, not just if the word shows up. 👍

apps/roam/src/components/settings/NodeConfig.tsx

apps/roam/src/utils/getDiscourseNodes.ts

apps/roam/src/components/settings/NodeConfig.tsx

mdroidian

👍

apps/roam/src/components/settings/NodeConfig.tsx

…tings-menu

sid597 added 2 commits July 21, 2025 13:29

real time validation

958cdee

use on blur validation, add tag to config page, settings, extract wit…

27bd7e9

…h other data

github-project-automation bot added this to General Jul 21, 2025

use live validation, don't save conflicting state to roam

bfa4ea7

sid597 requested a review from mdroidian July 25, 2025 06:05

mdroidian requested changes Jul 27, 2025

View reviewed changes

address review

7e71e75

sid597 requested a review from mdroidian July 27, 2025 10:39

mdroidian approved these changes Aug 1, 2025

View reviewed changes

apps/roam/src/components/settings/NodeConfig.tsx Outdated Show resolved Hide resolved

sid597 added 2 commits August 4, 2025 01:17

remove unused

5cb3f52

Merge branch 'main' into eng-610-tag-assignment-in-roam-dg-plugin-set…

ee1a85b

…tings-menu

sid597 merged commit 417b852 into main Aug 3, 2025
5 checks passed

github-project-automation bot moved this to Done in General Aug 3, 2025

sid597 deleted the eng-610-tag-assignment-in-roam-dg-plugin-settings-menu branch August 3, 2025 19:49

This was referenced Aug 25, 2025

Roam: ENG-693 handle node tags with # in front and update placeholder to use # #372

Closed

Roam: ENG-798 Node Tags breaks Color Highlighter #402

Merged

This was referenced Sep 4, 2025

ENG-737 Use Node Color to style Node Tags #414

Closed

Roam: Eng-752 node formalization menu doesnt pop up in query results forr #417

Merged

coderabbitai bot mentioned this pull request Sep 27, 2025

ENG-890 | ENG-891 - Ship pre populated tags and adjust tag placeholder #460

Merged

coderabbitai bot mentioned this pull request Nov 24, 2025

ENG-955 create add node tag button on image hover #566

Open

Roam: [Eng-610] tag assignment in roam dg plugin settings menu #297

Roam: [Eng-610] tag assignment in roam dg plugin settings menu #297

Uh oh!

Conversation

sid597 commented Jul 21, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

linear bot commented Jul 21, 2025

Uh oh!

supabase bot commented Jul 21, 2025

Uh oh!

sid597 commented Jul 21, 2025

Uh oh!

coderabbitai bot commented Jul 21, 2025

Uh oh!

coderabbitai bot commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

sid597 commented Jul 25, 2025

Uh oh!

coderabbitai bot commented Jul 25, 2025

Uh oh!

mdroidian left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mdroidian left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sid597 commented Jul 21, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 21, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)