[ENG-1080 & ENG-1067] Change key figure behaviors and styles

[trangdoan982]

https://www.loom.com/share/f2553f62439b4c5eba7037ddec0c1541

Summary by CodeRabbit

• New Features

  • Discourse nodes now support image attachments with intelligent automatic sizing calculations based on content properties.
  • Node dimensions are dynamically calculated from title, node type name, and image presence for optimal display.

• UI/Style Improvements

  • Improved overall visual layout with enhanced spacing and positioning of node elements.
  • Better vertical separation between components when images are included in nodes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

ENG-1080 After converting an image to a node type that has key image setting turned on the key image is only shown after refreshing Obsidian

[supabase]

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 ↗︎.

[trangdoan982]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[trangdoan982]

also addresses ENG-1067

[linear]

ENG-1067 Change Obsidian key image position to mimic Roam's

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes introduce image source (imageSrc) handling to the Discourse node creation and rendering pipeline. Dynamic node sizing based on image presence is now integrated via calcDiscourseNodeSize, replacing fixed defaults. DiscourseNodeShape rendering reorders title/type to appear after the image with added padding.

Changes

Cohort / File(s)	Summary
Discourse Node Rendering apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx	Reordered rendering: node title and type name now render after the image block instead of before; added pt-4 padding to title element for vertical separation; reformatted comment block with no behavioral changes.
Discourse Node Conversion & Sizing apps/obsidian/src/components/canvas/utils/convertToDiscourseNode.ts	Introduced imageSrc extraction from image elements and propagation to node creation; integrated calcDiscourseNodeSize to compute node dimensions based on title, node type, and optional imageSrc, replacing fixed defaults; extended createDiscourseNodeShape to accept and persist imageSrc parameter; removed hard-coded shape size calculations.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Verify imageSrc propagation through all function layers (extraction → sizing → shape creation)
• Confirm rendering order change does not inadvertently affect conditional logic or image display
• Validate that optional imageSrc parameter maintains backward compatibility
• Check that pt-4 padding works correctly in both image-present and image-absent scenarios

Possibly related PRs

• [ENG-869] Key figure #522: Both PRs modify DiscourseNodeShape rendering and imageSrc handling with calcDiscourseNodeSize usage.
• [ENG-871] Convert text and image into a discourse node (Obsidian) #523: Both PRs extend convertToDiscourseNode.ts with image handling, imageSrc embedding, and createDiscourseNodeShape parameter modifications.
• [ENG-604] Create node flow #387: Both PRs touch the Discourse node shape and creation pipeline, including shape props like src.

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title references two tickets (ENG-1080 & ENG-1067) and describes 'key figure behaviors and styles,' which aligns with the changes to image handling and node rendering in the DiscourseNodeShape and convertToDiscourseNode files.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 20199dc and 804b166.

📒 Files selected for processing (2)

• apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx (2 hunks)
• apps/obsidian/src/components/canvas/utils/convertToDiscourseNode.ts (4 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx}: Use Tailwind CSS for styling where possible
When refactoring inline styles, use tailwind classes
Prefer type over interface in TypeScript
Use explicit return types for functions
Avoid any types when possible
Prefer arrow functions over regular function declarations
Use named parameters (object destructuring) when a function has more than 2 parameters
Use PascalCase for components and types
Use camelCase for variables and functions
Use UPPERCASE for constants
Function names should describe their purpose clearly
Prefer early returns over nested conditionals for better readability

Files:

• apps/obsidian/src/components/canvas/utils/convertToDiscourseNode.ts
• apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx

apps/obsidian/**

📄 CodeRabbit inference engine (.cursor/rules/obsidian.mdc)

apps/obsidian/**: Prefer existing dependencies from apps/obsidian/package.json when adding dependencies to the Obsidian plugin
Follow the Obsidian style guide from help.obsidian.md/style-guide and docs.obsidian.md/Developer+policies for UI and code styling
Use Lucide and custom Obsidian icons alongside detailed elements to provide visual representation of features in platform-native UI

Files:

• apps/obsidian/src/components/canvas/utils/convertToDiscourseNode.ts
• apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx

🧠 Learnings (2)

📚 Learning: 2025-06-22T10:40:52.752Z

Learnt from: sid597
Repo: DiscourseGraphs/discourse-graph 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.

Applied to files:

• apps/obsidian/src/components/canvas/utils/convertToDiscourseNode.ts
• apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx

📚 Learning: 2025-11-25T00:52:27.779Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/main.mdc:0-0
Timestamp: 2025-11-25T00:52:27.779Z
Learning: Applies to **/*.{ts,tsx} : When refactoring inline styles, use tailwind classes

Applied to files:

• apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx

🧬 Code graph analysis (1)

apps/obsidian/src/components/canvas/utils/convertToDiscourseNode.ts (2)

apps/obsidian/src/components/canvas/stores/assetStore.ts (1)

• addWikilinkBlockrefForFile (30-51)

apps/obsidian/src/utils/calcDiscourseNodeSize.ts (1)

• calcDiscourseNodeSize (22-67)

🔇 Additional comments (6)

apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx (1)

311-314: LGTM: Comment clarifies Tailwind class dependencies.

The reformatted comment clearly documents the relationship between these Tailwind classes and constants in nodeConstants.ts, which is helpful for maintainability.

apps/obsidian/src/components/canvas/utils/convertToDiscourseNode.ts (5)

21-21: LGTM: Import added for dynamic node sizing.

The import of calcDiscourseNodeSize enables dynamic sizing based on content, which is a good improvement over fixed dimensions.

---

144-148: LGTM: Image source handling is clean and properly scoped.

The image source is correctly obtained using getResourcePath and is only computed when an image file exists. The logic properly handles the optional nature of the image.

---

185-193: LGTM: Function signature properly updated for image support.

The imageSrc parameter is correctly typed as optional (imageSrc?: string) and properly integrated into the function signature using named parameters.

---

201-210: Verify that calcDiscourseNodeSize handles undefined imageSrc gracefully.

The dynamic size calculation replaces fixed defaults, which is a good improvement. However, ensure that calcDiscourseNodeSize properly handles the case when imageSrc is undefined.

Looking at the provided code snippet from apps/obsidian/src/utils/calcDiscourseNodeSize.ts:21-66, the function checks if (!imageSrc || !nodeType?.keyImage) and returns text-only dimensions, so undefined values are handled correctly. No action needed.

---

219-224: LGTM: Shape properties correctly updated with dynamic values.

The calculated dimensions (w, h) and imageSrc are properly assigned to the shape properties, ensuring the node is created with the correct size and image reference.