feature/47-yhkim to develop

frontend/package.json

@@ -23,6 +23,9 @@
     "@tanstack/react-query": "^5.84.1",
     "@tanstack/react-query-devtools": "^5.84.1",
     "@tanstack/react-router": "1.19.1",
+    "@tensorflow-models/coco-ssd": "^2.2.2",
+    "@tensorflow-models/deeplab": "^0.2.2",
+    "@tensorflow/tfjs": "^3.21.0",
     "@types/leaflet": "^1.9.20",
     "@types/react-grid-layout": "^1.3.5",
     "@types/uuid": "^10.0.0",

frontend/src/components/Common/SidebarItems.tsx

@@ -5,14 +5,15 @@ import { Link as RouterLink } from "@tanstack/react-router";
 import { useState } from "react";
 import { FaBars, FaRobot } from "react-icons/fa";
 import { FaLink } from "react-icons/fa";
-import { FiMap, FiSettings, FiUsers } from "react-icons/fi";
+import { FiCode, FiMap, FiSettings, FiUsers } from "react-icons/fi";
 
 import useAuth from "@/hooks/useAuth.ts";
 
 const items = [
   { icon: FaRobot, title: "Robots", path: "/robots" },
   { icon: FiMap, title: "Occupancy Maps", path: "/occupancy-maps" },
   { icon: FaLink, title: "Dashboard", path: "/dashboard" },
+  { icon: FiCode, title: "Widget Test", path: "/widget-customize" },
   { icon: FiSettings, title: "User Settings", path: "/settings" },
 ];
 

frontend/src/components/Dashboard/DashboardGrid.tsx

@@ -16,14 +16,15 @@ import { type Layout, Responsive, WidthProvider } from "react-grid-layout";
 
 import { getTabConfigApi, updateTabConfigApi } from "@/client/service/dashboard.api.ts";
 import RobotConnectionPanel from "@/components/Dashboard/RobotConnectionPanel.tsx";
-import { WidgetFactory } from "@/components/Dashboard/WidgetFactory.tsx";
+import { WidgetFactory } from "@/components/Dashboard/Widgets/WidgetFactory.tsx";
 import useAuth from "@/hooks/useAuth.ts";
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
 import { useMosaicWebRTCConnection } from "@/hooks/useMosaicWebRTCConnection.ts";
 import { useRobotInfo } from "@/hooks/useRobotInfo.ts";
 import { RobotConnector, type TabConfig, type WidgetConfig } from "@/mosaic";
 import { DASHBOARD_STORAGE_KEYS } from "@/utils";
+import { getWidgetDescriptor } from "@/widgets/_utils/widgetRegistry.ts";
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -83,29 +84,6 @@ export default function DashboardGrid({ tabId }: DashboardGridProps) {
   const editableWidgetsRef = useRef<WidgetConfig[]>([]);
   const isLayoutDirtyRef = useRef(false);
 
-  const { data: tabConfig, isPending: isConfigLoading } = useQuery({
-    queryKey: ["parsedDashboardTabConfig", tabId],
-    queryFn: async () => {
-      const tabConfigDto = await getTabConfigApi(tabId);
-      const widgets = JSON.parse(tabConfigDto.widgets).widgets as WidgetConfig[];
-      return {
-        id: tabConfigDto.id,
-        name: tabConfigDto.name,
-        widgets: widgets.map((widget) => {
-          return {
-            id: widget.id,
-            type: widget.type,
-            position: widget.position,
-            connectors: widget.connectors.map((connector) => {
-              return new RobotConnector(connector.robotId, connector.connectorId);
-            }),
-          };
-        }),
-      } as TabConfig;
-    },
-    enabled: !!user,
-  });
-
   const saveLayoutMutation = useMutation({
     mutationFn: async ({
       targetTabId,
@@ -142,6 +120,58 @@ export default function DashboardGrid({ tabId }: DashboardGridProps) {
     },
   });
 
+  const onUpdateWidgetParams = (widgetId: string, params?: any) => {
+    if (!tabConfig) {
+      return;
+    }
+
+    const newWidgets = editableWidgetsRef.current.map((widget) => {
+      if (widget.id !== widgetId) {
+        return widget;
+      }
+
+      return {
+        ...widget,
+        params: params,
+      };
+    });
+
+    saveLayoutMutation.mutate({
+      targetTabId: tabConfig.id,
+      widgets: newWidgets,
+    });
+  };
+
+  const { data: tabConfig, isPending: isConfigLoading } = useQuery({
+    queryKey: ["parsedDashboardTabConfig", tabId],
+    queryFn: async () => {
+      const tabConfigDto = await getTabConfigApi(tabId);
+      const widgets = JSON.parse(tabConfigDto.widgets).widgets as WidgetConfig[];
+      return {
+        id: tabConfigDto.id,
+        name: tabConfigDto.name,
+        widgets: widgets.map((widget) => {
+          return {
+            id: widget.id,
+            type: widget.type,
+            position: widget.position,
+            connectors: widget.connectors.map((connector) => {
+              return new RobotConnector(connector.robotId, connector.connectorId);
+            }),
+            params: {
+              ...getWidgetDescriptor(widget.type)?.getDefaultParams(),
+              ...widget.params,
+            },
+            onUpdateWidgetParams: (params?: any) => {
+              onUpdateWidgetParams(widget.id, params);
+            },
+          };
+        }),
+      } as TabConfig;
+    },
+    enabled: !!user,
+  });
+
   useEffect(() => {
     if (!tabConfig) {
       setEditableWidgets([]);
@@ -343,22 +373,21 @@ export default function DashboardGrid({ tabId }: DashboardGridProps) {
         onLayoutChange={handleLayoutChange}
         onDragStop={(layout) => handleLayoutCommit(layout)}
         onResizeStop={(layout) => handleLayoutCommit(layout)}
-        isDraggable={true}
-        isResizable={true}
-        margin={[16, 16]}
+        isDraggable
+        isResizable
         draggableHandle=".draggable-header"
       >
         {editableWidgets.map((widgetConfig) => (
           <Box
             key={widgetConfig.id}
             bg="white"
-            p={4}
-            borderRadius="md"
-            boxShadow="sm"
+            p={3}
+            paddingTop={1}
+            borderRadius="sm"
+            boxShadow="xs"
             height="100%"
             display="flex"
             flexDirection="column"
-            mb={4}
           >
             <WidgetFactory widgetConfig={widgetConfig} />
           </Box>

frontend/src/components/Dashboard/Widgets/ErrorWidget.tsx

@@ -0,0 +1,46 @@
+import { Box, Code, Flex, HStack, Icon, Text, VStack } from "@chakra-ui/react";
+import { LuTriangleAlert } from "react-icons/lu";
+
+export interface ErrorWidgetProps {
+  error: string;
+}
+
+export function ErrorWidget({ error }: ErrorWidgetProps) {
+  return (
+    <Flex h="100%" align="center" justify="center">
+      <Box w="100%" h="100%" bgGradient="linear(to-b, red.50, white)" p={4}>
+        <VStack align="start" gap={4} h="100%">
+          <HStack gap={2}>
+            <Flex
+              w="7"
+              h="7"
+              align="center"
+              justify="center"
+              borderRadius="full"
+              bg="red.100"
+              color="red.700"
+            >
+              <Icon as={LuTriangleAlert} boxSize={4} />
+            </Flex>
+            <VStack align="start" gap={0}>
+              <Text fontSize="sm" fontWeight="semibold" color="red.800">
+                Widget Error
+              </Text>
+              <Text fontSize="xs" color="gray.600">
+                This widget could not be loaded due to an error.
+              </Text>
+            </VStack>
+          </HStack>
+          <Box w="100%" p={3} border="1px solid" borderColor="red.200" borderRadius="md" bg="white">
+            <Text fontSize="xs" color="gray.500" mb={1}>
+              Error
+            </Text>
+            <Code fontSize="xs" color="red.700">
+              {error}
+            </Code>
+          </Box>
+        </VStack>
+      </Box>
+    </Flex>
+  );
+}