upgrade and many updates to db connections!

Author: Chenglong-MS

package.json

@@ -4,11 +4,11 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
         "@fontsource/roboto": "^4.5.5",
         "@mui/icons-material": "^5.14.0",
-        "@mui/material": "^5.6.0",
+        "@mui/material": "^7.0.2",
         "@reduxjs/toolkit": "^1.8.6",
         "@types/dompurify": "^3.0.5",
         "@types/validator": "^13.12.2",

src/app/App.tsx

@@ -13,7 +13,7 @@ import {
     getSessionId,
 } from './dfSlice'
 
-import blue from '@mui/material/colors/blue';
+import { red, purple, blue, brown, yellow, orange, } from '@mui/material/colors';
 
 import _ from 'lodash';
 
@@ -559,11 +559,14 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
             primary: {
                 main: blue[700]
             },
+            secondary: {
+                main: purple[700]
+            },
             derived: {
-                main: "rgb(255,215,0)", // gold
+                main: yellow[700], 
             },
             custom: {
-                main: "rgb(255, 160, 122)", //lightsalmon
+                main: orange[700], //lightsalmon
             },
             warning: {
                 main: '#bf5600', // New accessible color, original (#ed6c02) has insufficient color contrast of 3.11

src/app/dfSlice.tsx

@@ -71,6 +71,8 @@ export interface DataFormulatorState {
         defaultChartWidth: number;
         defaultChartHeight: number;
     }   
+
+    dataLoaderConnectParams: Record<string, Record<string, string>>; // {table_name: {param_name: param_value}}
 }
 
 // Define the initial state using that type
@@ -108,7 +110,9 @@ const initialState: DataFormulatorState = {
         maxRepairAttempts: 1,
         defaultChartWidth: 300,
         defaultChartHeight: 300,
-    }
+    },
+
+    dataLoaderConnectParams: {}
 }
 
 let getUnrefedDerivedTableIds = (state: DataFormulatorState) => {
@@ -278,6 +282,8 @@ export const dataFormulatorSlice = createSlice({
             state.chartSynthesisInProgress = [];
 
             state.config = initialState.config;
+            
+            //state.dataLoaderConnectParams = initialState.dataLoaderConnectParams;
         },
         loadState: (state, action: PayloadAction<any>) => {
 
@@ -305,6 +311,8 @@ export const dataFormulatorSlice = createSlice({
             state.chartSynthesisInProgress = [];
 
             state.config = savedState.config;
+
+            state.dataLoaderConnectParams = savedState.dataLoaderConnectParams || {};
         },
         setConfig: (state, action: PayloadAction<{
             formulateTimeoutSeconds: number, maxRepairAttempts: number, 
@@ -730,6 +738,24 @@ export const dataFormulatorSlice = createSlice({
         setSessionId: (state, action: PayloadAction<string>) => {
             state.sessionId = action.payload;
         },
+        updateDataLoaderConnectParams: (state, action: PayloadAction<{dataLoaderType: string, params: Record<string, string>}>) => {
+            let dataLoaderType = action.payload.dataLoaderType;
+            let params = action.payload.params;
+            state.dataLoaderConnectParams[dataLoaderType] = params;
+        },
+        updateDataLoaderConnectParam: (state, action: PayloadAction<{dataLoaderType: string, paramName: string, paramValue: string}>) => {
+            let dataLoaderType = action.payload.dataLoaderType;
+            if (!state.dataLoaderConnectParams[dataLoaderType]) {
+                state.dataLoaderConnectParams[dataLoaderType] = {};
+            }
+            let paramName = action.payload.paramName;
+            let paramValue = action.payload.paramValue;
+            state.dataLoaderConnectParams[dataLoaderType][paramName] = paramValue;
+        },
+        deleteDataLoaderConnectParams: (state, action: PayloadAction<string>) => {
+            let dataLoaderType = action.payload;
+            delete state.dataLoaderConnectParams[dataLoaderType];
+        }
     },
     extraReducers: (builder) => {
         builder

src/scss/ConceptShelf.scss

@@ -214,75 +214,6 @@
     }
 }
 
-.info-panel-table {
-    .info-panel-table-cell {
-        padding: 0px 1px 0px 1px;
-        .example-textfield {
-            display: flex;
-        }
-    }
-
-    .info-panel-table-index-column {
-        width: fit-content;
-        padding: 0px;
-        color: darkgray;
-        font-size: smaller;
-        font-style: italic;
-
-    }
-
-    .info-panel-table-header {
-        
-        .info-panel-table-header-cell {
-            padding: 0px 1px 0px 1px;
-            max-width: 240px;
-
-            .info-panel-table-header-container {
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                height: auto;
-                padding: 2px 4px;
-                position: relative;
-
-            }
-
-            .info-panel-table-header-container.row-index {
-                background-color: white;
-                border-bottom: 2px solid lightgray;
-            }
-            .info-panel-table-header-container.custom {
-                background-color: #fff9f8;
-                border-bottom: 2px solid #ffb395;
-            }
-            .info-panel-table-header-container.original {
-                background-color: rgb(237, 247, 252);
-                border-bottom: 2px solid #0288d1;
-            }
-
-            .info-panel-table-header-title {
-                margin: auto;
-                margin-left: 3px;
-                display: flex;
-                align-items: center;
-            }
-
-            .info-panel-table-header-name {
-                font-size: inherit;
-                margin-left: 3px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                flex-shrink: 1;
-                font-style: italic;
-                color: #333;
-            }
-        }
-
-        
-    }
-}
-
 @keyframes color {
     0%   { background: white; }
     50% { background: rgb(237, 247, 252); }

src/scss/VisualizationView.scss

@@ -219,10 +219,6 @@ $accelerate-ease: cubic-bezier(0.4, 0.0, 1, 1);
         animation: appear 0.5s ease-out
     }
 
-    .selected-card {
-        //box-shadow: 2px 2px 4px lightslategray;
-        border: 2px solid rgb(25, 118, 210);
-    }
 
     .vega-thumbnail {