Refactor ControlPanel component for improved readability and remove pointer-events from the dashboard styles

app/src/components/SimulationDashboard/ControlPanel.tsx

@@ -8,19 +8,10 @@ interface ControlPanelProps {
     setShowDataModelPanel: (show: boolean) => void;
 }
 
-const ControlPanel: React.FC<ControlPanelProps> = ({
+const ControlPanel: React.FC<ControlPanelProps> = ({ editMode, setEditMode, addBlock, showDataModelPanel, setShowDataModelPanel }) => {
-    editMode,
-    setEditMode,
-    addBlock,
-    showDataModelPanel,
-    setShowDataModelPanel,
-}) => {
     return (
         <div className="control-panel">
-            <button
+            <button onClick={() => setEditMode(!editMode)} className={`control-button ${editMode ? "edit-mode-active" : ""}`}>
-                onClick={() => setEditMode(!editMode)}
-                className={`control-button ${editMode ? "edit-mode-active" : ""}`}
-            >
                 {editMode ? "Exit Edit Mode" : "Edit Dashboard"}
             </button>
             {editMode && (
@@ -28,10 +19,7 @@ const ControlPanel: React.FC<ControlPanelProps> = ({
                     <button onClick={addBlock} className="control-button primary">
                         Add Block
                     </button>
-                    <button
+                    <button onClick={() => setShowDataModelPanel(!showDataModelPanel)} className="control-button secondary">
-                        onClick={() => setShowDataModelPanel(!showDataModelPanel)}
-                        className="control-button secondary"
-                    >
                         {showDataModelPanel ? "Hide Data Model" : "Show Data Model"}
                     </button>
                 </>

app/src/styles/components/simulationDashboard/_simulationDashBoard.scss

@@ -11,8 +11,6 @@
     top: 0;
     left: 0;
 
-    pointer-events: none;
-
     .control-panel {
         margin-bottom: 20px;
         display: flex;