Integrating segment-anything-services to ds-annotate

.eslintrc

@@ -1,3 +1,9 @@
 {
-  "extends": ["react-app", "react-app/jest"]
-}
+  "extends": [
+    "react-app",
+    "react-app/jest"
+  ],
+  "rules": {
+    "comma-dangle": ["error", "always-multiline"]
+  }
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80
+}

README.md

@@ -1,6 +1,6 @@
 # ds-annotate
 
-Magic wand annotation tool for machine learning training data production.
+Magic wand and Segment Anything Model (SAM) annotation tool for machine learning training data.
 
 ## Installation and Usage
 The steps below will walk you through setting up your own instance of the project.

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "homepage": "http://devseed.com/ds-annotate/",
   "dependencies": {
+    "@emotion/react": "^11.10.6",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
@@ -13,22 +14,25 @@
     "@turf/turf": "^6.5.0",
     "@types/geojson": "^7946.0.10",
     "history": "^5.3.0",
+    "lodash": "^4.17.21",
     "ol": "^6.13.0",
     "ol-magic-wand": "^1.0.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
+    "react-notifications": "^1.7.4",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "eject": "react-scripts eject",
     "deploy": "yarn build && gh-pages -d build",
-    "lint": "eslint src",
+    "lint": "npx eslint . && yarn run prettier",
     "prettier": "prettier --write 'src/**/*.js'",
     "test": "npm run lint && react-scripts test --env=jsdom --watchAll=false --testMatch **/src/**/*.test.js"
   },

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Magic wand and Segment Anything Model (SAM) annotation tool for machine learning training data."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

src/App.js

@@ -3,17 +3,20 @@ import React from "react";
 import { Sidebar } from "./components/Sidebar";
 import { MapWrapper } from "./components/map";
 import { Modal } from "./components/Modal";
+import "react-notifications/lib/notifications.css";
+import { NotificationContainer } from "react-notifications";
 
 function App() {
   return (
-    <div className="flex h-screen ">
-      <div className="w-1/6" aria-label="Sidebar">
-        <Sidebar></Sidebar>
+    <div className="flex h-screen">
+      <div className="w-64 bg-gray-2000" aria-label="Sidebar">
+        <Sidebar />
       </div>
-      <div className="w-5/6">
+      <div className="flex-1 bg-gray-100">
         <MapWrapper />
       </div>
-      <Modal></Modal>
+      <Modal />
+      <NotificationContainer />
     </div>
   );
 }

src/components/ClassObj.js

@@ -25,15 +25,13 @@ export const ClassObj = ({ classProps, setOpenMenu }) => {
       }}
       onClick={() => {
         setActiveClass(classProps);
-        setOpenMenu(false);
+        // setOpenMenu(false);
       }}
     >
-      <span className="text-1xl block float-left">
+      <span className="text-xs block float-left">
         <BsSquareFill style={{ color: classProps.color }}></BsSquareFill>
       </span>
-      <span className={`font-medium flex-1 duration-200`}>
-        {classProps.name}
-      </span>
+      <span className={`flex-1 duration-200`}>{classProps.name}</span>
     </li>
   );
 };

src/components/DownloadData.js

@@ -1,20 +1,16 @@
 import React, { useContext } from "react";
 import { MainContext } from "../contexts/MainContext";
-import { BsDownload } from "react-icons/bs";
 
 import { downloadGeojsonFile, downloadInJOSM } from "../utils/utils";
-import { olFeatures2geojson } from "./../utils/featureCollection";
+import { olFeatures2geojson } from "./../utils/convert";
 
 export const DownloadData = ({ classProps }) => {
   const { items, activeProject } = useContext(MainContext);
 
   const downloadGeojson = () => {
     const geojson = JSON.stringify(olFeatures2geojson(items));
-    const fileName = `${activeProject.properties.name.replace(
-      /\s/g,
-      "_"
-    )}.geojson`;
-    downloadGeojsonFile(geojson, fileName);
+    const projectName = activeProject.properties.name.replace(/\s/g, "_");
+    downloadGeojsonFile(geojson, `${projectName}.geojson`);
   };
 
   const josm = () => {
@@ -23,28 +19,18 @@ export const DownloadData = ({ classProps }) => {
   };
 
   return (
-    <div className="flex flex-row mt-3">
+    <div className="grid grid-cols-2 gap-2">
       <button
-        type="button"
-        className="custom_button_2 mr-1"
-        title="Load data on JOSM"
-        onClick={() => {
-          josm();
-        }}
+        className="custom_button"
+        onClick={() => downloadGeojson()}
       >
-        <BsDownload className="w-3 mt-1 mr-2"></BsDownload>
-        JOSM
+        Download GeoJSON
       </button>
       <button
-        type="button"
-        className="custom_button_2"
-        onClick={() => {
-          downloadGeojson();
-        }}
-        title="Download data as GeoJSON"
+        className="custom_button"
+        onClick={() => josm()}
       >
-        <BsDownload className="w-3 mt-1 mr-2"></BsDownload>
-        GeoJson
+        Export to JOSM
       </button>
     </div>
   );

src/components/EncodeItem.js

@@ -0,0 +1,65 @@
+import React, { useContext } from "react";
+import { MainContext } from "../contexts/MainContext";
+import { MapContext } from "../contexts/MapContext";
+import { BsTrash } from "react-icons/bs";
+import { storeEncodeItems } from "./../store/indexedDB";
+
+export const EncodeItem = ({ encodeItem, index }) => {
+  const { encodeItems, dispatchEncodeItems } = useContext(MainContext);
+  const { map } = useContext(MapContext);
+
+  const zoomTo = (encodeItem) => {
+    if (!map) return;
+    const { bbox, zoom } = encodeItem;
+    map.getView().fit(bbox);
+    map.getView().setZoom(zoom);
+    const newEncodeItems = encodeItems.map((e) => {
+      e.selected = false;
+      return e;
+    });
+    encodeItem.selected = true;
+    newEncodeItems[index] = encodeItem;
+    dispatchEncodeItems({
+      type: "CACHING_ENCODED",
+      payload: [...newEncodeItems],
+    });
+  };
+
+  const handleRemoveEncodeItem = async (encodeItem) => {
+    const updatedEncodeItems = encodeItems.filter((item, i) => {
+      return item.id !== encodeItem.id;
+    });
+    dispatchEncodeItems({
+      type: "CACHING_ENCODED",
+      payload: updatedEncodeItems,
+    });
+    try {
+      storeEncodeItems.deleteData(encodeItem.id);
+    } catch (error) {
+      console.error("Failed to delete encode item:", error);
+    }
+  };
+
+  return (
+    <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 w-4 h-4 text-white rounded flex items-center justify-center"
+        onClick={() => handleRemoveEncodeItem(encodeItem)}
+      >
+        <BsTrash className="fill-current w-3 h-3 cursor-pointer" />
+      </button>
+    </div>
+  );
+};

src/components/Item.js

@@ -2,17 +2,22 @@ import { useContext } from "react";
 
 import { BsTrash } from "react-icons/bs";
 import { MainContext } from "./../contexts/MainContext";
+import { storeItems } from "./../store/indexedDB";
 
-const Item = ({ item }) => {
+const Item = ({ item, index }) => {
   const { items, dispatchSetItems, dispatchSetHighlightedItem } =
     useContext(MainContext);
 
   const deleteItem = (item) => {
-    const newItems = items.filter((i) => i.ol_uid !== item.ol_uid);
+    const newItems = items.filter((i) => {
+      return i.values_.id !== item.values_.id;
+    });
     dispatchSetItems({
       type: "SET_ITEMS",
       payload: newItems,
     });
+    // Delete from DB
+    storeItems.deleteData(item.values_.id);
   };
 
   const zoomToItem = (item) => {
@@ -24,7 +29,7 @@ const Item = ({ item }) => {
 
   return (
     <div
-      className="inline-flex justify-center items-center pr-2 pl-2 ml-3 text-sm font-medium rounded-full"
+      className="inline-flex justify-center items-center pr-1 pl-1 ml-1 text-xs font-medium rounded-full cursor-pointer"
       style={{ background: `${item.values_.color}` }}
       onMouseEnter={() => {
         zoomToItem(item);
@@ -34,14 +39,14 @@ const Item = ({ item }) => {
       }}
     >
       <BsTrash
-        className="fill-current w-3 h-3 mr-2 cursor-pointer"
+        className="fill-current w-3 h-3 mr-1 cursor-pointer"
         onClick={() => {
           deleteItem(item);
           zoomToItem(null);
         }}
         title="Delete item"
       ></BsTrash>
-      <span>{item.values_.id}</span>
+      <span>{index}</span>
     </div>
   );
 };

src/components/MenuActions.js

@@ -1,11 +1,8 @@
 import React, { useContext, useCallback } from "react";
 import { MainContext } from "../contexts/MainContext";
-import { BsViewList } from "react-icons/bs";
-import { unionPolygons } from "../utils/transformation";
-import {
-  olFeatures2geojson,
-  geojson2olFeatures,
-} from "../utils/featureCollection";
+import { mergePolygonClass } from "../utils/transformation";
+import { olFeatures2Features, features2olFeatures } from "../utils/convert";
+import { storeItems } from "./../store/indexedDB";
 
 export const MenuActions = () => {
   const { items, dispatchSetItems } = useContext(MainContext);
@@ -20,36 +17,33 @@ export const MenuActions = () => {
     [dispatchSetItems]
   );
 
-  const mergPolygons = () => {
-    const fc = olFeatures2geojson(items);
-    const mergedFeatures = unionPolygons(fc.features);
-    const mergedItems = geojson2olFeatures(mergedFeatures);
+  const mergePolygons = () => {
+    const features = olFeatures2Features(items);
+    const mergedFeatures = mergePolygonClass(features);
+    const mergedItems = features2olFeatures(mergedFeatures);
+
     setItems(mergedItems);
+    // Save merged features in DB
+    storeItems.deleteAllData();
+    mergedFeatures.forEach((item) => {
+      storeItems.addData({ ...item, id: item.properties.id });
+    });
   };
 
   document.addEventListener("keydown", (e) => {
     // Merge polygonos
     if (e.key === "m") {
-      mergPolygons();
+      mergePolygons();
     }
   });
   return (
     <div>
-      <div className="menuHeader">
-        <BsViewList></BsViewList>
-        <span className=" text-base font-medium flex-1 duration-200 false">
-          Polygon Action
-        </span>
-      </div>
-
       <div className="flex flex-row mt-3">
         <button
           className="custom_button"
-          onClick={() => {
-            mergPolygons();
-          }}
+          onClick={() => mergePolygons()}
         >
-          Merge (M)
+          Merge polygons (M)
         </button>
       </div>
     </div>

src/components/MenuClass.js

@@ -3,7 +3,7 @@ import { MainContext } from "../contexts/MainContext";
 import { BsViewList, BsChevronDown } from "react-icons/bs";
 import { ClassObj } from "./ClassObj";
 
-import { getClassLayers } from "../utils/featureCollection";
+import { getClassLayers } from "../utils/convert";
 
 export const MenuClass = () => {
   const { activeProject, activeClass } = useContext(MainContext);
@@ -25,19 +25,19 @@ export const MenuClass = () => {
         }}
       >
         <BsViewList></BsViewList>
-        <span className=" text-base font-medium flex-1 duration-200 ">
+        <span className="text-sm text-base font-small flex-1 duration-200 false">
           Classes
         </span>
         <span
-          className="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full pr-4 pl-4"
+          className="inline-flex justify-center items-center px-2 ml-3 text-xs font-medium text-gray-800 bg-gray-200 rounded-full pr-4 pl-4"
           style={{ background: `${activeClass ? activeClass.color : ""}` }}
         >
           {activeClass ? activeClass.name : ""}
         </span>
         <BsChevronDown></BsChevronDown>
       </div>
       {openMenu && (
-        <ul className="pt-2">
+        <ul className="pt-1">
           {classes.map((classProps, index) => (
             <ClassObj
               key={index}