Merge pull request #1247 from mito-ds/streamlit-height-config

mitosheet: make mito height into a variable

Author: Nate Rush

mitosheet/css/mito.css

@@ -61,7 +61,7 @@
 }
 
 .mito-container {
-    height: 538px;
+    height: var(--mito-height);
     display: flex;
     flex-direction: column;
 

mitosheet/mitosheet/streamlit/v1/apps/simple.py

@@ -1,11 +1,15 @@
+import pandas as pd
 import streamlit as st
 from mitosheet.streamlit.v1 import spreadsheet
 
 st.set_page_config(layout="wide")
 st.title('Tesla Stock Volume Analysis')
 
-CSV_URL = 'https://raw.githubusercontent.com/plotly/datasets/master/tesla-stock-price.csv'
-new_dfs, code = spreadsheet(CSV_URL)
+df = pd.DataFrame({
+    'a': [1, 2, 3],
+    'b': [4, 5, 6]
+})
+new_dfs, code = spreadsheet(df, height='1000px')
 
 st.write(new_dfs)
 st.code(code)

mitosheet/mitosheet/streamlit/v1/spreadsheet.py

@@ -321,6 +321,7 @@ def spreadsheet( # type: ignore
             import_folder: Optional[str]=None,
             code_options: Optional[CodeOptions]=None,
             return_type: str='default',
+            height: Optional[str]=None,
             key=None
         ) -> Any:
         """
@@ -405,6 +406,7 @@ def spreadsheet( # type: ignore
             key=key, 
             sheet_data_json=sheet_data_json, analysis_data_json=analysis_data_json, user_profile_json=user_profile_json, 
             responses_json=responses_json, id=id(mito_backend),
+            height=height,
             return_type=return_type
         )
 

mitosheet/src/mito/Mito.tsx

@@ -80,7 +80,7 @@ import { Toolbar } from './components/toolbar/Toolbar';
 import Tour from './components/tour/Tour';
 import { TourName } from './components/tour/Tours';
 import { useMitoAPI } from './hooks/useMitoAPI';
-import { getCSSVariablesFromTheme } from './utils/colors';
+import { getCSSStyleVariables } from './utils/colors';
 import { handleKeyboardShortcuts } from './utils/keyboardShortcuts';
 import { isInDashboard } from './utils/location';
 import { shallowEqualToDepth } from './utils/objects';
@@ -104,6 +104,7 @@ export type MitoProps = {
         textColor?: string
     }
     onSelectionChange?: (selectedDataframeIndex: number, selections: MitoSelection[]) => void;
+    height?: string | undefined;
 };
 
 export const Mito = (props: MitoProps): JSX.Element => {
@@ -379,20 +380,19 @@ export const Mito = (props: MitoProps): JSX.Element => {
     }, [uiState]);
 
     /**
-     * If the theme changes, we update the theme on the document. 
+     * If the styling changes, we update the syling on the document. 
      * Note we don't just do this on the Mito component styles
-     * because we want to be able to use the theme in dropdowns
+     * because we want to be able to use the styling in dropdowns
      * that are rendered outside of the Mito component.
      */
     useEffect(() => {
-        const cssVariables = getCSSVariablesFromTheme(props.theme);
+        const cssVariables = getCSSStyleVariables(props.height, props.theme);
         // For each key in the theme, set it on the document style
         Object.keys(cssVariables).forEach((key) => {
             const value = (cssVariables as Record<string, any>)[key];
             document.documentElement.style.setProperty(key, value);
         })
-
-    }, [props.theme])
+    }, [props.theme, props.height])
 
 
     // If the user passes an onSelectionChange, then, we fire off events any time the user selects

mitosheet/src/mito/utils/colors.tsx

@@ -97,16 +97,19 @@ const getBackgroundColors = (backgroundColor: string | undefined): React.CSSProp
 
 
 
-export const getCSSVariablesFromTheme = (theme?: MitoTheme): React.CSSProperties => {
+export const getCSSStyleVariables = (height: string | undefined, theme?: MitoTheme): React.CSSProperties => {
 
     const highlightTheme = getHighlightTheme(theme?.primaryColor);
     const textTheme = getTextColors(theme?.textColor);
     const backgroundTheme = getBackgroundColors(theme?.backgroundColor);
+    const heightTheme = height ? {'--mito-height': height} : {'--mito-height': '538px'} as React.CSSProperties;
+
 
     return {
         ...highlightTheme,
         ...textTheme,
         ...backgroundTheme,
+        ...heightTheme,
     }
 }
 

mitosheet/src/streamlit/MitoStreamlitWrapper.tsx

@@ -168,6 +168,7 @@ class MitoStreamlitWrapper extends StreamlitComponentBase<State> {
     public render = (): ReactNode => {
 
         const returnType = this.props.args['return_type'] as string;
+        const height = this.props.args['height'] as string | undefined;
         const sheetDataArray = getSheetDataArrayFromString(this.props.args['sheet_data_json']);
         const analysisData = getAnalysisDataFromString(this.props.args['analysis_data_json']);
         const userProfile = getUserProfileFromString(this.props.args['user_profile_json']);
@@ -195,6 +196,7 @@ class MitoStreamlitWrapper extends StreamlitComponentBase<State> {
         return (
             <Mito 
                 key={this.props.args['id'] as string}
+                height={height}
                 getSendFunction={async () => this.send.bind(this)} 
                 sheetDataArray={sheetDataArray} 
                 analysisData={analysisData}