added advanced parameters to the link sharing

Author: Owlaboy

README.md

@@ -102,10 +102,5 @@ ROS1_ARATH and ROS1A_ORYSJ
 
 
 ## Quick notes
-
-* Leave the charactesr out when too zoomed out
-* Add explanation of the blue line
 * Crash report should tell the user to refresh the page
-* Examples should give better sequences to test
 * Try example should have a link
-* Change example sequences

src/components/alignment/AlignmentGraphWithInfoPanel.tsx

@@ -28,6 +28,9 @@ interface AlignmentGraphWithInfoPanelProps {
   delta?: number;
   accessionA?: string;
   accessionB?: string;
+  gapCost?: number;
+  startGap?: number;
+  costMatrixType?: number;
 }
 
 export const AlignmentGraphWithInfoPanel: React.FC<AlignmentGraphWithInfoPanelProps> = ({
@@ -45,7 +48,10 @@ export const AlignmentGraphWithInfoPanel: React.FC<AlignmentGraphWithInfoPanelPr
   alpha,
   delta,
   accessionA,
-  accessionB
+  accessionB,
+  gapCost: _gapCost,
+  startGap: _startGap,
+  costMatrixType: _costMatrixType
 }) => {
   const [selectedSafetyWindowId, setSelectedSafetyWindowId] = useState<string | null>(null);
   const [hoveredSafetyWindowId, setHoveredSafetyWindowId] = useState<string | null>(null);

src/components/alignment/SafetyWindowsInfoPanel.tsx

@@ -4,6 +4,7 @@ import VisualizationSettingsPanel from './VisualizationSettingsPanel';
 import type { VisualizationSettings } from './VisualizationSettingsPanel';
 import { ShareAndExportPanel } from '../share';
 import type { PointGridPlotRef } from './PointGridPlot';
+import { useSequence } from '../../context/SequenceContext';
 // import AlignmentParamsPanel from './AlignmentParamsPanel';
 import './SafetyWindowsInfoPanel.css';
 import './SequenceAlignmentViewer.css'; // Import for amino acid coloring classes
@@ -79,6 +80,7 @@ export const SafetyWindowsInfoPanel: React.FC<SafetyWindowsInfoPanelProps> = ({
   accessionA,
   accessionB
 }) => {
+  const { state } = useSequence();
   const [copyStatus, setCopyStatus] = useState<{id: string, success: boolean} | null>(null);
   const [internalActiveTab, setInternalActiveTab] = useState<'general-info' | 'safety-windows' | 'unsafe-windows' | 'visualization' | 'path-selection' | 'export'>('general-info');  // Use external active tab if provided, otherwise use internal state
   const activeTab = externalActiveTab !== undefined ? externalActiveTab : internalActiveTab;
@@ -1207,6 +1209,9 @@ export const SafetyWindowsInfoPanel: React.FC<SafetyWindowsInfoPanelProps> = ({
               delta={delta}
               accessionA={accessionA}
               accessionB={accessionB}
+              gapCost={state.params.gapCost}
+              startGap={state.params.startGap}
+              costMatrixType={state.params.costMatrixType}
               canvasRef={canvasRef}
               pointGridRef={pointGridRef}
             />

src/components/sequence/EmeraldInput.tsx

@@ -21,7 +21,7 @@ const EmeraldInput: React.FC<EmeraldInputProps> = ({ onSubmit }) => {
   const { sequences, params, alignmentStatus, fetchStatusA, fetchErrorA, fetchStatusB, fetchErrorB } = state;
 
   // Feedback notifications
-  const { notifySuccess, notifyError, notifyInfo } = useFeedbackNotifications();
+  const { notifySuccess, notifyError, notifyInfo, showError } = useFeedbackNotifications();
 
   // Get validation warnings
   const validationWarnings = getValidationWarnings();
@@ -89,7 +89,26 @@ const EmeraldInput: React.FC<EmeraldInputProps> = ({ onSubmit }) => {
 
         notifySuccess('Alignment Complete', 'Suboptimal alignment graph has been generated successfully');
       } catch (error) {
-        notifyError('Alignment Failed', `Failed to generate alignment: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        
+        // Check if this is a memory-related error
+        if (errorMessage.includes('Memory limit exceeded') || 
+            errorMessage.includes('Cannot enlarge memory') ||
+            errorMessage.includes('out of memory') ||
+            errorMessage.includes('OutOfMemory') ||
+            errorMessage.includes('stack overflow') ||
+            errorMessage.includes('Maximum call stack') ||
+            errorMessage.includes('Aborted') ||
+            errorMessage.includes('RuntimeError') ||
+            errorMessage.includes('memory access out of bounds')) {
+          showError(
+            'Memory Limit Exceeded', 
+            'Your browser has run out of memory processing these sequences. Please refresh the page and try again with shorter sequences.',
+            { duration: 0 } // Don't auto-dismiss memory errors
+          );
+        } else {
+          notifyError('Alignment Failed', `Failed to generate alignment: ${errorMessage}`);
+        }
       }
     } else {
       notifyError('Invalid Input', 'Please check your sequences and parameters before submitting');
@@ -478,7 +497,23 @@ const EmeraldInput: React.FC<EmeraldInputProps> = ({ onSubmit }) => {
 
           {state.alignmentError && (
             <div className="error-message">
-              {state.alignmentError}
+              {/* Check if this is a memory-related error from context */}
+              {(state.alignmentError.includes('Memory limit exceeded') || 
+                state.alignmentError.includes('Cannot enlarge memory') ||
+                state.alignmentError.includes('out of memory') ||
+                state.alignmentError.includes('OutOfMemory') ||
+                state.alignmentError.includes('stack overflow') ||
+                state.alignmentError.includes('Maximum call stack') ||
+                state.alignmentError.includes('Aborted') ||
+                state.alignmentError.includes('RuntimeError') ||
+                state.alignmentError.includes('memory access out of bounds')) ? (
+                <div>
+                  <strong>Memory Limit Exceeded</strong><br />
+                  Your browser has run out of memory processing these sequences. Please refresh the page and try again with shorter sequences.
+                </div>
+              ) : (
+                state.alignmentError
+              )}
             </div>
           )}
         </div>

src/components/sequence/FileUploader.tsx

@@ -174,7 +174,23 @@ export const FileUploader = ({
 
     } catch (err) {
       console.error('Error processing file:', err);
-      alert('Error processing file: ' + err);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      
+      // Check if this is a memory-related error
+      if (errorMessage.includes('Memory limit exceeded') || 
+          errorMessage.includes('Cannot enlarge memory') ||
+          errorMessage.includes('out of memory') ||
+          errorMessage.includes('OutOfMemory') ||
+          errorMessage.includes('stack overflow') ||
+          errorMessage.includes('Maximum call stack') ||
+          errorMessage.includes('Aborted') ||
+          errorMessage.includes('RuntimeError') ||
+          errorMessage.includes('memory access out of bounds') ||
+          errorMessage.includes('unreachable executed')) {
+        alert('Memory Limit Exceeded\n\nYour browser has run out of memory processing these sequences. Please refresh the page and try again with shorter sequences.');
+      } else {
+        alert('Error processing file: ' + errorMessage);
+      }
     } finally {
       setLoading(false);
     }

src/components/share/ShareAndExportPanel.tsx

@@ -12,6 +12,9 @@ interface ShareAndExportPanelProps {
   delta: number;
   accessionA?: string;
   accessionB?: string;
+  gapCost?: number;
+  startGap?: number;
+  costMatrixType?: number;
   // Props for ExportImagePanel
   canvasRef: React.RefObject<HTMLCanvasElement | null>;
   pointGridRef?: React.RefObject<PointGridPlotRef | null>;
@@ -24,6 +27,9 @@ const ShareAndExportPanel: React.FC<ShareAndExportPanelProps> = ({
   delta,
   accessionA,
   accessionB,
+  gapCost,
+  startGap,
+  costMatrixType,
   canvasRef,
   pointGridRef
 }) => {
@@ -42,6 +48,9 @@ const ShareAndExportPanel: React.FC<ShareAndExportPanelProps> = ({
         delta={delta}
         accessionA={accessionA}
         accessionB={accessionB}
+        gapCost={gapCost}
+        startGap={startGap}
+        costMatrixType={costMatrixType}
       />
     </div>
   );

src/components/share/ShareUrlPanel.tsx

@@ -3,13 +3,32 @@ import { generateShareableUrl, isAlignmentShareable, checkBrowserCompatibility }
 import '../shared/Panel.css';
 import './ShareUrlPanel.css';
 
+// Helper function to get cost matrix name
+const getCostMatrixName = (matrixType: number): string => {
+  const names = {
+    0: 'BLOSUM45',
+    1: 'BLOSUM50', 
+    2: 'BLOSUM62',
+    3: 'BLOSUM80',
+    4: 'BLOSUM90',
+    5: 'PAM30',
+    6: 'PAM70',
+    7: 'PAM250',
+    8: 'IDENTITY'
+  };
+  return names[matrixType as keyof typeof names] || 'Unknown';
+};
+
 interface ShareUrlPanelProps {
   descriptorA: string;
   descriptorB: string;
   alpha: number;
   delta: number;
   accessionA?: string;
   accessionB?: string;
+  gapCost?: number;
+  startGap?: number;
+  costMatrixType?: number;
 }
 
 const ShareUrlPanel: React.FC<ShareUrlPanelProps> = ({
@@ -18,7 +37,10 @@ const ShareUrlPanel: React.FC<ShareUrlPanelProps> = ({
   alpha,
   delta,
   accessionA,
-  accessionB
+  accessionB,
+  gapCost,
+  startGap,
+  costMatrixType
 }) => {
   const [isCopied, setIsCopied] = useState(false);
   const [copyError, setCopyError] = useState<string | null>(null);
@@ -41,7 +63,7 @@ const ShareUrlPanel: React.FC<ShareUrlPanelProps> = ({
     return null;
   }
 
-  const shareUrl = generateShareableUrl(descriptorA, descriptorB, alpha, delta, accessionA, accessionB);
+  const shareUrl = generateShareableUrl(descriptorA, descriptorB, alpha, delta, accessionA, accessionB, gapCost, startGap, costMatrixType);
 
   if (!shareUrl) {
     return null;
@@ -123,6 +145,15 @@ const ShareUrlPanel: React.FC<ShareUrlPanelProps> = ({
             <li>UniProt sequences A & B</li>
             <li>Alpha = {alpha}</li>
             <li>Delta = {delta}</li>
+            {gapCost !== undefined && gapCost !== -1 && (
+              <li>Gap Cost = {gapCost}</li>
+            )}
+            {startGap !== undefined && startGap !== -11 && (
+              <li>Start Gap = {startGap}</li>
+            )}
+            {costMatrixType !== undefined && costMatrixType !== 2 && (
+              <li>Cost Matrix = {getCostMatrixName(costMatrixType)}</li>
+            )}
           </ul>
         </div>
       </div>