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

* Add template files support to New dropdown

- 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 to home page

- 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

* Open templates in a new editable workspace from template sidebar dropdown

- 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

* template data to use React Context

- 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

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

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

* fix development build

TemplatesContext requires templates export in development mode

* Fix build errors

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

* Swap Recent and Templates order on home page

Display Recent files section above Templates section on the home page.

Visual reordering only, there is no functional changes to either section

* Add tooltip to Templates heading

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

* Move Templates tooltip to question mark icon

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

* Adds default placeholder images for template files when thumbnails are 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 icon display in GraphGridItem

Fix placeholder icons in GraphGridItem to match CustomNameCellRenderer pattern

* Update src/components/Common/Tooltip.tsx

Remove unused arrowDirection from Tooltip

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Address PR feedback

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.

* Settings persistence pr comments

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.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Chloepeg

package-lock.json

@@ -4,6 +4,7 @@ import { IntlProvider } from 'react-intl';
 import { getMessagesForLocale } from './localization/localization';
 import { LayoutContainer } from './components/LayoutContainer';
 import { SettingsProvider } from './components/SettingsContext';
+import { TemplatesProvider } from './components/TemplatesContext';
 
 const App = () => {
   const [locale, setLocale] = useState<Locale>("en");
@@ -25,7 +26,9 @@ const App = () => {
   return (
     <IntlProvider locale={locale} messages={messages}>
       <SettingsProvider>
-        <LayoutContainer id='homeContainer' />
+        <TemplatesProvider>
+          <LayoutContainer id='homeContainer' />
+        </TemplatesProvider>
       </SettingsProvider>
     </IntlProvider>
   );

src/App.tsx

@@ -1,46 +1,78 @@
 import { useState, useRef, useEffect, CSSProperties } from 'react';
 import Portal from './Portal'; // Import your Portal component
 
-export const Tooltip = ({ children, content, verticalOffset = 12 }: Tooltip) => {
+export const Tooltip = ({ children, content, verticalOffset = 12, position: positionProp }: Tooltip) => {
     const [show, setShow] = useState<boolean>(false);
     const [position, setPosition] = useState<CSSProperties>({});
     const tooltipRef = useRef(null);
     const contentRef = useRef(null); // Ref for the tooltip content
 
     useEffect(() => {
         if (tooltipRef.current && contentRef.current && show) {
-            const targetRect = tooltipRef.current.getBoundingClientRect();
-            const tooltipRect = contentRef.current.getBoundingClientRect();
-            
-            let left = targetRect.left + window.scrollX + (targetRect.width / 2); // Center align
-            const top = targetRect.bottom + window.scrollY + verticalOffset;
-
-            // Check if the tooltip is going off the right side of the screen
-            if (left + tooltipRect.width > window.innerWidth) {
-                left = window.innerWidth - tooltipRect.width / 2 - 10; // Adjust to keep it on screen
-            }
-            // Check if the tooltip is going off the left side of the screen
-            if (left - tooltipRect.width / 2 < 0) {
-                left += 10; // Adjust to keep it on screen
-            }
-
-            setPosition({
-                top: top,
-                left: left,
-                position: 'absolute'
+            // Use requestAnimationFrame to ensure tooltip is rendered and measured correctly
+            requestAnimationFrame(() => {
+                if (tooltipRef.current && contentRef.current) {
+                    const targetRect = tooltipRef.current.getBoundingClientRect();
+                    const tooltipRect = contentRef.current.getBoundingClientRect();
+                    
+                    let left: number;
+                    let top: number;
+
+                    // If position prop is 'right', position to the right of the element
+                    if (positionProp === 'right') {
+                        left = targetRect.right + window.scrollX + verticalOffset;
+                        top = targetRect.top + window.scrollY + (targetRect.height / 2) - (tooltipRect.height / 2);
+
+                        // Check if the tooltip is going off the right side of the screen
+                        if (left + tooltipRect.width > window.innerWidth + window.scrollX) {
+                            // If it goes off right, position it to the left of the element instead
+                            left = targetRect.left + window.scrollX - tooltipRect.width - verticalOffset;
+                        }
+                    } else {
+                        // Default: position tooltip below the element (centered)
+                        left = targetRect.left + window.scrollX + (targetRect.width / 2);
+                        top = targetRect.bottom + window.scrollY + verticalOffset;
+
+                        // Check if the tooltip is going off the right side of the screen
+                        if (left + tooltipRect.width / 2 > window.innerWidth + window.scrollX) {
+                            left = window.innerWidth + window.scrollX - tooltipRect.width / 2 - 10;
+                        }
+                        // Check if the tooltip is going off the left side of the screen
+                        if (left - tooltipRect.width / 2 < window.scrollX) {
+                            left = window.scrollX + tooltipRect.width / 2 + 10;
+                        }
+                    }
+
+                    // Check if the tooltip is going off the top of the screen
+                    if (top < window.scrollY) {
+                        top = window.scrollY + 10;
+                    }
+                    // Check if the tooltip is going off the bottom of the screen
+                    if (top + tooltipRect.height > window.innerHeight + window.scrollY) {
+                        top = window.innerHeight + window.scrollY - tooltipRect.height - 10;
+                    }
+
+                    setPosition({
+                        top: top,
+                        left: left,
+                        position: 'absolute',
+                        // For default positioning (below), center using transform
+                        transform: positionProp === 'right' ? 'none' : 'translateX(-50%)'
+                    });
+                }
             });
         }
-    }, [show, content, verticalOffset]); // Added 'content' to dependencies array
+    }, [show, content, verticalOffset, positionProp]);
 
     return (
-        <span className="tooltip-wrapper" 
+        <span className="tooltip-wrapper"
              onMouseEnter={() => setShow(true)} 
              onMouseLeave={() => setShow(false)}
              ref={tooltipRef}>
             {children}
             {show && (
               <Portal>
-                <div className={`tooltip-box ${show ? 'show' : ''}`} ref={contentRef} style={position}>
+                <div className={`tooltip-box ${show ? 'show' : ''} ${positionProp === 'right' ? 'arrow-left' : ''}`} ref={contentRef} style={position}>
                     <div className="tooltip-arrow" />
                     <div style={{ whiteSpace: 'pre-line' }}>{content}</div>
                 </div>

src/assets/dyfIcon.png

@@ -3,14 +3,13 @@ import { MainContent } from './MainContent';
 import { Sidebar } from './Sidebar/Sidebar';
 import SplitPane from 'react-split-pane';
 import { useSettings } from './SettingsContext';
-import { saveHomePageSettings } from '../functions/utility';
 
 export const LayoutContainer = ({ id }: { id?: string }) => {
   const defaultMinSize = 250;
   const defaultMaxSize = 500;
   const defaultBarWidth = 300;
 
-  const { settings, updateSettings } = useSettings();
+  const { settings, updateSettings, updateAndSaveSettings } = useSettings();
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [selectedSidebarItem, setSelectedSidebarItem] = useState<SidebarItem>('Recent');
   const [sideBarWidth, setSideBarWidth] = useState<number | null>(null);
@@ -28,8 +27,8 @@ export const LayoutContainer = ({ id }: { id?: string }) => {
   const handleSplitPaneResize = (size: number) => {
     setSideBarWidth(size);
 
-    // Persist the new sidebar width in settings
-    updateSettings({ sideBarWidth: size.toString() });
+    // persist the new sidebar width using latest merged settings.
+    updateAndSaveSettings({ sideBarWidth: size.toString() });
   };
 
   useEffect(() => {
@@ -40,12 +39,6 @@ export const LayoutContainer = ({ id }: { id?: string }) => {
     }
   }, [settings?.sideBarWidth]);
 
-  useEffect(() => {
-    if (sideBarWidth !== null && settings) {
-      saveHomePageSettings({ ...settings, sideBarWidth: sideBarWidth.toString() });
-    }
-  }, [sideBarWidth]);
-
   const setHomePageSettings = (settingsJson: string) => {
     try {
       if (settingsJson) {

src/assets/dynIcon.png

@@ -17,7 +17,11 @@ export const MainContent = ({ selectedSidebarItem, settings, isDisabled, setIsDi
                 )}
 
                 <div className={`page-container ${selectedSidebarItem === 'Recent' ? '' : 'hidden'}`}>
-                    <RecentPage setIsDisabled={setIsDisabled} recentPageViewMode={settings?.recentPageViewMode || "grid"} />
+                    <RecentPage
+                        setIsDisabled={setIsDisabled}
+                        recentPageViewMode={settings?.recentPageViewMode || 'grid'}
+                        templatesPageViewMode={settings?.templatesPageViewMode || 'grid'}
+                    />
                 </div>
                 <div className={`page-container ${selectedSidebarItem === 'Samples' ? '' : 'hidden'}`}>
                     <SamplesPage samplesViewMode={settings?.samplesViewMode || "grid"} />

src/assets/dytIcon.png

@@ -1,7 +1,8 @@
-import { img } from '../../assets/home';
+import { getPlaceholderImage } from '../../functions/placeholder';
 import { Tooltip } from '../Common/Tooltip';
 import styles from './CustomCellRenderer.module.css';
 import cardStyles from '../Common/CardItems.module.css';
+import { img } from '../../assets/home';
 
 
 /**
@@ -10,7 +11,10 @@ import cardStyles from '../Common/CardItems.module.css';
  * @param row - the data associate with this row containing all the information for the graph
  */
 export const CustomNameCellRenderer = ({ value, row }: CellParams) => {
-  const imgSrc = row.original.Thumbnail || img;
+  // Use placeholder if Thumbnail is empty, null, undefined, or the default img
+  const thumbnail = row.original.Thumbnail;
+  const hasCustomThumbnail = thumbnail && thumbnail !== img && thumbnail.trim() !== '';
+  const imgSrc = hasCustomThumbnail ? thumbnail : getPlaceholderImage(row.original.ContextData);
   const description = row.original.Description;
   return (
     <div className={styles["title-cell"]}>