tab to get started

Author: Chenglong-MS

py-src/data_formulator/agents/agent_data_load.py

@@ -12,7 +12,10 @@
 
 
 SYSTEM_PROMPT = '''You are a data scientist to help user infer data types based off the table provided by the user.
-Given a dataset provided by the user, identify their type and semantic type, and provide a very short summary of the dataset.
+Given a dataset provided by the user, 
+1. identify their type and semantic type
+2. provide a very short summary of the dataset.
+3. provide a list of (5-10) explorative questions that can help users get started with data visualizations.
 
 Types to consider include: string, number, date
 Semantic types to consider include: Location, Year, Month, Day, Date, Time, DateTime, Range, Duration, Name, Percentage, String, Number
@@ -34,7 +37,8 @@
         "field2": {"type": ..., "semantic_type": ..., "sort_order": null}, 
         ...
     },
-    "data summary": ... // a short summary of the data
+    "data summary": ... // a short summary of the data,
+    "explorative_questions": [...], // a list of explorative questions that can help users get started with data visualizations
 }
 ```
 '''
@@ -76,7 +80,13 @@
         "total": {"type": "number", "semantic_type": "Number", "sort_order": null},
         "group": {"type": "string", "semantic_type": "Range", "sort_order": ["<10000", "10000 to 14999", "15000 to 24999", "25000 to 34999", "35000 to 49999", "50000 to 74999", "75000 to 99999", "100000 to 149999", "150000 to 199999", "200000+"]}
     },
-    "data summary": "The dataset contains information about income distribution across different states in the USA. It includes fields for state names, regions, state IDs, percentage of total income, total income, and income groups."
+    "data summary": "The dataset contains information about income distribution across different states in the USA. It includes fields for state names, regions, state IDs, percentage of total income, total income, and income groups.",
+    "explorative_questions": [
+        "What is the average income across different states?",
+        "What is the distribution of income across different regions?",
+        "What is the relationship between income and state ID?",
+        "What is the relationship between income and region?"
+    ]
 }
 ```
 
@@ -121,7 +131,13 @@
             "sort_order": null  
         }  
     },  
-    "data_summary": "This dataset contains weather information for the cities of Seattle and Atlanta. The fields include the date, city name, and temperature readings. The 'Date' field represents dates in a string format, the 'City' field represents city names, and the 'Temperature' field represents temperature values in integer format."  
+    "data_summary": "This dataset contains weather information for the cities of Seattle and Atlanta. The fields include the date, city name, and temperature readings. The 'Date' field represents dates in a string format, the 'City' field represents city names, and the 'Temperature' field represents temperature values in integer format.",
+    "explorative_questions": [
+        "What is the average temperature across different cities?",
+        "What is the distribution of temperature across different dates?",
+        "What is the relationship between temperature and city?",
+        "What is the relationship between temperature and date?"
+    ]
 }```'''
 
 class DataLoadAgent(object):

src/app/dfSlice.tsx

@@ -745,6 +745,11 @@ export const dataFormulatorSlice = createSlice({
                         return field;
                     }
                 })
+
+                if (data["result"][0]["explorative_questions"] && data["result"][0]["explorative_questions"].length > 0) {
+                    let table = state.tables.find(t => t.id == tableId) as DictTable;
+                    table.explorativeQuestions = data["result"][0]["explorative_questions"] as string[];
+                }
             }
         })
         .addCase(fetchAvailableModels.fulfilled, (state, action) => {

src/components/ComponentType.tsx

@@ -76,14 +76,16 @@ export interface DictTable {
         rowCount: number; // total number of rows in the full table
     };
     anchored: boolean; // whether this table is anchored as a persistent table used to derive other tables
+    explorativeQuestions: string[]; // a list of (3-5) explorative questions that can help users get started with data visualizations
 }
 
 export function createDictTable(
     id: string, rows: any[], 
     derive: {code: string, codeExpl: string, source: string[], dialog: any[], 
              trigger: Trigger} | undefined = undefined,
     virtual: {tableId: string, rowCount: number} | undefined = undefined,
-    anchored: boolean = false) : DictTable {
+    anchored: boolean = false,
+    explorativeQuestions: string[] = []) : DictTable {
 
     let names = Object.keys(rows[0])
 
@@ -95,7 +97,8 @@ export function createDictTable(
         types: names.map(name => inferTypeFromValueArray(rows.map(r => r[name]))),
         derive,
         virtual,
-        anchored
+        anchored,
+        explorativeQuestions
     }
 }
 

src/views/ChartRecBox.tsx

@@ -169,9 +169,13 @@ export const ChartRecBox: FC<ChartRecBoxProps> = function ({ tableId, placeHolde
 
     const [prompt, setPrompt] = useState<string>("");
     const [isFormulating, setIsFormulating] = useState<boolean>(false);
+    // Remove the randomQuestion state since we'll generate it on demand
 
     // Use the provided tableId and find additional available tables for multi-table operations
     const currentTable = tables.find(t => t.id === tableId);
+
+    // Remove the useEffect that sets randomQuestion
+
     const availableTables = tables.filter(t => t.derive === undefined || t.anchored);
     const [additionalTableIds, setAdditionalTableIds] = useState<string[]>([]);
 
@@ -184,6 +188,25 @@ export const ChartRecBox: FC<ChartRecBoxProps> = function ({ tableId, placeHolde
         setAdditionalTableIds(additionalIds);
     };
 
+    // Function to get a random question from the list
+    const getQuestion = (random: boolean = false): string => {
+        if (currentTable?.explorativeQuestions && currentTable.explorativeQuestions.length > 0) {
+            const index = random ? Math.floor(Math.random() * currentTable.explorativeQuestions.length) : 0;
+            return currentTable.explorativeQuestions[index];
+        }
+        return "Show something interesting about the data";
+    };
+
+    // Handle tab key press for auto-completion
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === 'Tab' && !event.shiftKey) {
+            event.preventDefault();
+            if (prompt.trim() === "") {
+                setPrompt(getQuestion(false));
+            }
+        }
+    };
+
     const deriveDataFromNL = (instruction: string) => {
 
         if (selectedTableIds.length === 0 || instruction.trim() === "") {
@@ -452,6 +475,7 @@ export const ChartRecBox: FC<ChartRecBoxProps> = function ({ tableId, placeHolde
                         "& .MuiInput-input": { fontSize: '14px' }
                     }}
                     onChange={(event) => setPrompt(event.target.value)}
+                    onKeyDown={handleKeyDown}
                     slotProps={{
                         inputLabel: { shrink: true },
                         input: {
@@ -471,7 +495,7 @@ export const ChartRecBox: FC<ChartRecBoxProps> = function ({ tableId, placeHolde
                     }}
                     value={prompt}
                     label="Describe what you want to visualize"
-                    placeholder="e.g., Show sales trends by region over time"
+                    placeholder={`e.g., ${getQuestion(false)}`}
                     fullWidth
                     multiline
                     variant="standard"
@@ -488,7 +512,7 @@ export const ChartRecBox: FC<ChartRecBoxProps> = function ({ tableId, placeHolde
                             size="medium"
                             disabled={isFormulating || !currentTable}
                             color="primary" 
-                            onClick={() => deriveDataFromNL('show me a creative visualization about the data')}
+                            onClick={() => deriveDataFromNL(getQuestion(true))}
                         >
                             <InsightsIcon sx={{fontSize: 24}} />
                         </IconButton>

src/views/DBTableManager.tsx

@@ -542,6 +542,7 @@ export const DBTableSelectionDialog: React.FC<{ buttonElement: any }> = function
                 rowCount: dbTable.row_count,
             },
             anchored: true, // by default, db tables are anchored
+            explorativeQuestions: []
         }
        dispatch(dfActions.loadTable(table));
        dispatch(fetchFieldSemanticType(table));

src/views/DataThread.tsx

@@ -293,8 +293,6 @@ let SingleThreadView: FC<{
             highlightedTableIds = focusedTableId && tableIdList.includes(focusedTableId) ? tableIdList : [];
         }
 
-        console.log('triggerToFirstNewTable - ', triggerToFirstNewTable)
-    
         let tableElementList = tableIdList.map((tableId, i) => {
 
             if (tableId == leafTable.id && leafTable.anchored && tableIdList.length > 1) {

src/views/VisualizationView.tsx

@@ -363,9 +363,6 @@ export const ChartEditorFC: FC<{}> = function ChartEditorFC({}) {
 
     let table = getDataTable(focusedChart, tables, charts, conceptShelfItems);
 
-    console.log('charts')
-    console.log(charts)
-
     let visFieldIds = Object.keys(focusedChart.encodingMap).filter(key => focusedChart.encodingMap[key as keyof EncodingMap].fieldID != undefined).map(key => focusedChart.encodingMap[key as keyof EncodingMap].fieldID);
     let visFields = conceptShelfItems.filter(f => visFieldIds.includes(f.id));
     let dataFieldsAllAvailable = visFields.every(f => table.names.includes(f.name));
@@ -881,8 +878,8 @@ export const VisualizationViewFC: FC<VisPanelProps> = function VisualizationView
                 {focusedTableId ? <ChartRecBox sx={{margin: 'auto'}} tableId={focusedTableId as string} placeHolderChartId={focusedChartId as string} /> : ""}
                 <Divider sx={{my: 3}} textAlign='left'>
                     <Typography sx={{fontSize: 12, color: "darkgray"}}>
-                        or, select a chart
-                    </Typography> 
+                        or, select a chart type
+                    </Typography>
                 </Divider>
                 {chartSelectionBox}
             </Box>
@@ -891,7 +888,6 @@ export const VisualizationViewFC: FC<VisPanelProps> = function VisualizationView
 
     let chartEditor = <ChartEditorFC key={focusedChartId} />
 
-
     let finalView = <Box></Box>;
 
     if (visViewMode == "gallery") {