Merge pull request #389 from AutomatingSciencePipeline/388-remove-str…

…ing-values-from-charts

Fix charts

apps/frontend/app/components/flows/ViewExperiment/Chart.tsx

@@ -60,42 +60,50 @@ const ChartModal: React.FC<ChartModalProps> = ({ onClose, project }) => {
     };
 
     const parseCSV = (data) => {
+        console.log(data);
         const rows = data.trim().split('\n');
-        const headers = rows[0].split(',');
+        const headers = rows[0].split(',') as string[];
+        //Create a dictionary to store the data
+        const dataDict = {} as any;
 
-        const xList = [] as any[];
-        const yLists = [] as any[];
-
-        var xIndex = 0;
+        // Iterate through the rows and put them under the correct header
         for (let i = 0; i < headers.length; i++) {
-            yLists.push([]);
-            if (headers[i] === xAxis) {
-                xIndex = i;
-            }
+            dataDict[headers[i]] = [];
         }
 
-        yLists.splice(xIndex, 1);
-
+        // Iterate through the rows and put them under the correct header
         for (let i = 1; i < rows.length; i++) {
-            const cols = rows[i].split(',');
-            xList.push(cols[xIndex]);
-            for (let j = 0; j < cols.length; j++) {
-                if (j < xIndex) {
-                    yLists[j].push(cols[j]);
-                }
-                else if (j > xIndex) {
-                    yLists[j - 1].push(cols[j]);
+            // Split the row by commas when not inside quotes
+            const row = rows[i].split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
+            for (let j = 0; j < row.length; j++) {
+                const val = row[j].replace(/"/g, '');
+                // If the value is a number, convert it to a number
+                if (!isNaN(val)) {
+                    row[j] = parseFloat(val);
+                    dataDict[headers[j]].push(row[j]);
                 }
             }
         }
 
+        //Remove items with empty arrays
+        for (let i = 0; i < headers.length; i++) {
+            if (dataDict[headers[i]].length == 0) {
+                delete dataDict[headers[i]];
+            }
+        }
+
+        console.log(dataDict);
+        const xIndex = headers.indexOf(xAxis);
+        const xList = headers.includes(xAxis) ? dataDict[xAxis] : dataDict[headers[0]];
+        const yLists = headers.map((header) => dataDict[header]);
         return { headers, xList, yLists, xIndex };
     };
 
+
     const generateColors = (numColors) => {
         const colors = [] as string[];
         for (let i = 0; i < numColors; i++) {
-            const color = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.2)`;
+            const color = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.4)`;
             colors.push(color);
         }
         return colors;
@@ -201,21 +209,19 @@ const ChartModal: React.FC<ChartModalProps> = ({ onClose, project }) => {
             </div>
             <div className='p-4'>
                 <p className="font-bold">X-Axis Column:</p>
-                <fieldset>
+                <select
+                    className="p-2 border rounded-md font-bold"
+                    onChange={(e) => setXAxis(e.target.value)}
+                    name="xaxis"
+                    defaultValue={headers[0]}
+                >
                     {headers.map((header) => (
-                        <div key={header} className="p-1">
-                            <input
-                                type="radio"
-                                id={header}
-                                onChange={() => setXAxis(header)}
-                                name="xaxis"
-                                value={header}
-
-                            />
-                            <label htmlFor={header} className="font-bold pl-2">{header}</label>
-                        </div>
+                        <option key={header} value={header}>
+                            {header}
+                        </option>
                     ))}
-                </fieldset>
+                </select>
+
             </div>
             <button onClick={downloadImage} className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'>
                 Download Image

apps/frontend/app/components/flows/ViewExperiment/ExperimentListing.tsx

@@ -266,14 +266,14 @@ export const ExperimentListing = ({ projectData: projectData, onCopyExperiment,
 							Unfollow Experiment
 						</button>
 				}
-				{/* {project.finished ?
+				{project.finished ?
 				 <button type="button"
 					className='inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 xl:w-full'
 					onClick={openGraphModal}
 				>
 					See Graph
 				</button> : null
-				} */}
+				}
 				{
 					project.creator == session?.user?.id! ?
 						<button