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

This reverts commit 2adc45b.

Author: zeusongit

package-lock.json

@@ -4,7 +4,6 @@ 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");
@@ -26,9 +25,7 @@ const App = () => {
   return (
     <IntlProvider locale={locale} messages={messages}>
       <SettingsProvider>
-        <TemplatesProvider>
-          <LayoutContainer id='homeContainer' />
-        </TemplatesProvider>
+        <LayoutContainer id='homeContainer' />
       </SettingsProvider>
     </IntlProvider>
   );

src/App.tsx

@@ -1,78 +1,46 @@
 import { useState, useRef, useEffect, CSSProperties } from 'react';
 import Portal from './Portal'; // Import your Portal component
 
-export const Tooltip = ({ children, content, verticalOffset = 12, position: positionProp }: Tooltip) => {
+export const Tooltip = ({ children, content, verticalOffset = 12 }: 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) {
-            // 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%)'
-                    });
-                }
+            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'
             });
         }
-    }, [show, content, verticalOffset, positionProp]);
+    }, [show, content, verticalOffset]); // Added 'content' to dependencies array
 
     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' : ''} ${positionProp === 'right' ? 'arrow-left' : ''}`} ref={contentRef} style={position}>
+                <div className={`tooltip-box ${show ? 'show' : ''}`} ref={contentRef} style={position}>
                     <div className="tooltip-arrow" />
                     <div style={{ whiteSpace: 'pre-line' }}>{content}</div>
                 </div>

src/assets/dyfIcon.png

@@ -3,13 +3,14 @@ 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, updateAndSaveSettings } = useSettings();
+  const { settings, updateSettings } = useSettings();
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [selectedSidebarItem, setSelectedSidebarItem] = useState<SidebarItem>('Recent');
   const [sideBarWidth, setSideBarWidth] = useState<number | null>(null);
@@ -27,8 +28,8 @@ export const LayoutContainer = ({ id }: { id?: string }) => {
   const handleSplitPaneResize = (size: number) => {
     setSideBarWidth(size);
 
-    // persist the new sidebar width using latest merged settings.
-    updateAndSaveSettings({ sideBarWidth: size.toString() });
+    // Persist the new sidebar width in settings
+    updateSettings({ sideBarWidth: size.toString() });
   };
 
   useEffect(() => {
@@ -39,6 +40,12 @@ 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,11 +17,7 @@ export const MainContent = ({ selectedSidebarItem, settings, isDisabled, setIsDi
                 )}
 
                 <div className={`page-container ${selectedSidebarItem === 'Recent' ? '' : 'hidden'}`}>
-                    <RecentPage
-                        setIsDisabled={setIsDisabled}
-                        recentPageViewMode={settings?.recentPageViewMode || 'grid'}
-                        templatesPageViewMode={settings?.templatesPageViewMode || 'grid'}
-                    />
+                    <RecentPage setIsDisabled={setIsDisabled} recentPageViewMode={settings?.recentPageViewMode || "grid"} />
                 </div>
                 <div className={`page-container ${selectedSidebarItem === 'Samples' ? '' : 'hidden'}`}>
                     <SamplesPage samplesViewMode={settings?.samplesViewMode || "grid"} />

src/assets/dytIcon.png

@@ -1,8 +1,7 @@
-import { getPlaceholderImage } from '../../functions/placeholder';
+import { img } from '../../assets/home';
 import { Tooltip } from '../Common/Tooltip';
 import styles from './CustomCellRenderer.module.css';
 import cardStyles from '../Common/CardItems.module.css';
-import { img } from '../../assets/home';
 
 
 /**
@@ -11,10 +10,7 @@ import { img } from '../../assets/home';
  * @param row - the data associate with this row containing all the information for the graph
  */
 export const CustomNameCellRenderer = ({ value, row }: CellParams) => {
-  // 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 imgSrc = row.original.Thumbnail || img;
   const description = row.original.Description;
   return (
     <div className={styles["title-cell"]}>