Merge pull request #4617 from voxel51/dashboard-fixes

dashboard fixes

app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx

@@ -10,7 +10,7 @@ import Button from "./Button";
 import TooltipProvider from "./TooltipProvider";
 
 export default function ButtonView(props: ViewPropsType) {
-  const { schema, path } = props;
+  const { schema, path, onClick } = props;
   const { view = {} } = schema;
   const {
     description,
@@ -42,11 +42,16 @@ export default function ButtonView(props: ViewPropsType) {
           variant={variant}
           href={href}
           onClick={() => {
-            handleClick(panelId, {
-              params: computedParams,
-              operator,
-              prompt,
-            });
+            if (operator) {
+              handleClick(panelId, {
+                params: computedParams,
+                operator,
+                prompt,
+              });
+            }
+            if (onClick) {
+              onClick(computedParams, props);
+            }
           }}
           startIcon={icon_position === "left" ? Icon : undefined}
           endIcon={icon_position === "right" ? Icon : undefined}

app/packages/core/src/plugins/SchemaIO/components/DashboardView.tsx

@@ -15,11 +15,11 @@ import React, { forwardRef, useCallback, useState } from "react";
 import GridLayout from "react-grid-layout";
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
-import { Button } from ".";
+import { Button, ButtonView } from ".";
 import { getPath, getProps } from "../utils";
 import { ObjectSchemaType, ViewPropsType } from "../utils/types";
 import DynamicIO from "./DynamicIO";
-import { Edit } from "@mui/icons-material";
+import { Edit, Add } from "@mui/icons-material";
 
 const AddItemCTA = ({ onAdd }) => {
   return (
@@ -33,34 +33,60 @@ const AddItemCTA = ({ onAdd }) => {
         width: "100%",
       }}
     >
-      <Paper sx={{ padding: 2 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
-          Add an Item to Your Dashboard
-        </Typography>
-        <Button variant="contained" onClick={onAdd}>
-          Add Item
-        </Button>
+      <Paper
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "column",
+          padding: 2,
+        }}
+      >
+        <Box sx={{ textAlign: "center" }}>
+          <Typography variant="h5" gutterBottom>
+            No items yet
+          </Typography>
+        </Box>
+        <Box sx={{ textAlign: "center" }}>
+          <Typography variant="body2" sx={{ marginBottom: 2 }}>
+            Add items to this dashboard to start exploring, plotting, and
+            sharing.
+          </Typography>
+        </Box>
+        <Box>
+          <ButtonView
+            onClick={onAdd}
+            schema={{
+              view: {
+                variant: "contained",
+                icon: "add",
+                label: "Add Item",
+              },
+            }}
+          />
+        </Box>
       </Paper>
     </Box>
   );
 };
 const AddItemButton = ({ onAddItem }) => {
   return (
-    <Grid container spacing={2} style={{ position: "fixed", bottom: 0 }}>
-      <Grid item xs={12}>
-        <Box
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          height="100px"
-          width="100%"
-        >
-          <Button variant="contained" size="large" onClick={onAddItem}>
-            Add New Item
-          </Button>
-        </Box>
-      </Grid>
-    </Grid>
+    <Box
+      height="50px"
+      width="100%"
+      sx={{ padding: 1, overflow: "hidden" }}
+      backgroundColor="background.default"
+    >
+      <ButtonView
+        onClick={onAddItem}
+        schema={{
+          view: {
+            icon: "add",
+            label: "Add Item",
+          },
+        }}
+      />
+    </Box>
   );
 };
 
@@ -118,24 +144,28 @@ export default function DashboardView(props: ViewPropsType) {
     },
     [panelId, props, schema.view.on_layout_change, triggerPanelEvent]
   );
-  const [isDragging, setIsDragging] = useState(false);
   const theme = useTheme();
 
   const MIN_ITEM_WIDTH = 400;
   const MIN_ITEM_HEIGHT = 300; // Setting minimum height for items
   const GRID_WIDTH = layout?.width; // Set based on your container's width
-  const GRID_HEIGHT = layout?.height - 180; // Set based on your container's height - TODO remove button height hardcoded
-  const COLS = GRID_WIDTH ? Math.floor(GRID_WIDTH / MIN_ITEM_WIDTH) || 1 : 1;
-  const ROWS = Math.ceil(propertiesAsArray.length / COLS) || 1;
+  const GRID_HEIGHT = layout?.height - 80; // panel height - footer height
+  let COLS = GRID_WIDTH ? Math.floor(GRID_WIDTH / MIN_ITEM_WIDTH) || 1 : 1;
+  let ROWS = Math.ceil(propertiesAsArray.length / COLS) || 1;
+
+  if (propertiesAsArray.length === 1) {
+    COLS = 1;
+    ROWS = 1;
+  }
 
   const viewLayout = schema.view.layout;
   const defaultLayout = propertiesAsArray.map((property, index) => {
     return {
       i: property.id,
-      x: index % COLS, // Correctly position items in the grid
-      y: Math.floor(index / COLS), // Correctly position items in the grid
+      x: index % COLS,
+      y: Math.floor(index / COLS),
       w: 1,
-      h: 1, // Each item takes one row
+      h: 1,
       minW: 1, // Minimum width in grid units
       minH: Math.ceil(MIN_ITEM_HEIGHT / (GRID_HEIGHT / ROWS)), // Minimum height in grid units
     };
@@ -165,24 +195,23 @@ export default function DashboardView(props: ViewPropsType) {
 
   return (
     <Box>
+      {allow_addition && <AddItemButton key="add-item" onAddItem={onAddItem} />}
       <GridLayout
         onLayoutChange={handleLayoutChange}
         layout={finalLayout}
         cols={COLS}
         rowHeight={GRID_HEIGHT / ROWS} // Dynamic row height
         width={GRID_WIDTH}
-        onDragStart={() => setIsDragging(true)}
-        onDragStop={() => setIsDragging(false)}
         resizeHandles={["e", "w", "n", "s"]}
-        isDraggable={!isDragging}
-        isResizable={!isDragging} // Allow resizing
         draggableHandle=".drag-handle"
         resizeHandle={(axis, ref) => {
           return <DashboardItemResizeHandle axis={axis} ref={ref} />;
         }}
       >
         {propertiesAsArray.map((property) => {
           const { id } = property;
+          const value = data?.[id];
+          const label = property.view?.layout?.title || value?.name || id;
           const itemPath = getPath(path, id);
           const baseItemProps: BoxProps = {
             sx: { padding: 0.25, position: "relative" },
@@ -197,7 +226,7 @@ export default function DashboardView(props: ViewPropsType) {
               )}
             >
               <DragHandle className="drag-handle">
-                <Typography>{property.title || id}</Typography>
+                <Typography>{label}</Typography>
                 <Box>
                   {allow_edit && (
                     <IconButton
@@ -241,7 +270,6 @@ export default function DashboardView(props: ViewPropsType) {
           );
         })}
       </GridLayout>
-      {allow_addition && <AddItemButton key="add-item" onAddItem={onAddItem} />}
     </Box>
   );
 }

app/packages/core/src/plugins/SchemaIO/components/HeaderView.tsx

@@ -7,12 +7,13 @@ export default function HeaderView(props) {
   const { schema, errors, nested, ...otherProps } = props;
   const { view = {} } = schema;
   const { componentsProps } = view;
+  const { sx, ...viewWithoutSx } = view;
 
   return (
     <Box>
       <Header
         errors={getErrorsForView(props)}
-        {...view}
+        {...viewWithoutSx}
         {...otherProps}
         componentsProps={nested ? componentsProps?.header : componentsProps}
       />