multi-table support and demo

Author: Chenglong-MS

py-src/data_formulator/agents/agent_data_rec.py

@@ -52,7 +52,7 @@
     (4) "visualization_fields" should be no more than 3 (for x,y,legend).
     (5) "chart_type" must be one of "point", "bar", "line", or "boxplot"
 
-    2. Then, write a python function based on the inferred goal, the function input is a dataframe "df" and the output is the transformed dataframe "transformed_df". "transformed_df" should contain all "output_fields" from the refined goal.
+    2. Then, write a python function based on the inferred goal, the function input is a dataframe "df" (or multiple dataframes based on tables presented in the [CONTEXT] section) and the output is the transformed dataframe "transformed_df". "transformed_df" should contain all "output_fields" from the refined goal.
 The python function must follow the template provided in [TEMPLATE], do not import any other libraries or modify function name. The function should be as simple as possible and easily readable. 
 If there is no data transformation needed based on "output_fields", the transformation function can simply "return df".
 
@@ -63,11 +63,15 @@
 import collections
 import numpy as np
 
-def transform_data(df):
+def transform_data(df1, df2, ...): 
     # complete the template here
     return transformed_df
 ```
 
+note: 
+- if the user provided one table, then it should be def transform_data(df1), if the user provided multiple tables, then it should be def transform_data(df1, df2, ...) and you should consider the join between tables to derive the output.
+- try to use table names to refer to the input dataframes, for example, if the user provided two tables city and weather, you can use `transform_data(df_city, df_weather)` to refer to the two dataframes.
+
     3. The [OUTPUT] must only contain a json object representing the refined goal and a python code block representing the transformation code, do not add any extra text explanation.
 '''
 

src/views/ConceptShelf.tsx

@@ -182,7 +182,37 @@ export const ConceptShelf: FC<ConceptShelfProps> = function ConceptShelf() {
                                     </Box>
                                 </Divider>
                             </Box>
-                            {!expandedGroups.includes(groupName) && !isCustomGroup && (
+                            
+                            <Box
+                                sx={{
+                                    maxHeight: expandedGroups.includes(groupName) || isCustomGroup ? '1000px' : '240px',
+                                    overflow: 'hidden',
+                                    transition: 'max-height 0.3s ease-in-out',
+                                    width: '100%'
+                                }}
+                            >
+                                {(expandedGroups.includes(groupName) || isCustomGroup ? fields : fields.slice(0, 5)).map((field) => (
+                                    <ConceptCard key={`concept-card-${field.id}`} field={field} />
+                                ))}
+                                {!expandedGroups.includes(groupName) && !isCustomGroup && fields.length > 5 && (
+                                    <Box sx={{ 
+                                        position: 'relative', 
+                                        height: '40px',
+                                        '&::after': {
+                                            content: '""',
+                                            position: 'absolute',
+                                            bottom: 0,
+                                            left: 0,
+                                            right: 0,
+                                            height: '100%',
+                                            background: 'linear-gradient(to bottom, transparent, white)'
+                                        }
+                                    }}>
+                                        <ConceptCard field={fields[5]} />
+                                    </Box>
+                                )}
+                            </Box>
+                            {!expandedGroups.includes(groupName) && !isCustomGroup && fields.length > 5 && (
                                 <Button
                                     onClick={() => updateExpandedGroup(groupName, true)}
                                     sx={{
@@ -198,23 +228,13 @@ export const ConceptShelf: FC<ConceptShelfProps> = function ConceptShelf() {
                                         }
                                     }}
                                 >
-                                    {`add fields from ${groupName} for tables joins`}
+                                    {`... show all ${fields.length} ${groupName} fields ▾`}
                                 </Button>
                             )}
-                            <Box
-                                sx={{
-                                    maxHeight: expandedGroups.includes(groupName) || isCustomGroup ? '1000px' : '0px',
-                                    overflow: 'hidden',
-                                    transition: 'max-height 0.3s ease-in-out'
-                                }}
-                            >
-                                {fields.map((field) => (
-                                    <ConceptCard key={`concept-card-${field.id}`} field={field} />
-                                ))}
-                            </Box>
                             </>
                         )
                     })}
+                    <Divider orientation="horizontal" textAlign="left" sx={{mt: 1}}></Divider>
                 </Box>
             </Box>
         </Box>