Dyn 10225 add default placeholder images in dynamo app home

src/App.tsx

@@ -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/components/Common/Tooltip.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/components/LayoutContainer.tsx

@@ -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/components/MainContent.tsx

@@ -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/components/Recent/CustomNameCellRenderer.tsx

@@ -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"]}>

src/components/Recent/GraphGridItem.tsx

@@ -1,6 +1,7 @@
-import { img } from '../../assets/home';
+import { getPlaceholderImage } from '../../functions/placeholder';
 import { openFile } from '../../functions/utility';
 import { CardItem } from '../Common/CardItem';
+import { img } from '../../assets/home';
 
 export const GraphGridItem = ({ id, Caption, ContextData, Description, DateModified, Thumbnail, setIsDisabled }: GraphItem) => {
     const handleClick = (e:MouseEvent) => {
@@ -11,9 +12,14 @@ export const GraphGridItem = ({ id, Caption, ContextData, Description, DateModif
         openFile(ContextData);
     };
 
+    // Use placeholder if Thumbnail is empty, null, undefined, or the default img
+    const thumbnail = Thumbnail;
+    const hasCustomThumbnail = thumbnail && thumbnail !== img && thumbnail.trim() !== '';
+    const imageSrc = hasCustomThumbnail ? thumbnail : getPlaceholderImage(ContextData);
+
     return (
         <CardItem 
-            imageSrc={Thumbnail || img} 
+            imageSrc={imageSrc} 
             onClick={handleClick} 
             tooltipContent={
                 <>
@@ -26,4 +32,4 @@ export const GraphGridItem = ({ id, Caption, ContextData, Description, DateModif
             subtitleText={DateModified} 
         />
     );
-}
+};

src/components/Recent/GraphTable.tsx

@@ -41,7 +41,6 @@ export const GraphTable = ({ columns, data, onRowClick }: GraphTable) => {
     <div className={styles['table-container']}>
       <table {...getTableProps()}>
         <thead>
-          {console.log(headerGroups)}
           {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column: any, columnIndex: number) => (