Fix position of the shape images to sent request to decoder

src/components/EncodeItem.js

@@ -1,10 +1,10 @@
-import React, { useContext, useState } from "react";
+import React, { useContext } from "react";
 import { MainContext } from "../contexts/MainContext";
 import { MapContext } from "../contexts/MapContext";
+import { BsViewList, BsTrash } from "react-icons/bs";
 
 export const EncodeItem = ({ encodeItem, index }) => {
   const { encodeItems, dispatchEncodeItems } = useContext(MainContext);
-
   const { map } = useContext(MapContext);
 
   const zoomTo = (encodeItem) => {
@@ -23,20 +23,37 @@ export const EncodeItem = ({ encodeItem, index }) => {
       payload: [...newEncodeItems],
     });
   };
+
+  const handleRemove = () => {
+    console.log(encodeItems);
+    const updatedEncodeItems = encodeItems.filter((_, i) => i !== index);
+    console.log(updatedEncodeItems);
+    // dispatchEncodeItems({
+    //   type: "CACHING_ENCODED",
+    //   payload: updatedEncodeItems,
+    // });
+  };
+
   return (
-    <img
-      src={encodeItem.canvas}
-      alt={`Encode Image ${index + 1}`}
-      className={`w-100 h-100 object-cover opacity-100 transition-opacity duration-500 ease-in-out transform hover:opacity-100 mb-2 ${
-        encodeItem.selected ? "border border-blue-300 border-2" : ""
-      }`}
-      style={{
-        width: "100px",
-        height: "100px",
-      }}
-      onClick={() => {
-        zoomTo(encodeItem);
-      }}
-    />
+    <div className="relative">
+      <img
+        src={encodeItem.canvas}
+        alt={`Encode Image ${index + 1}`}
+        className={`w-100 h-100 object-cover opacity-100 transition-opacity duration-500 ease-in-out transform hover:opacity-100 mb-2 ${
+          encodeItem.selected ? "border border-blue-300 border-2" : ""
+        }`}
+        style={{
+          width: "100px",
+          height: "100px",
+        }}
+        onClick={() => zoomTo(encodeItem)}
+      />
+      <button
+        className="absolute bottom-1 right-1 bg-red-500 hover:bg-red-600 text-white rounded w-4 h-4 cursor-pointer flex items-center justify-center"
+        onClick={handleRemove}
+      >
+        <BsTrash />
+      </button>
+    </div>
   );
 };

src/components/MenuEncodeItems.js

@@ -6,8 +6,8 @@ export const MenuEncodeItems = () => {
   return (
     <div className="mt-8">
       <div
-        className="absolute bg-white bg-opacity-50 p-1 right-0 top-0 bottom-20px scroll-smooth hover:scroll-auto overflow-auto overscroll-y-contain"
-        style={{ maxHeight: "100%", height: "100%" }}
+        className="absolute bg-white bg-opacity-50 p-1 right-0 top-0 scroll-smooth hover:scroll-auto overflow-auto overscroll-y-contain"
+        style={{ maxHeight: `calc(100% - 30px)`, height: `calc(100% - 30px)` }}
       >
         <div className="w-100">
           {encodeItems.map((encodeItem, index) => (

src/components/SegmentAM.js

@@ -84,6 +84,7 @@ export const SegmentAM = ({ setLoading }) => {
     }
     //=================== Need decode ===================
     try {
+      console.log(requestProps);
       const decodeRespJson = await getDecode(requestProps);
       const classMaxId = getMaxIdPerClass(items, activeClass);
       const features = sam2Geojson(

src/static/apis.json

@@ -1,6 +1,6 @@
 {
     "gpuEncodeAPI": "https://sas-gpu.ds.io",
-    "cpuDecodeAPI": "https://sas.ds.io",
+    "cpuDecodeAPI": "http://192.168.1.95:7080",
     "samAPI": "http://segme-gpuel-ekfao79wi98g-617785108.us-east-1.elb.amazonaws.com",
     "geojsonAPI": "https://bfokggy4ac.execute-api.us-east-1.amazonaws.com"
 }

src/store/indexedDB.js

@@ -40,7 +40,6 @@ export const getAllData = (db) => {
     const objectStore = transaction.objectStore("encodeiItems");
     const getAllRequest = objectStore.getAll();
     getAllRequest.onsuccess = (event) => {
-      console.log(event);
       const result = event.target.result;
       resolve(result);
     };

src/utils/featureCollection.js

@@ -72,6 +72,7 @@ export const sam2Geojson = (
   const features = [];
   for (let index = 0; index < ListGeoms.length; index++) {
     const strGeom = ListGeoms[index];
+    // console.log(strGeom)
     const geom = JSON.parse(strGeom);
     const properties = {
       class: activeClass.name,

src/utils/samApi.js

@@ -22,7 +22,7 @@ export const getPropertiesRequest = (map, pointsSelector) => {
   const crs = projection.getCode();
   const bbox = view.calculateExtent(map.getSize());
   const reqProps = {
-    image_shape: [imgWidth, imgHeight],
+    image_shape: [imgHeight, imgWidth],
     input_label: 1,
     input_point: coords[0],
     crs,