Improvement: reduce component serialization payload by excluding defaults and None values

.github/workflows/tests.yml

@@ -247,23 +247,23 @@ jobs:
           path: packages/dara-core/cypress/screenshots
           retention-days: 30
 
-  notify:
-    needs: [python-lint, js-lint, python-tests, js-tests, e2e-tests]
-    runs-on: ubuntu-latest
-    if: always()
-    steps:
-      - uses: 8398a7/action-slack@v3
-        with:
-          status: custom
-          fields: workflow,job,commit,repo,ref,author,took
-          custom_payload: |
-            {
-              username: 'action-slack',
-              attachments: [{
-                color: '${{ contains(needs.*.result, 'failure') }}' === 'true' ? 'danger' : '${{ contains(needs.*.result, 'cancelled') }}' === 'true' ? 'warning' : 'good',
-                text: `${process.env.AS_WORKFLOW}\n${process.env.AS_JOB} (${process.env.AS_COMMIT}) of ${process.env.AS_REPO}@${process.env.AS_REF} by ${process.env.AS_AUTHOR} ${{ contains(needs.*.result, 'failure') && 'failed' || contains(needs.*.result, 'cancelled') && 'cancelled' || 'succeeded' }} in ${process.env.AS_TOOK}`,
-              }]
-            }
-        env:
-          SLACK_WEBHOOK_URL: "${{ secrets.SLACK_BUILD_CHANNEL_WEBHOOK }}"
-        if: ${{ github.actor != 'dependabot[bot]' }}
+  # notify:
+  #   needs: [python-lint, js-lint, python-tests, js-tests, e2e-tests]
+  #   runs-on: ubuntu-latest
+  #   if: always()
+  #   steps:
+  #     - uses: 8398a7/action-slack@v3
+  #       with:
+  #         status: custom
+  #         fields: workflow,job,commit,repo,ref,author,took
+  #         custom_payload: |
+  #           {
+  #             username: 'action-slack',
+  #             attachments: [{
+  #               color: '${{ contains(needs.*.result, 'failure') }}' === 'true' ? 'danger' : '${{ contains(needs.*.result, 'cancelled') }}' === 'true' ? 'warning' : 'good',
+  #               text: `${process.env.AS_WORKFLOW}\n${process.env.AS_JOB} (${process.env.AS_COMMIT}) of ${process.env.AS_REPO}@${process.env.AS_REF} by ${process.env.AS_AUTHOR} ${{ contains(needs.*.result, 'failure') && 'failed' || contains(needs.*.result, 'cancelled') && 'cancelled' || 'succeeded' }} in ${process.env.AS_TOOK}`,
+  #             }]
+  #           }
+  #       env:
+  #         SLACK_WEBHOOK_URL: "${{ secrets.SLACK_BUILD_CHANNEL_WEBHOOK }}"
+  #       if: ${{ github.actor != 'dependabot[bot]' }}

packages/dara-components/changelog.md

@@ -2,6 +2,10 @@
 title: Changelog
 ---
 
+## NEXT
+
+- Improved serialization of commonly useed components to exclude component-specific fields at their default values, reducing payload size.
+
 ## 1.25.1
 
 - Added `size` prop to `Select` component to control font-size of each sub-component

packages/dara-components/dara/components/common/button.py

@@ -16,7 +16,7 @@
 """
 
 from enum import Enum
-from typing import cast
+from typing import ClassVar, cast
 
 from dara.components.common.base_component import LayoutComponent
 from dara.components.common.text import Text
@@ -123,6 +123,10 @@ async def navigate_to(ctx: action.Ctx, url: str):
     :param stop_click_propagation: Whether to stop the click event from propagating to the parent element, defaults to true
     """
 
+    _exclude_when_default: ClassVar[frozenset[str]] = LayoutComponent._exclude_when_default | frozenset(
+        {'outline', 'stop_click_propagation'}
+    )
+
     disabled: Condition | ClientVariable | bool | None = None
     loading: Condition | ClientVariable | bool | None = None
     onclick: Action | None = None

packages/dara-components/dara/components/common/select.py

@@ -15,7 +15,7 @@
 limitations under the License.
 """
 
-from typing import Any
+from typing import Any, ClassVar
 
 from pydantic import ValidationInfo, field_validator
 
@@ -126,6 +126,10 @@ class Select(FormComponent):
     :param size: An optional font size for the select component, in REM units
     """
 
+    _exclude_when_default: ClassVar[frozenset[str]] = FormComponent._exclude_when_default | frozenset(
+        {'multiselect', 'searchable', 'max_rows'}
+    )
+
     id: str | None = None
     multiselect: bool = False
     searchable: bool = False

packages/dara-components/dara/components/common/stack.py

@@ -16,6 +16,7 @@
 """
 
 import logging
+from typing import ClassVar
 
 from dara.components.common.base_component import LayoutComponent
 from dara.core.definitions import ComponentInstance
@@ -134,6 +135,13 @@ class Stack(LayoutComponent):
     :param scroll: Whether to scroll the content of the stack, defaults to False
     """
 
+    # Override to keep 'hug' in the serialized payload. Stack defaults hug=False
+    # which differs from StyledComponentInstance's hug=None. If excluded, the JS client
+    # receives undefined and would incorrectly inherit hug from a parent Grid context.
+    _exclude_when_default: ClassVar[frozenset[str]] = (
+        LayoutComponent._exclude_when_default - frozenset({'hug'})
+    ) | frozenset({'collapsed', 'direction', 'scroll'})
+
     collapsed: Variable[bool] | bool = False
     direction: Direction = Direction.VERTICAL
     hug: bool | None = False

packages/dara-components/dara/components/common/table.py

@@ -901,6 +901,10 @@ async def on_action(ctx: action.Ctx):
 
     model_config = ConfigDict(ser_json_timedelta='float', use_enum_values=True, arbitrary_types_allowed=True)
 
+    _exclude_when_default: ClassVar[frozenset[str]] = ContentComponent._exclude_when_default | frozenset(
+        {'multi_select', 'searchable', 'include_index', 'show_checkboxes', 'suppress_click_events_for_selection'}
+    )
+
     columns: Sequence[Column | dict | str] | ClientVariable | None = None
     data: AnyVariable | DataFrame | list
     multi_select: bool = False

packages/dara-components/dara/components/common/text.py

@@ -15,6 +15,8 @@
 limitations under the License.
 """
 
+from typing import ClassVar
+
 from pydantic import field_validator
 
 from dara.components.common.base_component import ContentComponent
@@ -51,8 +53,10 @@ class Text(ContentComponent):
     :param formatted: Whether to display the text with existing formatting intact or not, default False
     """
 
+    _exclude_when_default: ClassVar[frozenset[str]] = ContentComponent._exclude_when_default | frozenset({'formatted'})
+
     text: str | ClientVariable
-    align: str | None = 'left'  # type: ignore # this is actually textAlign not align-items
+    align: str | None = None  # type: ignore # this is actually textAlign not align-items
     formatted: bool = False
 
     @field_validator('text')

packages/dara-components/js/common/card/card.tsx

@@ -102,11 +102,11 @@ function Card(props: CardProps): JSX.Element {
     return (
         <CardDiv $rawCss={css} accent={props.accent} style={style} id={props.id_}>
             {title && <Title>{title}</Title>}
-            {subtitle && <Subtitle hasTitle={props.title !== null}>{subtitle}</Subtitle>}
+            {subtitle && <Subtitle hasTitle={props.title != null}>{subtitle}</Subtitle>}
             <ChildrenWrapper
                 data-type="children-wrapper"
-                hasSubtitle={props.subtitle !== null}
-                hasTitle={props.title !== null}
+                hasSubtitle={props.subtitle != null}
+                hasTitle={props.title != null}
                 style={{
                     alignItems: props.align,
                     justifyContent: props.justify,

packages/dara-components/js/common/select/select.tsx

@@ -93,7 +93,7 @@ interface SelectProps extends FormComponentProps {
  *
  * @param props the component props
  */
-function Select(props: SelectProps): JSX.Element {
+function Select({ max_rows = 3, ...props }: SelectProps): JSX.Element {
     const formCtx = useFormContext(props);
     const [items] = useVariable(props.items);
     const [style, css] = useComponentStyles(props);
@@ -222,7 +222,7 @@ function Select(props: SelectProps): JSX.Element {
                 $rawCss={css}
                 className={props.className}
                 items={itemArray}
-                maxRows={props.max_rows}
+                maxRows={max_rows}
                 onSelect={onSelect}
                 placeholder={props.placeholder}
                 selectedItems={selectedItems}

packages/dara-components/js/common/stack/stack.tsx

@@ -43,12 +43,12 @@ const StyledStack = injectCss(styled.div<StackProps>`
     height: ${(props) => (props.direction === 'horizontal' ? '100%' : undefined)};
 `);
 
-function Stack(props: StackProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
+function Stack({ direction = 'vertical', ...props }: StackProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
     const [collapsed] = useVariable(props.collapsed);
     const [style, css] = useComponentStyles(props);
 
     const stackContent = (
-        <DisplayCtx.Provider value={{ component: 'stack', direction: props.direction }}>
+        <DisplayCtx.Provider value={{ component: 'stack', direction }}>
             {props.children.map((child, idx) => (
                 <DynamicComponent component={child} key={`stack-${idx}-${child.uid}`} />
             ))}
@@ -61,7 +61,7 @@ function Stack(props: StackProps, ref: ForwardedRef<HTMLDivElement>): JSX.Elemen
             $rawCss={css}
             className={props.className}
             data-type="children-wrapper"
-            direction={props.direction}
+            direction={direction}
             ref={ref}
             style={{
                 alignItems: props.align,
@@ -76,7 +76,7 @@ function Stack(props: StackProps, ref: ForwardedRef<HTMLDivElement>): JSX.Elemen
                         <div
                             style={{
                                 display: 'flex',
-                                flexDirection: props.direction === 'horizontal' ? 'row' : 'column',
+                                flexDirection: direction === 'horizontal' ? 'row' : 'column',
                                 gap: style.gap ?? '0.75rem',
                                 height,
                                 overflow: 'auto',

packages/dara-components/js/common/table/table.tsx

@@ -508,7 +508,7 @@ function resolveColumns(
 
 const TableWrapper = injectCss('div');
 
-function Table(props: TableProps): JSX.Element {
+function Table({ include_index = true, show_checkboxes = true, ...props }: TableProps): JSX.Element {
     const getData = useTabularVariable(props.data);
     const [selectedRowIndices, setSelectedRowIndices] = useVariable(props.selected_indices);
 
@@ -542,7 +542,7 @@ function Table(props: TableProps): JSX.Element {
             }
 
             // update columns with schema on each fetch
-            const columns = resolveColumns(data[0]!, schema, resolvedPropColumns, props.include_index);
+            const columns = resolveColumns(data[0]!, schema, resolvedPropColumns, include_index);
             setResolvedColumns(columns);
             const datetimeColumns = getDatetimeColumns(columns);
 
@@ -560,7 +560,7 @@ function Table(props: TableProps): JSX.Element {
                 totalCount: count,
             };
         },
-        [getData, filters, searchQuery, sortingRules, resolvedPropColumns, props.include_index, columnHints]
+        [getData, filters, searchQuery, sortingRules, resolvedPropColumns, include_index, columnHints]
     );
 
     const extraDataCache = useRef<Record<string, DataRow>>({});
@@ -636,12 +636,12 @@ function Table(props: TableProps): JSX.Element {
 
         const mappedCols = mapColumns(resolvedColumns);
 
-        if ((props.show_checkboxes && (props.onclick_row || props.onselect_row)) || props.selected_indices) {
+        if ((show_checkboxes && (props.onclick_row || props.onselect_row)) || props.selected_indices) {
             mappedCols?.unshift(UiTable.ActionColumn([UiTable.Actions.SELECT], 'select_box_col', 'left', true));
         }
 
         return mappedCols;
-    }, [resolvedColumns, props.show_checkboxes, props.onclick_row, props.selected_indices, props.onselect_row]);
+    }, [resolvedColumns, show_checkboxes, props.onclick_row, props.selected_indices, props.onselect_row]);
 
     const onSelect = useCallback(
         async (row: any, isCheckboxSelect: boolean = false): Promise<void> => {

packages/dara-components/js/common/text/text.tsx

@@ -46,11 +46,11 @@ function Text(props: TextProps): JSX.Element {
                 style={{
                     border: props?.border ?? 'none',
                     color,
-                    fontStyle: props.italic ? 'italic' : 'normal',
-                    fontWeight: props.bold ? 'bold' : 'normal',
+                    fontStyle: props.italic ? 'italic' : undefined,
+                    fontWeight: props.bold ? 'bold' : undefined,
                     marginRight: '0.1em',
                     textAlign: props.align as any,
-                    textDecoration: props.underline ? 'underline' : '',
+                    textDecoration: props.underline ? 'underline' : undefined,
                     ...style,
                 }}
             >

packages/dara-components/tests/python/common/test_anchor.py

@@ -22,13 +22,10 @@ def test_serialization(self, _uid):
         expected_dict = {
             'name': 'Anchor',
             'props': {
-                'bold': False,
                 'children': [t1.dict(exclude_none=True)],
                 'clean': False,
                 'href': '#anchor1',
-                'italic': False,
                 'name': 'anchor1',
-                'underline': False,
                 'new_tab': False,
             },
             'uid': 'uid',

packages/dara-components/tests/python/common/test_base_component.py

@@ -32,9 +32,6 @@ def test_serialization(self, _uid):
                 'children': [t1.dict(exclude_none=True), t2.dict(exclude_none=True), t1.dict(exclude_none=True)],
                 'height': '10%',
                 'width': '10px',
-                'bold': False,
-                'italic': False,
-                'underline': False,
             },
             'uid': 'uid',
         }

packages/dara-components/tests/python/common/test_button.py

@@ -22,15 +22,10 @@ def test_serialization(self, _uid):
         expected_dict = {
             'name': 'Button',
             'props': {
-                'bold': False,
                 'children': [Text(text='Click Here').dict(exclude_none=True)],
-                'stop_click_propagation': True,
-                'italic': False,
                 'onclick': action.dict(exclude_none=True),
                 'styling': ButtonStyle.PRIMARY.value,
-                'outline': False,
                 'position': 'relative',
-                'underline': False,
             },
             'uid': str(test_uid),
         }

packages/dara-components/tests/python/common/test_carousel.py

@@ -15,11 +15,8 @@ def test_serialization(self, _uid):
         expected_dict = {
             'name': 'Carousel',
             'props': {
-                'bold': False,
                 'children': [],
-                'italic': False,
                 'items': [{'title': 'test', 'subtitle': 'item'}],
-                'underline': False,
             },
             'uid': 'uid',
         }

packages/dara-components/tests/python/common/test_checkbox_group.py

@@ -20,17 +20,14 @@ def test_serialization(self, _uid):
         expected_dict = {
             'name': 'CheckboxGroup',
             'props': {
-                'bold': False,
                 'children': [],
-                'italic': False,
                 'items': [
                     {'label': 'test1', 'value': 'test1'},
                     {'label': 'test2', 'value': 'test2'},
                     {'label': 'test3', 'value': 'test3'},
                 ],
                 'list_styling': False,
                 'select_max': 2,
-                'underline': False,
                 'value': value.dict(exclude_none=True),
             },
             'uid': str(test_uid),

packages/dara-components/tests/python/common/test_code.py

@@ -20,9 +20,6 @@ def test_serialization(self, _uid):
                 'children': [],
                 'code': self.code,
                 'language': 'js',
-                'bold': False,
-                'italic': False,
-                'underline': False,
             },
             'uid': 'uid',
         }

packages/dara-components/tests/python/common/test_datepicker.py

@@ -23,15 +23,12 @@ def test_serialization(self, _uid):
         expected_dict = {
             'name': 'Datepicker',
             'props': {
-                'bold': False,
                 'children': [],
                 'value': value.dict(exclude_none=True),
                 'date_format': 'dd/MM/yyyy',
                 'enable_time': False,
-                'italic': False,
                 'range': False,
                 'select_close': True,
-                'underline': False,
             },
             'uid': str(test_uid),
         }

packages/dara-components/tests/python/common/test_form.py

@@ -22,10 +22,7 @@ def test_serialization(self, _uid):
             'name': 'Form',
             'props': {
                 'children': [s1.dict(exclude_none=True)],
-                'bold': False,
-                'italic': False,
                 'position': 'relative',
-                'underline': False,
                 'value': form_state.dict(exclude_none=True),
             },
             'uid': str(test_uid),

packages/dara-components/tests/python/common/test_form_page.py

@@ -20,9 +20,6 @@ def test_serialization(self, _uid):
             'name': 'FormPage',
             'props': {
                 'children': [s1.dict(exclude_none=True)],
-                'bold': False,
-                'italic': False,
-                'underline': False,
                 'title': 'Page',
             },
             'uid': str(test_uid),