Dyn 10225 add default placeholder images in dynamo app home by Chloepeg · Pull Request #71 · DynamoDS/DynamoHome

Chloepeg · 2026-03-17T11:44:06Z

Purpose

This PR addresses DYN-10225 https://jira.autodesk.com/browse/DYN-10225

The changes in the code aim to show placeholder icons for graphs/templates without custom thumbnails. It checks if the thumbnail is empty, null, then select the correct icon by file extension (.dyn, .dyf, and ( future .dyt)

Changes :

Added import for getPlaceholderImage from ../../functions/placeholder
Added import for img from ../../assets/home
Added logic to detect custom thumbnails vs default/empty thumbnails
Updated imageSrc to use getPlaceholderImage(ContextData) when no custom thumbnail is present

This PR should be merged after DYN-10191

Declarations

Check these if you believe they are true

[ ] Is documented according to the standards
[ ] The level of testing this PR includes is appropriate
[ ] Changes to the API follow Semantic Versioning and are documented in the API Changes document.

### Release Notes

Graphs and templates without custom thumbnails now display appropriate placeholder icons. The icon is selected based on file extension (.dyn, .dyf, ( or future .dyt)

Reviewers

@zeusongit
@DynamoDS/eidos

FYIs
@dnenov
@johnpierson

- Enhance CustomDropdown component to support divider and header option types - Add template options to Sidebar "New" dropdown with visual grouping - Add template data structure in home.ts assets - Update dropdown styling for divider and header elements - Add TypeScript types for dropdown option kinds (item/divider/header) - Update package dependencies

- Add Templates section above Recent section on home page - Implement templates data loading from home.ts (dev) and backend (prod) - Add independent grid/list view toggle for Templates section - Add templatesPageViewMode setting for view preference persistence - Map template data structure (date -> DateModified) for component compatibility - Add receiveTemplatesDataFromDotNet window function for backend integration - Add "Templates" translation key to locale files - Reuse existing GraphGridItem and GraphTable components for templates display

…down - Add newWorkspaceWithTemplate utility function - Implement listener pattern for template data sharing between Sidebar and PageRecent - Map hardcoded dropdown options to real template files from backend - Update TypeScript types for listener pattern

- Add TemplatesContext to manage template state centrally - Update Sidebar and PageRecent to use useTemplates() hook - Remove duplicate global handlers to prevent race conditions - Aligns with existing React patterns

Update template matching logic to use new filenames: - Template 1: matches 'Create a Graph.dyn' (was Template_00_) - Template 2: matches 'Import & Export Workflow.dyn' (was Template_01_)

Drop down menu on side panel removed, will be added back later - Remove Template 1 and Template 2 options from Sidebar dropdown - Remove newWorkspaceWithTemplate function from utility.ts - Remove divider/header support from CustomDropdown component - Remove template data from home.ts assets - Update type definitions to remove template-related types

TemplatesContext requires templates export in development mode

Fix module path in TemplatesContext.tsx and restore package-lock.json metadata.

Display Recent files section above Templates section on the home page. Visual reordering only, there is no functional changes to either section

Add info icon with tooltip to the Templates section title that appears when hovering over the Template heading Changes: - Add tooltip component to Templates title in PageRecent.tsx - Add tooltip text to locale file (en.json) - Extend Tooltip component to support right-side positioning with arrow - Update tooltip styling for wider layout to fit space inbetween - Position tooltip to the right of the title with left-pointing arrow

- Add QuestionMarkIcon import to PageRecent component - Tooltip now appears when hover over the icon instead of the header - Text updated

…e missing, showing file-type-specific icons (.dyn, .dyt, .dyf) Add placeholder icon assets for .dyn, .dyt, and .dyf file types - Create placeholder utility function to select icon based on file extension - Update GraphGridItem to use placeholder images when thumbnails are missing - Update CustomNameCellRenderer to use placeholder images in table view

Fix placeholder icons in GraphGridItem to match CustomNameCellRenderer pattern

Copilot

Pull request overview

Adds support for placeholder thumbnails (by file extension) and introduces a Templates section on the home/Recent page, including updated tooltip behavior to explain templates.

Changes:

Add placeholder image selection (getPlaceholderImage) and apply it when thumbnails are missing/empty.
Introduce TemplatesContext + TemplatesProvider and render Templates (grid/list) alongside Recent graphs.
Update tooltip positioning/styling and add webpack + TS declarations to support image assets.

Reviewed changes

Copilot reviewed 11 out of 18 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
webpack.config.ts	Adds asset/resource handling for image files so placeholders can be bundled.
types/index.d.ts	Adds module declarations for images + new settings/window fields used by templates.
src/locales/en.json	Adds Templates strings (title + tooltip copy).
src/index.css	Updates tooltip layout/arrow styling and max width.
src/functions/placeholder.ts	New helper to choose placeholder image based on file extension.
src/components/TemplatesContext.tsx	New context/provider to supply templates (dev assets vs backend-fed).
src/components/Sidebar/Sidebar.tsx	Minor formatting-only adjustment.
src/components/Recent/PageRecent.tsx	Adds Templates section (grid/list), settings persistence, and click handling.
src/components/Recent/GraphTable.tsx	Removes stray console logging.
src/components/Recent/GraphGridItem.tsx	Uses placeholder image when thumbnail is empty/default.
src/components/Recent/CustomNameCellRenderer.tsx	Uses placeholder image when thumbnail is empty/default (table view).
src/components/Common/Tooltip.tsx	Adds optional “right” positioning behavior for tooltips.
src/App.tsx	Wraps app with `TemplatesProvider`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-20T13:47:48Z

+        test: /\.(png|jpe?g|gif|svg)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'assets/[name][ext]',


Using assets/[name][ext] can cause filename collisions when different images share the same basename (e.g., icon.svg in multiple folders) and also limits cache-busting on updates. Consider incorporating [contenthash] and/or [path] (or configuring output.assetModuleFilename) to ensure unique emitted filenames and better long-term caching.

Suggested change

filename: 'assets/[name][ext]',

filename: 'assets/[name].[contenthash][ext]',

Copilot · 2026-03-20T13:47:48Z

+const TemplatesContext = createContext<any[]>([]);
+
+// Provider component that wraps the app components
+export const TemplatesProvider = ({ children }) => {


The context is typed as any[] and TemplatesProvider’s props are untyped, which makes downstream consumers (like useTemplates()) lose type safety and increases the risk of runtime shape mismatches. Define a Template interface/type (at least the fields used: id, ContextData, Thumbnail, Description, DateModified/date, etc.) and type the context (createContext<Template[]>([])) and provider props ({ children: React.ReactNode }).

Remove unused arrowDirection from Tooltip Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Remove duplicate declare module "*.module.css" entry. Narrow Tooltip position type to 'right' only; default placement is unchanged (below the anchor). 'below' was redundant in the type. Add HomeTemplate in types/index.d.ts and type TemplatesContext / useTemplates() accordingly. Centralize template date display in templateDateDisplay (date vs DateModified); behaviour unchanged. Deduplicate list row click: Recent and Templates share handleRowClick.

…Home' of https://github.com/Chloepeg/DynamoHome into DYN-10225-Add-Default-Placeholder-Images-in-Dynamo-App-Home

Changes : Stale snapshots when saving : updateAndSaveSettings builds the next object inside setSettings(prev => …) and calls saveHomePageSettings on that merged object, so save: are not based on an outdated settings closure. Sidebar width Resize uses updateAndSaveSettings; the old “save in a useEffect off sideBarWidth” path that could race with context is gone. Recent / templates / samples view modes : Persistence goes through updateAndSaveSettings, templates use the same “local vs prop” idea as recent so the first toggle isn’t blocked, and templates get a defaulted prop from MainContent. No stray saveHomePageSettings in components : It only runs from SettingsContext inside updateAndSaveSettings.

jasonstratton

Ok. Looks good. Thank you.

)" This reverts commit 2adc45b.

)" (#79) This reverts commit 2adc45b.

Chloepeg added 13 commits March 3, 2026 12:50

template data to use React Context

362f23a

- Add TemplatesContext to manage template state centrally - Update Sidebar and PageRecent to use useTemplates() hook - Remove duplicate global handlers to prevent race conditions - Aligns with existing React patterns

Update sidebar to match renamed template files

249dce7

Update template matching logic to use new filenames: - Template 1: matches 'Create a Graph.dyn' (was Template_00_) - Template 2: matches 'Import & Export Workflow.dyn' (was Template_01_)

fix development build

20f21b0

TemplatesContext requires templates export in development mode

Fix build errors

9f777ab

Fix module path in TemplatesContext.tsx and restore package-lock.json metadata.

Swap Recent and Templates order on home page

f3b6fa4

Display Recent files section above Templates section on the home page. Visual reordering only, there is no functional changes to either section

Move Templates tooltip to question mark icon

e6ba9d2

- Add QuestionMarkIcon import to PageRecent component - Tooltip now appears when hover over the icon instead of the header - Text updated

Fix placeholder icon display in GraphGridItem

a63aae0

Fix placeholder icons in GraphGridItem to match CustomNameCellRenderer pattern

johnpierson requested a review from Copilot March 20, 2026 13:44

Copilot started reviewing on behalf of johnpierson March 20, 2026 13:44 View session

Copilot AI reviewed Mar 20, 2026

View reviewed changes

jasonstratton requested changes Mar 25, 2026

View reviewed changes

Chloepeg and others added 4 commits March 27, 2026 14:54

Update src/components/Common/Tooltip.tsx

8b76639

Remove unused arrowDirection from Tooltip Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Merge branch 'DYN-10225-Add-Default-Placeholder-Images-in-Dynamo-App-…

8601eda

…Home' of https://github.com/Chloepeg/DynamoHome into DYN-10225-Add-Default-Placeholder-Images-in-Dynamo-App-Home

johnpierson requested a review from jasonstratton March 30, 2026 13:59

jasonstratton approved these changes Mar 30, 2026

View reviewed changes

jasonstratton merged commit 2adc45b into DynamoDS:master Mar 30, 2026
10 checks passed

zeusongit mentioned this pull request Mar 30, 2026

DYN-10105: Update DynamoHome version to 1.0.27 DynamoDS/Dynamo#16984

Merged

3 tasks

zeusongit added a commit that referenced this pull request Apr 2, 2026

Revert "Dyn 10225 add default placeholder images in dynamo app home (#71

da1f10a

)" This reverts commit 2adc45b.

zeusongit added a commit that referenced this pull request Apr 2, 2026

Revert "Dyn 10225 add default placeholder images in dynamo app home (#71

15543b1

)" This reverts commit 2adc45b.

johnpierson pushed a commit that referenced this pull request Apr 2, 2026

Revert "Dyn 10225 add default placeholder images in dynamo app home (#71

4b1af50

)" (#79) This reverts commit 2adc45b.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dyn 10225 add default placeholder images in dynamo app home#71

Dyn 10225 add default placeholder images in dynamo app home#71
jasonstratton merged 17 commits into
DynamoDS:masterfrom
Chloepeg:DYN-10225-Add-Default-Placeholder-Images-in-Dynamo-App-Home

Chloepeg commented Mar 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jasonstratton left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	filename: 'assets/[name][ext]',
	filename: 'assets/[name].[contenthash][ext]',

Conversation

Chloepeg commented Mar 17, 2026

Purpose

Declarations

Reviewers

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jasonstratton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants