Frontend tweaks (#189)

* Show loading spinner when coloring (#120)

* Update npm packages

* Add log for failed docking/tunnel tasks (#168)

* PR suggestions

Author: luk27official

executor-docking/run_task.py

@@ -146,6 +146,10 @@ def execute_directory_task(docking_directory: str, taskId: int):
         logger.log(f"Task {taskId} failed, no structure file found")
         logger.close()
 
+        # copy log file to public directory so it can be accessed via API
+        os.makedirs(os.path.join(docking_directory, str(taskId), "public"), exist_ok=True)
+        shutil.copy(log_filename, os.path.join(docking_directory, str(taskId), "public", "log"))
+
         # update the status file, reload it first to make sure we don't overwrite any changes
         status = _load_json(status_file)
         status["tasks"][taskId]["status"] = Status.FAILED.value
@@ -164,6 +168,10 @@ def execute_directory_task(docking_directory: str, taskId: int):
         logger.log(f"Task {taskId} failed, {str(e)}, {repr(e)}")
         logger.close()
 
+        # copy log file to public directory so it can be accessed via API
+        os.makedirs(os.path.join(docking_directory, str(taskId), "public"), exist_ok=True)
+        shutil.copy(log_filename, os.path.join(docking_directory, str(taskId), "public", "log"))
+
         # update the status file, reload it first to make sure we don't overwrite any changes
         status = _load_json(status_file)
         status["tasks"][taskId]["status"] = Status.FAILED.value

executor-tunnels/run_task.py

@@ -133,6 +133,10 @@ def execute_directory_task(tunnels_directory: str, taskId: int):
         logger.log(f"Task {taskId} failed, no structure file found")
         logger.close()
 
+        # copy log file to public directory so it can be accessed via API
+        os.makedirs(os.path.join(tunnels_directory, str(taskId), "public"), exist_ok=True)
+        shutil.copy(log_filename, os.path.join(tunnels_directory, str(taskId), "public", "log"))
+
         # update the status file, reload it first to make sure we don't overwrite any changes
         status = _load_json(status_file)
         status["tasks"][taskId]["status"] = Status.FAILED.value
@@ -151,6 +155,10 @@ def execute_directory_task(tunnels_directory: str, taskId: int):
         logger.log(f"Task {taskId} failed, {str(e)}, {repr(e)}")
         logger.close()
 
+        # copy log file to public directory so it can be accessed via API
+        os.makedirs(os.path.join(tunnels_directory, str(taskId), "public"), exist_ok=True)
+        shutil.copy(log_filename, os.path.join(tunnels_directory, str(taskId), "public", "log"))
+
         # update the status file, reload it first to make sure we don't overwrite any changes
         status = _load_json(status_file)
         status["tasks"][taskId]["status"] = Status.FAILED.value

frontend/build/webpack.common.js

@@ -25,9 +25,16 @@ module.exports = {
   },
   "resolve": {
     "extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "fullySpecified": false,
   },
   "module": {
     "rules": [
+      {
+        "test": /\.m?js$/,
+        "resolve": {
+          "fullySpecified": false,
+        },
+      },
       {
         "test": /\.[jt]sx?$/,
         "loader": "esbuild-loader",

frontend/client/viewer/application.tsx

@@ -178,9 +178,9 @@ export class Application extends React.Component<ReactApplicationProps, ReactApp
         });
     }
 
-    onPolymerColorChange(value: PolymerColorType) {
+    async onPolymerColorChange(value: PolymerColorType) {
         this.setState({ "polymerColor": value });
-        overPaintPolymer(value, this.props.molstarPlugin, this.state.data, this.state.polymerRepresentations, this.state.predictedPolymerRepresentations, this.state.pocketRepresentations);
+        await overPaintPolymer(value, this.props.molstarPlugin, this.state.data, this.state.polymerRepresentations, this.state.predictedPolymerRepresentations, this.state.pocketRepresentations);
     }
 
     onShowConfidentChange() {
@@ -207,7 +207,7 @@ export class Application extends React.Component<ReactApplicationProps, ReactApp
         //resolve RCSB at first - do it by recoloring the pocket to the default color value
         //currently there is no other way to "remove" one of the pockets without modyfing the others
         const newColor = isVisible ? "#" + this.state.data.pockets[index].color : "#F9F9F9";
-        const track = this.state.pluginRcsb.getBoardData().find(e => e.trackId.indexOf("pocketsTrack") !== -1);
+        const track = this.state.pluginRcsb.getBoardData().find((e: any) => e.trackId.indexOf("pocketsTrack") !== -1);
         if (track) {
             // this shouldn't be any but I couldn't find a way to avoid it
             track.trackData!.filter((e: any) => e.provenanceName === `pocket${index + 1}`).forEach((foundPocket: RcsbFvTrackDataElementInterface) => (foundPocket.color = newColor));

frontend/client/viewer/components/tasks-table.tsx

@@ -220,8 +220,33 @@ export function TasksTable(props: { pocket: PocketData | null, predictionInfo: P
         setOpenConfirmDialogServerTasks(true);
     };
 
+    const handleFailedTaskClick = async (task: ServerTaskLocalStorageData) => {
+        if (task.type === ServerTaskType.Docking) {
+            const hash = await dockingHash(task.pocket.toString(), task.params[0], task.params[1]);
+            const logUrl = `./api/v2/docking/${props.predictionInfo.database}/${props.predictionInfo.id}/${hash}/log`;
+            window.open(logUrl, "_blank");
+        } else if (task.type === ServerTaskType.Tunnels) {
+            const hash = await tunnelsHash(task.pocket.toString());
+            const logUrl = `./api/v2/tunnels/${props.predictionInfo.database}/${props.predictionInfo.id}/${hash}/log`;
+            window.open(logUrl, "_blank");
+        }
+    };
+
     const isUrl = (url: any) => { return typeof url === 'string' && (url.startsWith("http://") || url.startsWith("https://")); };
 
+    const renderTaskStatus = (task: ServerTaskLocalStorageData) => {
+        const linkStyle = { textDecoration: "underline", cursor: "pointer" };
+        
+        switch (task.status) {
+            case "successful":
+                return <span onClick={() => handleResultClick(task)} style={{ color: "blue", ...linkStyle }}>successful</span>;
+            case "failed":
+                return <span onClick={() => handleFailedTaskClick(task)} style={{ color: "red", ...linkStyle }}>failed (view log)</span>;
+            default:
+                return task.status;
+        }
+    };
+
     return (
         <>
             {openConfirmDialogServerTasks && <ConfirmDialog setOpenDialog={setOpenConfirmDialogServerTasks} callback={removeServerTaskFromLocalStorage(serverTaskToDelete!)} task={serverTaskToDelete!} />}
@@ -261,7 +286,7 @@ export function TasksTable(props: { pocket: PocketData | null, predictionInfo: P
                                     <TableCell>{ServerTaskTypeDescriptors[task.type]}</TableCell>
                                     <TableCell>{task.name}</TableCell>
                                     <TableCell>{makeDateMoreReadable(task.created)}</TableCell>
-                                    <TableCell>{task.status === "successful" ? <span onClick={() => handleResultClick(task)} style={{ color: "blue", textDecoration: "underline", cursor: "pointer" }}>successful</span> : task.status}</TableCell>
+                                    <TableCell>{renderTaskStatus(task)}</TableCell>
                                     <TableCell>
                                         <button type="button" className="btn btn-outline-secondary btnIcon" title="Delete task" style={{ "padding": "0.25rem" }} onClick={() => handleServerTaskDeleteRequest(task)}>
                                             <i className="bi bi-trash" style={{ "display": "block", "fontSize": "small" }}></i>

frontend/client/viewer/components/visualization-tool-box.css

@@ -40,3 +40,20 @@
     text-decoration: none;
     color: inherit;
 }
+
+.visualization-toolbox-option-relative {
+    position: relative;
+}
+
+.visualization-toolbox-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.8);
+    pointer-events: none;
+}

frontend/client/viewer/components/visualization-tool-box.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
+import { Box, Button, FormControl, FormHelperText, InputLabel, MenuItem, Select, CircularProgress } from "@mui/material";
 import React from "react";
 
 import "./visualization-tool-box.css";
@@ -16,14 +16,15 @@ export class VisualizationToolBox extends React.Component<{
     polymerColor: PolymerColorType,
     onPolymerViewChange: (polymerView: PolymerViewType) => void,
     onPocketsViewChange: (pocketsView: PocketsViewType) => void,
-    onPolymerColorChange: (polymerColor: PolymerColorType) => void,
+    onPolymerColorChange: (polymerColor: PolymerColorType) => Promise<void>,
     onShowConfidentChange: () => void,
 }, {
     polymerView: PolymerViewType,
     pocketsView: PocketsViewType,
     polymerColor: PolymerColorType,
     is1DViewerVisible: boolean,
-    isShowOnlyPredicted: boolean;
+    isShowOnlyPredicted: boolean,
+    isColoringPolymer: boolean;
 }> {
 
     constructor(props: any) {
@@ -42,7 +43,8 @@ export class VisualizationToolBox extends React.Component<{
             pocketsView: this.props.pocketsView,
             polymerColor: this.props.polymerColor,
             is1DViewerVisible: true,
-            isShowOnlyPredicted: false
+            isShowOnlyPredicted: false,
+            isColoringPolymer: false
         };
     }
 
@@ -81,9 +83,18 @@ export class VisualizationToolBox extends React.Component<{
         this.props.onPocketsViewChange(pocketsView);
     }
 
-    changePolymerColor(polymerColor: PolymerColorType) {
-        this.setState({ polymerColor: polymerColor });
-        this.props.onPolymerColorChange(polymerColor);
+    async changePolymerColor(polymerColor: PolymerColorType) {
+        this.setState({ polymerColor: polymerColor, isColoringPolymer: true }, async () => {
+            try {
+                // Wait for next frame to ensure UI updates
+                await new Promise(resolve => setTimeout(resolve, 0));
+                await this.props.onPolymerColorChange(polymerColor);
+            } catch (error) {
+                console.error("Error changing polymer color:", error);
+            } finally {
+                this.setState({ isColoringPolymer: false });
+            }
+        });
     }
 
     changeShowConfident() {
@@ -138,7 +149,7 @@ export class VisualizationToolBox extends React.Component<{
                         </div>
                     </div>
 
-                    <div className="visualization-toolbox-option">
+                    <div className="visualization-toolbox-option visualization-toolbox-option-relative">
                         <div className="visualization-toolbox-option-description">
                             <FormControl size="small" className="visualization-toolbox-formcontrol">
                                 <Select
@@ -147,6 +158,7 @@ export class VisualizationToolBox extends React.Component<{
                                     value={this.state.polymerColor}
                                     onChange={(event) => this.changePolymerColor(event.target.value as PolymerColorType)}
                                     className="visualization-toolbox-select"
+                                    disabled={this.state.isColoringPolymer}
                                 >
                                     <MenuItem value={PolymerColorType.White}>White</MenuItem>
                                     {this.scoresDataAvailable(this.props.predictionData.structure.scores.conservation) &&
@@ -156,6 +168,11 @@ export class VisualizationToolBox extends React.Component<{
                                 </Select>
                                 <FormHelperText sx={{ textAlign: "center" }}>Polymer coloring</FormHelperText>
                             </FormControl>
+                            {this.state.isColoringPolymer && (
+                                <div className="visualization-toolbox-loading-overlay">
+                                    <CircularProgress size={24} />
+                                </div>
+                            )}
                         </div>
                     </div>
                 </div>