Feature/conversion title (#559)

* provide optional title input in autoconversion form and clear processing data after conversion complete

* add optional title property to ConversionProcessingData type

* fix formatting on optional title label

src/containers/ConversionForm/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { ActionCreator } from "redux";
 import { connect } from "react-redux";
-import { Upload, Select, Divider, Button } from "antd";
+import { Upload, Select, Divider, Button, Input } from "antd";
 import { UploadFile } from "antd/lib/upload";
 import { v4 as uuidv4 } from "uuid";
 import classNames from "classnames";
@@ -17,6 +17,7 @@ import {
     SetConversionEngineAction,
     SetConversionStatusAction,
     CancelConversionAction,
+    SetConversionTitleAction,
 } from "../../state/trajectory/types";
 import { SetErrorAction } from "../../state/viewer/types";
 import {
@@ -36,6 +37,7 @@ import { MAX_CONVERSION_FILE_SIZE } from "../../constants";
 
 interface ConversionProps {
     setConversionEngine: ActionCreator<SetConversionEngineAction>;
+    setConversionTitle: ActionCreator<SetConversionTitleAction>;
     conversionProcessingData: ConversionProcessingData;
     receiveFileToConvert: ActionCreator<ReceiveFileToConvertAction>;
     setError: ActionCreator<SetErrorAction>;
@@ -66,6 +68,7 @@ const selectOptions = Object.keys(AvailableEngines).map(
 
 const ConversionForm = ({
     setConversionEngine,
+    setConversionTitle,
     conversionProcessingData,
     setError,
     receiveFileToConvert,
@@ -240,6 +243,20 @@ const ConversionForm = ({
                         </button>
                     )}
                 </div>
+                {fileToConvert && (
+                    <>
+                        <h3 className={styles.optionalTitle}>
+                            Trajectory title (optional)
+                        </h3>
+                        <Input
+                            className={styles.titleInput}
+                            placeholder="Start typing..."
+                            onChange={(e) => {
+                                setConversionTitle(e.target.value);
+                            }}
+                        ></Input>
+                    </>
+                )}
                 <Divider className={styles.divider} orientation="right" />
                 <Button className="secondary-button" onClick={cancelConversion}>
                     Cancel
@@ -271,6 +288,7 @@ const dispatchToPropsMap = {
     receiveFileToConvert: trajectoryStateBranch.actions.receiveFileToConvert,
     setError: viewerStateBranch.actions.setError,
     setConversionEngine: trajectoryStateBranch.actions.setConversionEngine,
+    setConversionTitle: trajectoryStateBranch.actions.setConversionTitle,
     initializeConversion: trajectoryStateBranch.actions.initializeConversion,
     convertFile: trajectoryStateBranch.actions.convertFile,
     setConversionStatus: trajectoryStateBranch.actions.setConversionStatus,

src/containers/ConversionForm/style.css

@@ -1,6 +1,7 @@
 .container {
     position: absolute;
     background-color: var(--light-theme-bg);
+    color: var(--light-theme-color);
     height: calc(100vh - var(--header-height));
     width: 100%;
     z-index: 1000;
@@ -32,13 +33,13 @@
     margin-bottom: 0px;
 }
 
-.selector-box {
+.selector-box, .title-input {
     margin-right: 20px;
     width: 200px;
 }
 
 /* two parent classes needed here to overide specificity of antd classes */
-.upload-container .selector-box :global(.ant-select-selector) {
+.upload-container .selector-box :global(.ant-select-selector), .title-input {
     border-radius: 3px;
     border: 1px solid var(--light-theme-select-border-color);
 }
@@ -79,6 +80,12 @@
     fill: var(--cancel-icon-color);
 }
 
+.optional-title {
+    font-size: 1.08em;
+    margin-top: 22px;
+    margin-bottom: 0px;
+}
+
 .divider {
     background-color: var(--light-theme-divider);
 }

src/state/trajectory/actions.ts

@@ -19,6 +19,7 @@ import {
     CONVERT_FILE,
     RECEIVE_CONVERTED_FILE,
     CANCEL_CONVERSION,
+    SET_CONVERSION_TITLE,
 } from "./constants";
 import { AvailableEngines } from "./conversion-data-types";
 import {
@@ -40,6 +41,7 @@ import {
     ConvertFileAction,
     ConversionStatus,
     CancelConversionAction,
+    SetConversionTitleAction,
 } from "./types";
 
 export function receiveTrajectory(
@@ -177,6 +179,13 @@ export function setConversionEngine(
     };
 }
 
+export function setConversionTitle(payload: string): SetConversionTitleAction {
+    return {
+        payload,
+        type: SET_CONVERSION_TITLE,
+    };
+}
+
 export function convertFile(payload: { fileId: string }): ConvertFileAction {
     return {
         payload,

src/state/trajectory/constants.ts

@@ -40,3 +40,6 @@ export const RECEIVE_CONVERTED_FILE =
 export const CANCEL_CONVERSION = makeTrajectoryConstant("cancel-conversion");
 
 export const SET_CONVERSION_STATUS = makeTrajectoryConstant("set-status");
+export const SET_CONVERSION_TITLE = makeTrajectoryConstant(
+    "set-conversion-title"
+);

src/state/trajectory/conversion-data-types.ts

@@ -50,4 +50,5 @@ export type ConversionProcessingData = {
     fileName: string;
     engineType: AvailableEngines;
     fileId: string;
+    title?: string;
 };

src/state/trajectory/logics.ts

@@ -553,14 +553,15 @@ const convertFileLogic = createLogic({
     ) {
         const { action, getState } = deps;
 
-        const { engineType, fileToConvert, fileName } =
+        const { engineType, fileToConvert, fileName, title } =
             getConversionProcessingData(getState());
+        const trajectoryTitle = title || fileName;
         const fileContents: Record<string, any> = {
             fileContents: { fileContents: fileToConvert },
-            trajectoryTitle: fileName,
+            trajectoryTitle: trajectoryTitle,
         };
         const controller = getSimulariumController(getState());
-        const providedFileName = action.payload;
+        const backendFileName = action.payload;
         // convert the file
         dispatch(
             setConversionStatus({
@@ -572,7 +573,7 @@ const convertFileLogic = createLogic({
                 netConnectionSettings,
                 fileContents,
                 engineType,
-                providedFileName
+                backendFileName
             )
             .catch((err: Error) => {
                 console.error(err);

src/state/trajectory/reducer.ts

@@ -15,6 +15,7 @@ import {
     SET_CONVERSION_STATUS,
     CONVERT_FILE,
     RECEIVE_CONVERTED_FILE,
+    SET_CONVERSION_TITLE,
 } from "./constants";
 import {
     TrajectoryStateBranch,
@@ -26,6 +27,7 @@ import {
     SetConversionStatusAction,
     ConversionStatus,
     ConvertFileAction,
+    SetConversionTitleAction,
 } from "./types";
 
 export const initialState = {
@@ -50,6 +52,7 @@ export const initialState = {
         fileToConvert: null,
         fileName: "",
         fileId: "",
+        title: "",
     },
 };
 
@@ -133,6 +136,20 @@ const actionToConfigMap: TypeToDescriptionMap = {
             },
         }),
     },
+    [SET_CONVERSION_TITLE]: {
+        accepts: (action: AnyAction): action is SetConversionTitleAction =>
+            action.type === SET_CONVERSION_TITLE,
+        perform: (
+            state: TrajectoryStateBranch,
+            action: SetConversionTitleAction
+        ) => ({
+            ...state,
+            processingData: {
+                ...state.processingData,
+                title: action.payload,
+            },
+        }),
+    },
     [RECEIVE_FILE_TO_CONVERT]: {
         accepts: (action: AnyAction): action is ReceiveFileToConvertAction =>
             action.type === RECEIVE_FILE_TO_CONVERT,
@@ -169,6 +186,7 @@ const actionToConfigMap: TypeToDescriptionMap = {
         perform: (state: TrajectoryStateBranch, action: ReceiveAction) => ({
             ...state,
             simulariumFile: action.payload,
+            processingData: initialState.processingData,
         }),
     },
 };

src/state/trajectory/types.ts

@@ -62,6 +62,11 @@ export interface SetConversionEngineAction {
     type: string;
 }
 
+export interface SetConversionTitleAction {
+    payload: string;
+    type: string;
+}
+
 export interface ConvertFileAction {
     payload: { fileId: string };
     type: string;