Improvements to GUI

- Changed icon set to MUI/Google Material Icons (replaced all icons)
- Modules only highlighted when in modules settings/sync settings
- Removed LoginDialog and replaced with StartScreen
- Opening module list when layout is empty (all modules removed)
- Added optional description to modules and added info dialog to modules list items

frontend/package.json

@@ -16,8 +16,8 @@
     },
     "dependencies": {
         "@headlessui/react": "^1.7.8",
-        "@heroicons/react": "^2.0.14",
         "@mui/base": "^5.0.0-beta.3",
+        "@mui/icons-material": "^5.14.9",
         "@tanstack/react-query": "^4.24.10",
         "@tanstack/react-query-devtools": "^4.24.12",
         "@webviz/subsurface-viewer": "^0.0.2-alpha.9",

frontend/src/App.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { DrawerContent, LayoutElement, Workbench } from "@framework/Workbench";
-import { LoginDialog } from "@framework/internal/components/LoginDialog";
 import { NavBar } from "@framework/internal/components/NavBar";
 import { SettingsContentPanels } from "@framework/internal/components/SettingsContentPanels";
 import { useQueryClient } from "@tanstack/react-query";
@@ -41,13 +40,10 @@ function App() {
     }, []);
 
     return (
-        <>
-            <LoginDialog />
-            <div className="h-screen flex flex-row">
-                <NavBar workbench={workbench.current} />
-                <SettingsContentPanels workbench={workbench.current} />
-            </div>
-        </>
+        <div className="h-screen flex flex-row">
+            <NavBar workbench={workbench.current} />
+            <SettingsContentPanels workbench={workbench.current} />
+        </div>
     );
 }
 

frontend/src/GlobalErrorBoundary.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import { BugAntIcon, Square2StackIcon } from "@heroicons/react/20/solid";
 import { Button } from "@lib/components/Button";
 import { IconButton } from "@lib/components/IconButton";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { BugReport, ContentCopy } from "@mui/icons-material";
 
 type Props = {
     children?: React.ReactNode;
@@ -68,7 +68,7 @@ export class GlobalErrorBoundary extends React.Component<Props, State> {
                                         {freshStartUrl.toString()}
                                     </a>
                                     <IconButton onClick={copyToClipboard} title="Copy URL to clipboard">
-                                        <Square2StackIcon className="w-4 h-4" />
+                                        <ContentCopy fontSize="small" />
                                     </IconButton>
                                 </div>
                                 <div
@@ -91,7 +91,7 @@ export class GlobalErrorBoundary extends React.Component<Props, State> {
                                         this.state.error?.stack ?? ""
                                     )
                                 }
-                                startIcon={<BugAntIcon className="w-4 h-4" />}
+                                startIcon={<BugReport fontSize="small" />}
                             >
                                 Report issue
                             </Button>

frontend/src/framework/Module.tsx

@@ -44,13 +44,15 @@ export class Module<StateType extends StateBaseType> {
     private _syncableSettingKeys: SyncSettingKey[];
     private _channelsDef: BroadcastChannelsDef;
     private _drawPreviewFunc: DrawPreviewFunc | null;
+    private _description: string | null;
 
     constructor(
         name: string,
         defaultTitle: string,
         syncableSettingKeys: SyncSettingKey[] = [],
         broadcastChannelsDef: BroadcastChannelsDef = {},
-        drawPreviewFunc: DrawPreviewFunc | null = null
+        drawPreviewFunc: DrawPreviewFunc | null = null,
+        description: string | null = null
     ) {
         this._name = name;
         this._defaultTitle = defaultTitle;
@@ -63,6 +65,7 @@ export class Module<StateType extends StateBaseType> {
         this._syncableSettingKeys = syncableSettingKeys;
         this._channelsDef = broadcastChannelsDef;
         this._drawPreviewFunc = drawPreviewFunc;
+        this._description = description;
     }
 
     getDrawPreviewFunc(): DrawPreviewFunc | null {
@@ -73,14 +76,18 @@ export class Module<StateType extends StateBaseType> {
         return this._importState;
     }
 
-    getName() {
+    getName(): string {
         return this._name;
     }
 
-    getDefaultTitle() {
+    getDefaultTitle(): string {
         return this._defaultTitle;
     }
 
+    getDescription(): string | null {
+        return this._description;
+    }
+
     setWorkbench(workbench: Workbench): void {
         this._workbench = workbench;
     }
@@ -99,14 +106,11 @@ export class Module<StateType extends StateBaseType> {
         return this._syncableSettingKeys;
     }
 
-
     hasSyncableSettingKey(key: SyncSettingKey): boolean {
         return this._syncableSettingKeys.includes(key);
     }
 
-
     makeInstance(instanceNumber: number): ModuleInstance<StateType> {
-
         if (!this._workbench) {
             throw new Error("Module must be added to a workbench before making an instance");
         }

frontend/src/framework/ModuleRegistry.ts

@@ -10,6 +10,7 @@ export type RegisterModuleOptions = {
     syncableSettingKeys?: SyncSettingKey[];
     broadcastChannelsDef?: BroadcastChannelsDef;
     preview?: DrawPreviewFunc;
+    description?: string;
 };
 
 export class ModuleRegistry {
@@ -26,7 +27,8 @@ export class ModuleRegistry {
             options.defaultTitle,
             options.syncableSettingKeys,
             options.broadcastChannelsDef,
-            options.preview || null
+            options.preview ?? null,
+            options.description ?? null
         );
         this._registeredModules[options.moduleName] = module;
         return module;

frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/crashView.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { ArrowPathIcon, DocumentMagnifyingGlassIcon, FaceFrownIcon, MegaphoneIcon } from "@heroicons/react/20/solid";
 import { Button } from "@lib/components/Button";
 import { Dialog } from "@lib/components/Dialog";
+import { BugReport, Info, MoodBad, Refresh } from "@mui/icons-material";
 
 export type FormattedErrorProps = {
     moduleName: string;
@@ -79,24 +79,20 @@ export const CrashView: React.FC<FormattedErrorProps> = (props) => {
     return (
         <div className="flex flex-col h-full w-full">
             <div className="bg-red-400 flex flex-col justify-center items-center h-[50%] text-white gap-4">
-                <FaceFrownIcon className="h-16 w-16" />
+                <MoodBad fontSize="small" />
                 <div className="font-bold text-center">{props.error.message}</div>
             </div>
             <div className="flex flex-col items-center h-[50%] gap-6 p-8">
                 The above error made your module instance crash. Unfortunately, this means that its state is lost. You
                 can try to reset the instance to its initial state in order to start over.
                 <div className="flex gap-4">
-                    <Button
-                        onClick={handleReload}
-                        variant="contained"
-                        startIcon={<ArrowPathIcon className="w-4 h-4" />}
-                    >
+                    <Button onClick={handleReload} variant="contained" startIcon={<Refresh fontSize="small" />}>
                         Reset to initial state
                     </Button>
-                    <Button onClick={handleShowDetails} startIcon={<DocumentMagnifyingGlassIcon className="w-4 h-4" />}>
+                    <Button onClick={handleShowDetails} startIcon={<Info fontSize="small" />}>
                         Show error details
                     </Button>
-                    <Button onClick={handleReportError} startIcon={<MegaphoneIcon className="w-4 h-4" />}>
+                    <Button onClick={handleReportError} startIcon={<BugReport fontSize="small" />}>
                         Report error
                     </Button>
                 </div>

frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 import { ModuleInstance } from "@framework/ModuleInstance";
 import { SyncSettingKey, SyncSettingsMeta } from "@framework/SyncSettings";
-import { XMarkIcon } from "@heroicons/react/20/solid";
 import { isDevMode } from "@lib/utils/devMode";
+import { Close } from "@mui/icons-material";
 
 export type HeaderProps = {
     moduleInstance: ModuleInstance<any>;
@@ -75,7 +75,7 @@ export const Header: React.FC<HeaderProps> = (props) => {
                 onPointerDown={props.onRemoveClick}
                 title="Remove this module"
             >
-                <XMarkIcon className="w-4 h-4" />
+                <Close className="w-4 h-4" />
             </div>
         </div>
     );

frontend/src/framework/internal/components/Content/private-components/ViewWrapper/viewWrapper.tsx

@@ -92,6 +92,8 @@ export const ViewWrapper: React.FC<ViewWrapperProps> = (props) => {
         handleModuleClick();
     }
 
+    const showAsActive = props.isActive && [DrawerContent.ModuleSettings, DrawerContent.SyncSettings].includes(drawerContent);
+
     return (
         <>
             {props.isDragged && (
@@ -111,7 +113,7 @@ export const ViewWrapper: React.FC<ViewWrapperProps> = (props) => {
             >
                 <div
                     className={`bg-white h-full w-full flex flex-col ${
-                        props.isActive ? "border-blue-500" : ""
+                        showAsActive && drawerContent ? "border-blue-500" : ""
                     } border-solid border-2 box-border shadow ${
                         props.isDragged ? "cursor-grabbing select-none" : "cursor-grab"
                     }}`}

frontend/src/framework/internal/components/Drawer/drawer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import { Input } from "@lib/components/Input";
+import { Search } from "@mui/icons-material";
 
 export type DrawerProps = {
     title: string;
@@ -17,15 +17,15 @@ export const Drawer: React.FC<DrawerProps> = (props) => {
     return (
         <div className={`flex flex-col bg-white min-h-0 h-full${props.visible ? "" : " hidden"}`}>
             <div className="flex justify-center items-center p-2 bg-slate-100 h-10">
-                {props.icon && React.cloneElement(props.icon, { className: "w-5 h-5 mr-2" })}
+                {props.icon && React.cloneElement(props.icon, { fontSize: "small", className: "mr-2" })}
                 <span className="font-bold flex-grow p-0 text-sm">{props.title}</span>
             </div>
             <div className="flex-grow flex flex-col">
                 {props.showFilter && (
                     <div className="p-2 bg-slate-50">
                         <Input
                             placeholder={props.filterPlaceholder}
-                            startAdornment={<MagnifyingGlassIcon className="w-4 h-4" />}
+                            startAdornment={<Search fontSize="small" />}
                             onChange={props.onFilterChange}
                         />
                     </div>

frontend/src/framework/internal/components/LoginButton/loginButton.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
 import { AuthState, useAuthProvider } from "@framework/internal/providers/AuthProvider";
-import { ArrowLeftOnRectangleIcon, ArrowRightOnRectangleIcon, UserIcon } from "@heroicons/react/20/solid";
 import { CircularProgress } from "@lib/components/CircularProgress";
 import { Menu } from "@lib/components/Menu";
 import { MenuItem } from "@lib/components/MenuItem";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { getTextWidth } from "@lib/utils/textSize";
 import { Dropdown, MenuButton } from "@mui/base";
+import { AccountCircle, Login, Logout } from "@mui/icons-material";
 
 export type LoginButtonProps = {
     className?: string;
@@ -29,9 +29,9 @@ export const LoginButton: React.FC<LoginButtonProps> = (props) => {
 
     function makeIcon() {
         if (authState === AuthState.LoggedIn) {
-            return <UserIcon className="w-5 h-5 mr-1" />;
+            return <AccountCircle fontSize="small" className="mr-1" />;
         } else if (authState === AuthState.NotLoggedIn) {
-            return <ArrowLeftOnRectangleIcon className="w-5 h-5 mr-1" />;
+            return <Login fontSize="small" className=" mr-1" />;
         } else {
             return <CircularProgress size="medium-small" className="mr-1" />;
         }
@@ -81,7 +81,7 @@ export const LoginButton: React.FC<LoginButtonProps> = (props) => {
             </MenuButton>
             <Menu anchorOrigin="bottom-start">
                 <MenuItem onClick={handleLogout}>
-                    <ArrowRightOnRectangleIcon className="w-4 h-4 mr-2" />
+                    <Logout fontSize="small" className="mr-2" />
                     Sign out
                 </MenuItem>
             </Menu>