include session id so we can process data in the python server

Author: Chenglong-MS

.env.template

@@ -1,2 +1,3 @@
 # Provide frontend configuration settings from environment variables
-SHOW_KEYS_ENABLED=true
+SHOW_KEYS_ENABLED=true
+SESSION_ENABLED=true # if true, the session id will be used to track the user's session

py-src/data_formulator/app.py

@@ -10,16 +10,14 @@
 mimetypes.add_type('application/javascript', '.mjs')
 
 import flask
-from flask import Flask, request, send_from_directory, redirect, url_for
+from flask import Flask, request, send_from_directory, redirect, url_for, session
 from flask import stream_with_context, Response
 import html
 import pandas as pd
 
 import webbrowser
 import threading
 
-from flask_cors import CORS
-
 import logging
 
 import json
@@ -40,13 +38,14 @@
 from data_formulator.agents.client_utils import Client
 
 from dotenv import load_dotenv
+import secrets
 
 APP_ROOT = Path(os.path.join(Path(__file__).parent)).absolute()
 
 import os
 
 app = Flask(__name__, static_url_path='', static_folder=os.path.join(APP_ROOT, "dist"))
-CORS(app)
+app.secret_key = secrets.token_hex(16)  # Generate a random secret key for sessions
 
 print(APP_ROOT)
 
@@ -75,7 +74,6 @@
 app.logger.info("Flask specific log") # Web request related logging
 
 
-
 def get_client(model_config):
     for key in model_config:
         model_config[key] = model_config[key].strip()
@@ -540,11 +538,41 @@ def request_code_expl():
         expl = ""
     return expl
 
+@app.route('/get-session-id', methods=['GET'])
+def get_session_id():
+    """Endpoint to get or confirm a session ID from the client"""
+    
+    if not os.getenv("SESSION_ENABLED", "true").lower() == "true":
+        return flask.jsonify({
+            "status": "ok",
+            "session_id": None
+        })
+    
+    # Create session if it doesn't exist
+    if 'session_id' not in session:
+        session['session_id'] = secrets.token_hex(16)
+        session.permanent = True
+        logger.info(f"Created new session: {session['session_id']}")
+    
+    return flask.jsonify({
+        "status": "ok",
+        "session_id": session['session_id']
+    })
+
 @app.route('/app-config', methods=['GET'])
 def get_app_config():
     """Provide frontend configuration settings from environment variables"""
+    
+    # Create session if it doesn't exist
+    if 'session_id' not in session:
+        session['session_id'] = secrets.token_hex(16)
+        session.permanent = True
+        logger.info(f"Created new session: {session['session_id']}")
+    
     config = {
-        "SHOW_KEYS_ENABLED": os.getenv("SHOW_KEYS_ENABLED", "true").lower() == "true"
+        "SHOW_KEYS_ENABLED": os.getenv("SHOW_KEYS_ENABLED", "true").lower() == "true",
+        "SESSION_ENABLED": os.getenv("SESSION_ENABLED", "true").lower() == "true",
+        "SESSION_ID": session['session_id'] if os.getenv("SESSION_ENABLED", "true").lower() == "true" else None
     }
     return flask.jsonify(config)
 

src/app/App.tsx

@@ -10,6 +10,7 @@ import {
     dfActions,
     fetchAvailableModels,
     fetchFieldSemanticType,
+    fetchSessionId
 } from './dfSlice'
 
 import blue from '@mui/material/colors/blue';
@@ -226,6 +227,7 @@ const TableMenu: React.FC = () => {
 const SessionMenu: React.FC = () => {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
+    const sessionId = useSelector((state: DataFormulatorState) => state.sessionId);
 
     return (
         <>
@@ -235,7 +237,7 @@ const SessionMenu: React.FC = () => {
                 endIcon={<KeyboardArrowDownIcon />} 
                 sx={{ textTransform: 'none' }}
             >
-                Session
+                Session {sessionId ? `(${sessionId.substring(0, 8)}...)` : ''}
             </Button>
             <Menu
                 id="session-menu"
@@ -248,6 +250,13 @@ const SessionMenu: React.FC = () => {
                 }}
                 sx={{ '& .MuiMenuItem-root': { padding: 0, margin: 0 } }}
             >
+                {sessionId && (
+                    <MenuItem disabled>
+                        <Typography sx={{ fontSize: 12, color: 'text.secondary', mx: 2 }}>
+                            ID: {sessionId}
+                        </Typography>
+                    </MenuItem>
+                )}
                 <MenuItem onClick={() => {}}>
                     <ExportStateButton />
                 </MenuItem>
@@ -413,6 +422,7 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
     const visViewMode = useSelector((state: DataFormulatorState) => state.visViewMode);
     const config = useSelector((state: DataFormulatorState) => state.config);
     const tables = useSelector((state: DataFormulatorState) => state.tables);
+    const sessionId = useSelector((state: DataFormulatorState) => state.sessionId);
 
     // if the user has logged in
     const [userInfo, setUserInfo] = useState<{ name: string, userId: string } | undefined>(undefined);
@@ -462,6 +472,7 @@ export const AppFC: FC<AppFCProps> = function AppFC(appProps) {
     useEffect(() => {
         document.title = toolName;
         dispatch(fetchAvailableModels());
+        dispatch(fetchSessionId());
     }, []);
 
     let theme = createTheme({

src/app/dfSlice.tsx

@@ -37,7 +37,7 @@ export interface ModelConfig {
 
 // Define a type for the slice state
 export interface DataFormulatorState {
-
+    sessionId: string | undefined;
     models: ModelConfig[];
     selectedModelId: string | undefined;
     testedModels: {id: string, status: 'ok' | 'error' | 'testing' | 'unknown', message: string}[];
@@ -73,7 +73,7 @@ export interface DataFormulatorState {
 
 // Define the initial state using that type
 const initialState: DataFormulatorState = {
-
+    sessionId: undefined,
     models: [],
     selectedModelId: undefined,
     testedModels: [],
@@ -227,6 +227,47 @@ export const fetchAvailableModels = createAsyncThunk(
         return response.json();
     }
 );
+
+// Add this helper function to generate a UUID
+const generateSessionId = () => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, 
+          v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+};
+
+// Create or retrieve a session ID from local storage
+const getOrCreateSessionId = () => {
+  let sessionId = localStorage.getItem('app_session_id');
+  if (!sessionId) {
+    sessionId = generateSessionId();
+    localStorage.setItem('app_session_id', sessionId);
+  }
+  return sessionId;
+};
+
+// Update your fetch function to include the session ID in the request
+export const fetchSessionId = createAsyncThunk(
+  "dataFormulatorSlice/fetchSessionId",
+  async () => {
+    const sessionId = getOrCreateSessionId();
+    
+    const response = await fetch(getUrls().SESSION_ID, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Session-ID': sessionId  // Pass session ID as a custom header
+      }
+    });
+    
+    const data = await response.json();
+    return {
+      ...data,
+      session_id: sessionId  // Ensure we return the session ID
+    };
+  }
+);
 
 export const dataFormulatorSlice = createSlice({
     name: 'dataFormulatorSlice',
@@ -632,7 +673,10 @@ export const dataFormulatorSlice = createSlice({
             } else {
                 state.chartSynthesisInProgress = state.chartSynthesisInProgress.filter(s => s != action.payload.chartId);
             }
-        }
+        },
+        setSessionId: (state, action: PayloadAction<string>) => {
+            state.sessionId = action.payload;
+        },
     },
     extraReducers: (builder) => {
         builder
@@ -686,6 +730,11 @@ export const dataFormulatorSlice = createSlice({
             console.log("fetched codeExpl");
             console.log(action.payload);
         })
+        .addCase(fetchSessionId.fulfilled, (state, action) => {
+            console.log(">>> fetchSessionId <<<")
+            console.log(action.payload)
+            state.sessionId = action.payload.session_id;
+        })
     },
 })
 

src/app/utils.tsx

@@ -20,7 +20,7 @@ export interface PopupConfig {
 }
 
 export const appConfig: AppConfig = {
-    serverUrl:  process.env.NODE_ENV == "production" ? "./" : "http://127.0.0.1:5000/",
+    serverUrl:  process.env.NODE_ENV == "production" ? "./" : "/api",
 };
 
 export function assignAppConfig(config: AppConfig) {
@@ -51,7 +51,9 @@ export function getUrls() {
 
         APP_CONFIG: `${appConfig.serverUrl}/app-config`,
 
-        AUTH_INFO_PREFIX: `${appConfig.serverUrl}/.auth/`
+        AUTH_INFO_PREFIX: `${appConfig.serverUrl}/.auth/`,
+
+        SESSION_ID: `${appConfig.serverUrl}/get-session-id`,
     };
 }
 

vite.config.ts

@@ -19,4 +19,14 @@ export default defineConfig({
       }
     }
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+        // Optional: rewrite paths
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
 });