Survey Enhancement: Matrix Multiplication Details & Response Download (#45)

* update survey of GEMM about matrix dimensions.

* update the survey that after submission, user can either download PDF or print the answers

Author: brunowu

app/globals.css

@@ -146,3 +146,50 @@ body {
     border-color: #3b82f6 !important;
   }
 }
+
+/* Print styles for survey response summary */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+  
+  .print-break {
+    page-break-before: always;
+  }
+  
+  .print-avoid-break {
+    page-break-inside: avoid;
+  }
+  
+  body {
+    font-size: 12px;
+    line-height: 1.4;
+  }
+  
+  .survey-summary {
+    color: #000 !important;
+    background: #fff !important;
+  }
+  
+  .survey-summary h1,
+  .survey-summary h2,
+  .survey-summary h3 {
+    color: #000 !important;
+  }
+  
+  .survey-summary .bg-blue-50,
+  .survey-summary .bg-green-50,
+  .survey-summary .bg-gray-50 {
+    background: #f8f9fa !important;
+    border: 1px solid #dee2e6 !important;
+  }
+  
+  .survey-summary button {
+    display: none !important;
+  }
+  
+  .survey-summary .shadow-lg,
+  .survey-summary .shadow-xl {
+    box-shadow: none !important;
+  }
+}

app/survey/matrix-multiplication-data.ts

@@ -117,7 +117,7 @@ export const matrixMultiplicationData: SurveySection[] = [
                 id: 'gemm-matrix-size',
                 title: 'Matrix Size Range',
                 type: 'checkbox',
-                content: 'What are your typical matrix dimensions?',
+                content: 'What are your typical maximum matrix dimensions? (Please consider the largest dimension across m, n, k in C = A×B where A is m×k and B is k×n)',
                 options: [
                   'Small (< 100)',
                   'Medium (100 - 1,000)',
@@ -126,6 +126,22 @@ export const matrixMultiplicationData: SurveySection[] = [
                   'Extreme (> 100,000)'
                 ]
               },
+              {
+                id: 'gemm-matrix-shape',
+                title: 'Typical Matrix Shapes',
+                type: 'checkbox',
+                content: 'What are the typical shapes of your matrices in multiplication operations? Select all that apply:',
+                options: [
+                  'Square matrices (m ≈ n ≈ k)',
+                  'Tall-skinny matrices (m >> k, n small)',
+                  'Wide-short matrices (m small, n >> k)',
+                  'Block-outer product (k small, m and n large)',
+                  'Block-inner product (m and n small, k large)',
+                  'General rectangular (no dominant pattern)',
+                  'Varies significantly by operation',
+                  'Other (please specify):'
+                ]
+              },
               {
                 id: 'gemm-batch-size',
                 title: 'Batch Size',

app/survey/nla-app-sim/page.tsx

@@ -3,6 +3,8 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { surveyData, SurveyQuestion } from '../index';
 import { supabase } from '@/lib/supabase';
+import SurveyResponseSummary from '@/components/SurveyResponseSummary';
+import { generateSurveyPDF } from '@/lib/pdfGenerator';
 
 interface FormData {
   [key: string]: string | string[] | boolean;
@@ -806,38 +808,35 @@ export default function NlaAppSimSurveyPage() {
     );
   };
 
+  const handleDownloadPDF = () => {
+    try {
+      generateSurveyPDF(formData, surveyData);
+    } catch (error) {
+      console.error('Error generating PDF:', error);
+      alert('Error generating PDF. Please try again.');
+    }
+  };
+
+
+  const handlePrint = () => {
+    window.print();
+  };
+
+  const handleSubmitAnother = () => {
+    setSubmitted(false);
+    setFormData({});
+    setCompletedSections(new Set());
+    setCollapsedSections(new Set(surveyData.map(section => section.id)));
+  };
+
   if (submitted) {
     return (
-      <div className="min-h-screen bg-gray-50 py-12">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="bg-white rounded-lg shadow-lg p-8 text-center">
-            <div className="text-green-600 mb-4">
-              <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-4">Thank You!</h1>
-            <p className="text-gray-600 mb-6">
-              Your survey response has been submitted successfully. We appreciate your input for our NLA operations and benchmarking preparation!
-            </p>
-            {formData['multiple-use-cases'] === 'Yes, multiple distinct use cases' && 
-              formData['total-use-cases'] !== 'Just this one' && (
-              <p className="text-blue-600 mb-6">
-                You indicated that you have multiple use cases. Please feel free to submit another response for a different use case of your library.
-              </p>
-            )}
-            <button
-              onClick={() => {
-                setSubmitted(false);
-                setFormData({});
-              }}
-              className="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors"
-            >
-              Submit Another Response
-            </button>
-          </div>
-        </div>
-      </div>
+      <SurveyResponseSummary
+        formData={formData}
+        onDownloadPDF={handleDownloadPDF}
+        onPrint={handlePrint}
+        onSubmitAnother={handleSubmitAnother}
+      />
     );
   }