Dyn 9702 template files support

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/assets/home.ts

@@ -61,3 +61,5 @@ export const graphs = [
     Thumbnail: img
   }
 ];
+
+export const templates = graphs;

src/components/Common/Tooltip.tsx

@@ -1,46 +1,81 @@
 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 = 'below', tooltipClassName = '' }: 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
+  const tooltipRef = useRef<HTMLSpanElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (tooltipRef.current && contentRef.current && show) {
+    if (!tooltipRef.current || !contentRef.current || !show) {
+      return;
+    }
+
+    const updatePosition = () => {
+      if (!tooltipRef.current || !contentRef.current) {
+        return;
+      }
+
       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
+      let left: number;
+      let top: number;
+
+      if (positionProp === 'right') {
+        left = targetRect.right + window.scrollX + verticalOffset;
+        top = targetRect.top + window.scrollY + (targetRect.height / 2) - (tooltipRect.height / 2);
+
+        if (left + tooltipRect.width > window.innerWidth + window.scrollX) {
+          left = targetRect.left + window.scrollX - tooltipRect.width - verticalOffset;
+        }
+      } else {
+        left = targetRect.left + window.scrollX + (targetRect.width / 2);
+        top = targetRect.bottom + window.scrollY + verticalOffset;
+
+        if (left + tooltipRect.width / 2 > window.innerWidth + window.scrollX) {
+          left = window.innerWidth + window.scrollX - tooltipRect.width / 2 - 10;
+        }
+
+        if (left - tooltipRect.width / 2 < window.scrollX) {
+          left = window.scrollX + tooltipRect.width / 2 + 10;
+        }
+      }
+
+      if (top < window.scrollY) {
+        top = window.scrollY + 10;
       }
-      // 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
+
+      if (top + tooltipRect.height > window.innerHeight + window.scrollY) {
+        top = window.innerHeight + window.scrollY - tooltipRect.height - 10;
       }
 
       setPosition({
         top: top,
         left: left,
-        position: 'absolute'
+        position: 'absolute',
+        transform: positionProp === 'right' ? 'none' : 'translateX(-50%)'
       });
+    };
+
+    if (window.requestAnimationFrame) {
+      const animationFrame = window.requestAnimationFrame(updatePosition);
+      return () => window.cancelAnimationFrame?.(animationFrame);
     }
-  }, [show, content, verticalOffset]); // Added 'content' to dependencies array
+
+    updatePosition();
+  }, [show, content, verticalOffset, positionProp]);
 
   return (
-    <span className="tooltip-wrapper" 
-      onMouseEnter={() => setShow(true)} 
+    <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' : ''} ${tooltipClassName}`} ref={contentRef} style={position}>
             <div className="tooltip-arrow" />
             <div style={{ whiteSpace: 'pre-line' }}>{content}</div>
           </div>

src/components/Recent/GraphTable.tsx

@@ -13,11 +13,11 @@ export const GraphTable = ({ columns, data, onRowClick }: GraphTable) => {
     }),
     []
   );
-  const { 
-    getTableProps, 
-    getTableBodyProps, 
-    headerGroups, 
-    rows, 
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
     prepareRow,
     resetResizing
   } = useTable(
@@ -27,7 +27,7 @@ export const GraphTable = ({ columns, data, onRowClick }: GraphTable) => {
       defaultColumn
     },
     useFlexLayout,
-    useResizeColumns 
+    useResizeColumns
   );
 
   const handleRowClick = (row:Row) => {
@@ -42,7 +42,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) => (

src/components/Recent/PageRecent.tsx

@@ -5,27 +5,32 @@ import { CustomNameCellRenderer } from './CustomNameCellRenderer';
 import { CustomLocationCellRenderer } from './CustomLocationCellRenderer';
 import { CustomAuthorCellRenderer } from './CustomAuthorCellRenderer';
 import { GraphTable } from './GraphTable';
+import { TemplatesSection } from './TemplatesSection';
 import { GridViewIcon, ListViewIcon } from '../Common/CustomIcons';
 import { openFile, saveHomePageSettings } from '../../functions/utility';
 import { FormattedMessage } from 'react-intl';
 import { Tooltip } from '../Common/Tooltip';
 import { useSettings } from '../SettingsContext';
+import { useTemplates } from '../TemplatesContext';
 
-export const RecentPage = ({ setIsDisabled, recentPageViewMode }: RecentPage) => {    
+export const RecentPage = ({ setIsDisabled, recentPageViewMode }: RecentPage) => {
   const { settings, updateSettings } = useSettings();
-  const [viewMode, setViewMode] = useState(recentPageViewMode); 
+  const templates = useTemplates();
+  const [viewMode, setViewMode] = useState(recentPageViewMode);
+  const [templatesViewMode, setTemplatesViewMode] = useState(settings?.templatesPageViewMode || 'grid');
   const [initialized, setInitialized] = useState<boolean>(false);
+  const [templatesInitialized, setTemplatesInitialized] = useState<boolean>(false);
 
-  // Set a placeholder for the graphs which will be used differently during dev and prod 
+  // Set a placeholder for the graphs which will be used differently during dev and prod
   let initialGraphs = [];
-    
+
   // If we are under development, we will load the graphs from the local asset folder
   if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     initialGraphs = require('../../assets/home').graphs;
   }
 
-  const [graphs, setGraphs] = useState(initialGraphs);    
+  const [graphs, setGraphs] = useState(initialGraphs);
 
   // A method exposed to the backend used to set the graph data coming from Dynamo
   const receiveGraphDataFromDotNet = (jsonData) => {
@@ -50,31 +55,51 @@ export const RecentPage = ({ setIsDisabled, recentPageViewMode }: RecentPage) =>
         delete window.receiveGraphDataFromDotNet;
       }
     };
-  }, []); 
+  }, []);
 
   useEffect(() => {
     // Set the viewMode based on the HomePage preferences
     setViewMode(recentPageViewMode);
-  }, [recentPageViewMode]); 
+  }, [recentPageViewMode]);
+
+  useEffect(() => {
+    // Set the templatesViewMode based on the HomePage preferences
+    if (settings?.templatesPageViewMode) {
+      setTemplatesViewMode(settings.templatesPageViewMode);
+    }
+  }, [settings?.templatesPageViewMode]);
 
   useEffect(() => {
     if (initialized || recentPageViewMode !== viewMode) {
       setInitialized(true);
-      updateSettings({ recentPageViewMode: viewMode });
-
+      const mergedSettings = { ...settings, recentPageViewMode: viewMode };
+      updateSettings(mergedSettings);
+
       // Send settings to Dynamo to save
-      saveHomePageSettings({ ...settings, recentPageViewMode: viewMode });
-    } 
+      saveHomePageSettings(mergedSettings);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [viewMode]);
 
+  useEffect(() => {
+    if (templatesInitialized || (settings?.templatesPageViewMode && settings.templatesPageViewMode !== templatesViewMode)) {
+      setTemplatesInitialized(true);
+      const mergedSettings = { ...settings, templatesPageViewMode: templatesViewMode };
+      updateSettings(mergedSettings);
+
+      // Send settings to Dynamo to save
+      saveHomePageSettings(mergedSettings);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [templatesViewMode]);
+
   // This variable defins the table structure displaying the graphs
   const columns: Column[] = React.useMemo(() => [
     {
       Header: 'Title',
       accessor: 'Caption',
       width: 300,
-      resizable: true, 
+      resizable: true,
       Cell: CustomNameCellRenderer,
     },
     {
@@ -98,15 +123,16 @@ export const RecentPage = ({ setIsDisabled, recentPageViewMode }: RecentPage) =>
 
   // Handles mouse click over each row
   const handleRowClick = (row: Row) => {
-    // freezes the UI   
-    setIsDisabled(true);   
-        
-    const contextData = row.original.ContextData;  
+    // freezes the UI
+    setIsDisabled(true);
+
+    const contextData = row.original.ContextData;
     openFile(contextData);
   };
 
   return(
     <div data-testid="page-recent">
+      {/* Recent Section */}
       <div className='drop-shadow-2xl'>
         <p className='title-paragraph'><FormattedMessage id="title.text.recent"/></p>
       </div>
@@ -133,7 +159,7 @@ export const RecentPage = ({ setIsDisabled, recentPageViewMode }: RecentPage) =>
       <div style={{ marginRight: '20px', paddingBottom: '35px' }}>
         {viewMode === 'list' && (
           <GraphTable columns={columns} data={graphs} onRowClick={handleRowClick}/>
-        )}                
+        )}
         {viewMode === 'grid' && (
           <div className="main-graph-grid" id="graphContainer" data-testid="graph-grid">
             {graphs.map(graph => (
@@ -142,6 +168,15 @@ export const RecentPage = ({ setIsDisabled, recentPageViewMode }: RecentPage) =>
           </div>
         )}
       </div>
+
+      <TemplatesSection
+        columns={columns}
+        templates={templates}
+        templatesViewMode={templatesViewMode}
+        setTemplatesViewMode={setTemplatesViewMode}
+        onRowClick={handleRowClick}
+        setIsDisabled={setIsDisabled}
+      />
     </div>
   );
-};
+};

src/components/Recent/TemplatesSection.module.css

@@ -0,0 +1 @@
+

src/components/Recent/TemplatesSection.tsx

@@ -0,0 +1,80 @@
+import { FormattedMessage } from 'react-intl';
+import { GraphGridItem } from './GraphGridItem';
+import { GraphTable } from './GraphTable';
+import { GridViewIcon, ListViewIcon, QuestionMarkIcon } from '../Common/CustomIcons';
+import { Tooltip } from '../Common/Tooltip';
+
+type TemplateItem = Graph & {
+  Author: string;
+  Description: string;
+};
+
+interface TemplatesSectionProps {
+  columns: Column[];
+  templates: TemplateItem[];
+  templatesViewMode: string;
+  setTemplatesViewMode: (viewMode: string) => void;
+  onRowClick: (row: Row) => void;
+  setIsDisabled: (disable: boolean) => void;
+}
+
+export const TemplatesSection = ({
+  columns,
+  templates,
+  templatesViewMode,
+  setTemplatesViewMode,
+  onRowClick,
+  setIsDisabled,
+}: TemplatesSectionProps) => {
+  return (
+    <>
+      <div className='drop-shadow-2xl' style={{ display: 'flex', alignItems: 'center' }}>
+        <p className='title-paragraph' style={{ display: 'inline-block', width: 'fit-content' }}>
+          <FormattedMessage id="title.text.templates"/>
+        </p>
+        <Tooltip
+          content={<FormattedMessage id="recent.templates.tooltip" />}
+          position="right"
+          tooltipClassName="template-info-tooltip">
+          <QuestionMarkIcon />
+        </Tooltip>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', marginBottom:'10px' }}>
+        <button
+          className={`viewmode-button ${templatesViewMode === 'grid' ? 'active' : ''}`}
+          onClick={() => setTemplatesViewMode('grid')}
+          disabled={templatesViewMode === 'grid'}
+          data-testid="templates-view-toggle-grid">
+          <Tooltip content={<FormattedMessage id="tooltip.text.grid.view.button" />}>
+            <GridViewIcon/>
+          </Tooltip>
+        </button>
+        <button
+          className={`viewmode-button ${templatesViewMode === 'list' ? 'active' : ''}`}
+          onClick={() => setTemplatesViewMode('list')}
+          disabled={templatesViewMode === 'list'}
+          data-testid="templates-view-toggle-list">
+          <Tooltip content={<FormattedMessage id="tooltip.text.list.view.button" />}>
+            <ListViewIcon/>
+          </Tooltip>
+        </button>
+      </div>
+      <div style={{ marginRight: '20px', paddingBottom: '35px' }}>
+        {templatesViewMode === 'list' && (
+          <GraphTable columns={columns} data={templates} onRowClick={onRowClick}/>
+        )}
+        {templatesViewMode === 'grid' && (
+          <div className="main-graph-grid" id="templatesContainer">
+            {templates.map(template => (
+              <GraphGridItem
+                key={template.id}
+                {...template}
+                setIsDisabled={setIsDisabled}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};