Refactor Notebook.js to enhance Spark app ID handling and session man…

…agement

- Updated the Notebook component to reset sparkAppId when switching notebooks and immediately fetch the associated Spark app.
- Improved error handling during the Spark app fetch process, logging any failures for better debugging.
- Streamlined the useEffect hook to ensure proper state management and clarity in the notebook's functionality.

webapp/src/components/notebook/Notebook.js

@@ -61,7 +61,7 @@ const Notebook = forwardRef(({
                 isExecuted: cell.cell_type === 'code' ? false : cell.cell_type === 'markdown' ? true : cell.isExecuted,
                 lastExecutionResult: cell.lastExecutionResult === null? null : cell.lastExecutionResult, 
                 lastExecutionTime: cell.lastExecutionTime === null? null : cell.lastExecutionTime
-              }));
+            }));
             setNotebookState({
                 ...notebook,
                 content: {
@@ -70,12 +70,24 @@ const Notebook = forwardRef(({
                 }
             });
             setCurrentName(notebook.name);
+
+            // Reset sparkAppId when switching notebooks, but immediately fetch the associated Spark app
+            setSparkAppId(null);
+            SparkModel.getSparkAppByNotebookPath(notebook.path)
+                .then(sparkApp => {
+                    if (sparkApp && sparkApp.spark_app_id) {
+                        setSparkAppId(sparkApp.spark_app_id);
+                    }
+                })
+                .catch(error => {
+                    console.error('Failed to fetch Spark app:', error);
+                });
         }
+
         SessionModel.getSession(notebook.path)
             .then((kernelId) => {
                 setKernelId(kernelId);
             });
-        setSparkAppId(null);
     }, [notebook]);
 
     const clearOutputs = () => {