fix: 🐛 Corrige bug de requisição infinita das imagens do tixxi

prefeitura-rio · Nov 11, 2024 · 4187173 · 4187173
1 parent e839c28
commit 4187173
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 34 deletions.
diff --git a/src/app/(app)/vision-ai/components/map/components/context-menu/components/camera-info.tsx b/src/app/(app)/vision-ai/components/map/components/context-menu/components/camera-info.tsx
@@ -33,31 +33,30 @@ const InfoItem = ({
 export function CameraInfo({
   pickingInfo,
 }: {
-  pickingInfo: PickingInfo<Camera>
+  pickingInfo: PickingInfo<Camera> | undefined | null
 }) {
   const [isLoading, setIsLoading] = useState(true)
-  const { object } = pickingInfo
 
   useEffect(() => {
     setIsLoading(true)
-  }, [object])
+  }, [pickingInfo?.object])
 
   return (
-    <div className={cn('h-full w-full', object ? '' : 'hidden')}>
+    <div className={cn('h-full w-full', pickingInfo?.object ? '' : 'hidden')}>
       <h4>Câmera COR</h4>
       <Separator className="mb-4 mt-1 bg-secondary" />
       <div className="flex flex-col gap-4">
-        <InfoItem icon={Hash} label="ID" value={object?.id} />
+        <InfoItem icon={Hash} label="ID" value={pickingInfo?.object?.id} />
 
         <InfoItem
           icon={MapPin}
           label="Localidade"
-          value={`${object?.name} - ${object?.zone}`}
+          value={`${pickingInfo?.object?.name} - ${pickingInfo?.object?.zone}`}
         />
 
         <div className="relative flex aspect-video w-full items-center justify-center">
           <img
-            src={object?.streamingUrl}
+            src={pickingInfo?.object?.streamingUrl}
             alt="Streaming"
             className={cn(
               'aspect-video w-full rounded-lg bg-border',
@@ -72,7 +71,7 @@ export function CameraInfo({
               className="absolute bottom-1 right-1 h-6 p-1"
             >
               <Link
-                href={object?.streamingUrl || ''}
+                href={pickingInfo?.object?.streamingUrl || ''}
                 className="text-xs text-muted-foreground"
                 target="_blank"
               >

diff --git a/src/app/(app)/vision-ai/components/map/components/context-menu/index.tsx b/src/app/(app)/vision-ai/components/map/components/context-menu/index.tsx
@@ -16,27 +16,26 @@ interface ContextMenuProps {
   pickingInfo: PickingInfo | null
   open: boolean
   onOpenChange: (open: boolean) => void
+  setContextMenuPickingInfo: (pickingInfo: PickingInfo | null) => void
 }
 
 export function ContextMenu({
   pickingInfo,
   onOpenChange,
+  setContextMenuPickingInfo,
   open,
 }: ContextMenuProps) {
   const [cardRef, setCardRef] = useState<HTMLDivElement | null>(null)
-  if (!pickingInfo || !pickingInfo.object) return null
 
-  const { top, left } = calculateTooltipAbsolutePosition(
-    pickingInfo,
-    cardRef?.clientWidth,
-    cardRef?.clientHeight,
-  )
+  const { top, left } = pickingInfo
+    ? calculateTooltipAbsolutePosition(
+        pickingInfo,
+        cardRef?.clientWidth,
+        cardRef?.clientHeight,
+      )
+    : { top: 0, left: 0 }
 
   const Content = ({ pickingInfo }: { pickingInfo: PickingInfo }) => {
-    if (pickingInfo?.layer?.id === 'cameras') {
-      return <CameraInfo pickingInfo={pickingInfo} />
-    }
-
     if (pickingInfo?.layer?.id === 'AISP') {
       return <AISPInfo pickingInfo={pickingInfo} />
     }
@@ -50,12 +49,18 @@ export function ContextMenu({
     }
   }
 
+  function handleOnOpenChange(e: boolean) {
+    if (e === false) {
+      setContextMenuPickingInfo(null)
+      onOpenChange(false)
+    }
+    onOpenChange(true)
+  }
+
   return (
-    <Popover open={open} onOpenChange={onOpenChange} modal={false}>
-      {pickingInfo.layer?.id &&
-        ['cameras', 'AISP', 'CISP', 'schools'].includes(
-          pickingInfo.layer.id,
-        ) && (
+    <Popover open={open} onOpenChange={handleOnOpenChange} modal={false}>
+      {pickingInfo?.layer?.id &&
+        ['AISP', 'CISP', 'schools'].includes(pickingInfo.layer.id) && (
           <PopoverContent
             ref={(ref) => setCardRef(ref)}
             style={{
@@ -68,6 +73,18 @@ export function ContextMenu({
             <Content pickingInfo={pickingInfo} />
           </PopoverContent>
         )}
+      <PopoverContent
+        ref={(ref) => setCardRef(ref)}
+        style={{
+          position: 'absolute',
+          top,
+          left,
+          width: '400px',
+          display: pickingInfo ? 'block' : 'none',
+        }}
+      >
+        <CameraInfo pickingInfo={pickingInfo} />
+      </PopoverContent>
     </Popover>
   )
 }
diff --git a/src/app/(app)/vision-ai/components/map/index.tsx b/src/app/(app)/vision-ai/components/map/index.tsx
@@ -102,6 +102,7 @@ export default function Map({ mapboxAccessToken }: MapProps) {
         <ContextMenu
           open={openContextMenu}
           onOpenChange={setOpenContextMenu}
+          setContextMenuPickingInfo={setContextMenuPickingInfo}
           pickingInfo={contextMenuPickingInfo}
         />
       </DeckGL>

diff --git a/src/app/(app)/vision-ai/components/schemas/project-schema.ts b/src/app/(app)/vision-ai/components/schemas/project-schema.ts
@@ -11,8 +11,7 @@ export const projectFormSchema = z
     yolo_default_precision: z.coerce
       .number({ message: 'Obrigatório' })
       .min(0, { message: 'Deve ser entre 0 e 1' })
-      .max(1, { message: 'Deve ser entre 0 e 1' })
-      .optional(),
+      .max(1, { message: 'Deve ser entre 0 e 1' }),
     yolo_send_message: z.boolean().optional(),
     yolo_crowd_count: z
       .string()

diff --git a/src/app/(app)/vision-ai/new-project/page.tsx b/src/app/(app)/vision-ai/new-project/page.tsx
@@ -99,7 +99,6 @@ export default function Page() {
   useEffect(() => {
     async function initializeData() {
       getModelsAction().then((data) => {
-        console.log({ data })
         setModels(data)
         return data
       })
@@ -110,8 +109,6 @@ export default function Page() {
     initializeData()
   }, [])
 
-  console.log({ models })
-
   return (
     <form
       className="flex flex-col gap-2 h-screen max-h-screen px-4 py-2"

diff --git a/src/app/(app)/vision-ai/project/[id]/page.tsx b/src/app/(app)/vision-ai/project/[id]/page.tsx
@@ -109,10 +109,12 @@ export default function ProjectDetails() {
           'yolo_crowd_count',
           projectsResponse.model_config?.yolo_crowd_count,
         )
-        setValue(
-          'yolo_default_precision',
-          projectsResponse.model_config?.yolo_default_precision,
-        )
+        if (projectsResponse.model_config?.yolo_default_precision) {
+          setValue(
+            'yolo_default_precision',
+            projectsResponse.model_config.yolo_default_precision,
+          )
+        }
 
         if (projectsResponse.time_start) {
           setValue(

diff --git a/src/server-cache/project.ts b/src/server-cache/project.ts
@@ -21,7 +21,6 @@ export async function getProjectAction(id: string) {
   }
 
   const project: Project = await response.json()
-  console.log({ project })
 
   return project
 }
diff --git a/src/server-cache/projects.ts b/src/server-cache/projects.ts
@@ -21,7 +21,6 @@ export async function getProjectsAction() {
   }
 
   const projects: Project[] = await response.json()
-  console.log({ projects })
 
   return projects
 }