Added wide to narrow instructional video to observation import dialogue

app/src/components/csv/CSVSingleImportDialog.tsx

@@ -16,6 +16,11 @@
   onClose: () => void;
   onImport: (file: File, onProgress: (progressEvent: AxiosProgressEvent) => void) => Promise<void>;
   onDownloadTemplate: () => void;
+  /**
+   * Optional component to display help instructions for the import process
+   * If provided, a help section will be displayed below the CSV upload section
+   */
+  VideoHelp?: React.ComponentType;
 }
 
 /**
@@ -118,6 +123,8 @@
     return null;
   }
 
+  const { VideoHelp } = props;
+
   return (
     <Dialog open={props.open} maxWidth={'xl'} fullScreen={fullScreen}>
       <DialogContent sx={{ mt: 2 }}>
@@ -138,6 +145,9 @@
             />
           </CSVDropzoneSection>
         </Box>
+
+        {/* Display video help component if provided */}
+        {VideoHelp && <VideoHelp />}
       </DialogContent>
       <Divider />
 

app/src/components/dialog/video-help/TransformDataHelp.tsx

@@ -0,0 +1,29 @@
+import { VideoHelpSection, VideoHelpSectionProps } from './VideoHelpSection';
+
+/**
+ * Help content for transforming data from wide to narrow format
+ */
+export const TransformDataHelp = () => {
+  const helpProps: VideoHelpSectionProps = {
+    title: 'How to Transform Your Data from Wide to Narrow Format in Excel',
+    videoUrl: 'https://nrs.objectstore.gov.bc.ca/locsch/resources/Import_PQMP4_2_slow.mp4',
+    steps: [
+      {
+        label: 'Step 1:',
+        text: 'Select your data, navigate to the "Data" tab and choose "From Data/Range", then confirm with "OK".'
+      },
+      {
+        label: 'Step 2:',
+        text: 'Select all columns you want to transform, open the "Transform" tab and select "Unpivot Columns".'
+      },
+      {
+        label: 'Step 3:',
+        text: 'Rename your new columns appropriately, return to the home tab, then select "Close and Load".'
+      }
+    ],
+    collapsedText: 'Need help transforming data from wide to narrow?',
+    expandedText: 'Hide data transformation instructions'
+  };
+
+  return <VideoHelpSection {...helpProps} />;
+};

app/src/components/dialog/video-help/VideoHelpSection.tsx

@@ -0,0 +1,108 @@
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { Box, Stack, Typography } from '@mui/material';
+import { useState } from 'react';
+
+export interface VideoHelpStep {
+  label: string;
+  text: string;
+}
+
+export interface VideoHelpSectionProps {
+  /**
+   * Title of the help section
+   */
+  title: string;
+
+  /**
+   * URL to the video to play
+   */
+  videoUrl: string;
+
+  /**
+   * Array of steps to display
+   */
+  steps: VideoHelpStep[];
+
+  /**
+   * Text to show when collapsed
+   */
+  collapsedText?: string;
+
+  /**
+   * Text to show when expanded
+   */
+  expandedText?: string;
+}
+
+/**
+ * A reusable component for displaying video help instructions
+ */
+export const VideoHelpSection = (props: VideoHelpSectionProps) => {
+  const [showInstructions, setShowInstructions] = useState<boolean>(false);
+
+  const { title, videoUrl, steps, collapsedText = 'Show instructions', expandedText = 'Hide instructions' } = props;
+
+  return (
+    <>
+      <Box
+        onClick={() => setShowInstructions(!showInstructions)}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          my: 2,
+          cursor: 'pointer',
+          color: 'primary.main',
+          '&:hover': {
+            textDecoration: 'underline'
+          }
+        }}>
+        <InfoOutlinedIcon fontSize="small" sx={{ mr: 0.5 }} />
+        <Typography variant="body2" component="span">
+          {showInstructions ? expandedText : collapsedText}
+        </Typography>
+        {showInstructions ? (
+          <KeyboardArrowUpIcon fontSize="small" sx={{ ml: 0.5 }} />
+        ) : (
+          <KeyboardArrowDownIcon fontSize="small" sx={{ ml: 0.5 }} />
+        )}
+      </Box>
+
+      {showInstructions && (
+        <Box sx={{ width: '100%', my: 3 }}>
+          <Stack spacing={2}>
+            <Typography variant="h6" component="h3">
+              {title}
+            </Typography>
+
+            <Box sx={{ pl: 2 }}>
+              {steps.map((step, index) => (
+                <Typography key={index} variant="body1" component="div" sx={{ mb: 1 }}>
+                  <strong>{step.label}</strong> {step.text}
+                </Typography>
+              ))}
+            </Box>
+
+            <Box sx={{ overflow: 'hidden', position: 'relative' }}>
+              <video
+                src={videoUrl}
+                playsInline
+                controls
+                style={{
+                  display: 'block',
+                  width: '100%',
+                  maxWidth: '800px',
+                  height: 'auto',
+                  margin: '0 auto',
+                  border: '1px solid #eee',
+                  objectFit: 'cover'
+                }}
+              />
+            </Box>
+          </Stack>
+        </Box>
+      )}
+    </>
+  );
+};

app/src/components/dialog/video-help/observationsHelp.tsx

@@ -0,0 +1,29 @@
+import { VideoHelpSection, VideoHelpSectionProps } from './VideoHelpSection';
+
+/**
+ * Help content for importing observation data
+ */
+export const ObservationsHelp = () => {
+  const helpProps: VideoHelpSectionProps = {
+    title: 'How to Prepare Observation Data for Import',
+    videoUrl: 'https://nrs.objectstore.gov.bc.ca/locsch/resources/observations_demo.mp4', // Example URL
+    steps: [
+      {
+        label: 'Step 1:',
+        text: 'Ensure your observation data is in the correct format with required columns.'
+      },
+      {
+        label: 'Step 2:',
+        text: 'Each row should represent a single observation with date, location, and measurement values.'
+      },
+      {
+        label: 'Step 3:',
+        text: 'Use the template to ensure all required fields are included.'
+      }
+    ],
+    collapsedText: 'Need help preparing observation data?',
+    expandedText: 'Hide observation data instructions'
+  };
+
+  return <VideoHelpSection {...helpProps} />;
+};

app/src/features/surveys/observations/components/ImportObservationsButton.tsx

@@ -1,6 +1,7 @@
 import Button, { ButtonProps } from '@mui/material/Button';
 import axios, { AxiosProgressEvent } from 'axios';
 import { CSVSingleImportDialog } from 'components/csv/CSVSingleImportDialog';
+import { TransformDataHelp } from 'components/dialog/video-help/TransformDataHelp';
 import { SurveyContext } from 'contexts/surveyContext';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useContext, useState } from 'react';
@@ -118,6 +119,7 @@
         onClose={() => setOpen(false)}
         onImport={handleImportObservations}
         onDownloadTemplate={() => downloadFile(getObservationCSVTemplate(), 'SIMS-observations-template.csv')}
+        VideoHelp={TransformDataHelp}
       />
     </>
   );