Merge pull request #144 from concord-consortium/187742034-add-data-de…

…letion

feat: Time Series Data Deletion [PT-187742034]

src/shared/components/data-table-field.tsx

@@ -304,6 +304,15 @@ export const DataTableField: React.FC<FieldProps> = props => {
   const handleEditSaveButton = () => setManualEntryMode(!manualEntryMode);
   const handleCollectButton = () => setShowSensor(!showSensor);
 
+  const handleDeleteDataTrial = (rowIdx: number) => {
+    confirm("Delete Trial?\n\nThis will delete the trial.", () => {
+      const newData = formData.slice();
+      newData[rowIdx] = {};
+      setFormData(newData);
+      saveData(newData);
+    });
+  };
+
   const onSensorRecordClick = (rowIdx: number) => {
     if (!sensorOutput.connected) {
       alert("Sensor not connected");
@@ -388,10 +397,11 @@ export const DataTableField: React.FC<FieldProps> = props => {
       }
     });
     const recordingTimeSeries = stopTimeSeriesFnRef.current !== undefined;
-    const rowActive = recordingTimeSeries ? (sensorCanRecord && timeSeriesRecordingRowRef.current === rowIdx) : sensorCanRecord;
+    let rowActive = recordingTimeSeries ? (sensorCanRecord && timeSeriesRecordingRowRef.current === rowIdx) : sensorCanRecord;
     const showStopButton = recordingTimeSeries && timeSeriesRecordingRowRef.current === rowIdx;
-    const iconName: IconName = sensorFieldsBlank ? (isTimeSeries ? "recordDataTrial" : "record") : (isTimeSeries ? (showStopButton ? "stopDataTrial" : "reRecordDataTrial") : "replay");
-    const onClick = rowActive ? (recordingTimeSeries ? onSensorStopTimeSeries.bind(null, formData) : onSensorRecordClick.bind(null, rowIdx)) : null;
+    const iconName: IconName = sensorFieldsBlank ? (isTimeSeries ? "recordDataTrial" : "record") : (isTimeSeries ? (showStopButton ? "stopDataTrial" : "deleteDataTrial") : "replay");
+    const onClick = iconName === "deleteDataTrial" ? handleDeleteDataTrial.bind(null, rowIdx) : (rowActive ? (recordingTimeSeries ? onSensorStopTimeSeries.bind(null, formData) : onSensorRecordClick.bind(null, rowIdx)) : null);
+    rowActive = iconName === "deleteDataTrial" ? true : rowActive;
     const refreshBtnCell = <td key="refreshBtn" className={`${css.refreshSensorReadingColumn} ${css.readOnly}`}>
       {
         anyNonFunctionSensorValues &&

src/shared/components/data-table-sparkgraph.tsx

@@ -41,6 +41,8 @@ export default function DataTableSparkGraph({values, maxNumTimeSeriesValues}: IP
     if (capabilities) {
       const duration = Math.round((capabilities.measurementPeriod / 1000) * values.length);
       titleRef.current = `${duration} sec`;
+    } else {
+      titleRef.current = "";
     }
 
     const minValue = capabilities?.minValue ?? values.reduce((acc, cur) => Math.min(cur.value, acc), Infinity);
@@ -69,7 +71,7 @@ export default function DataTableSparkGraph({values, maxNumTimeSeriesValues}: IP
   }
 
   return (
-    <div title={titleRef.current} className={css.dataTableSparkgraph}>
+    <div className={css.dataTableSparkgraph}>
       <div>{titleRef.current}</div>
       <svg width="100%" height={outerHeight} viewBox={`0 0 ${outerWidth} ${outerHeight}`}>
         {polygonPoints.length > 0 && <polygon points={polygonPoints.join(" ")} />}

src/shared/components/icon.tsx

@@ -20,6 +20,7 @@ import Record from "../icons/record.svg";
 import RecordDataTrial from "../icons/record-data-trial.svg";
 import ReRecordDataTrial from "../icons/re-record-data-trial.svg";
 import StopDataTrial from "../icons/stop-data-trial.svg";
+import DeleteDataTrial from "../icons/delete-data-trial.svg";
 
 const Icons = {
   label: Label,
@@ -43,6 +44,7 @@ const Icons = {
   recordDataTrial: RecordDataTrial,
   reRecordDataTrial: ReRecordDataTrial,
   stopDataTrial: StopDataTrial,
+  deleteDataTrial: DeleteDataTrial
 };
 export type IconName = keyof typeof Icons;