@searpent/react-image-annotate 2.0.29 → 2.0.31

package/Annotator/examplePhotos.js

@@ -771,10 +771,38 @@ var examplePhotos = [{
         "groupId": "6",
         "id": "346807506913198083"
       }]
+    }, {
+      "modelFamily": "metadata-engine",
+      "name": "metadata-engine",
+      "results": [{
+        "label": "metadata",
+        "score": 1,
+        "box": {
+          "X1": 0,
+          "X2": 1,
+          "Y1": 0,
+          "Y2": 1
+        },
+        "text": "[{\"key\":\"articleType\",\"value\":\"news\"}, {\"key\":\"section\",\"value\":\"editorial\"}]",
+        "groupId": "0",
+        "id": "aba453dd-f870-4510-ae40-a19eb52eb7d6"
+      }, {
+        "label": "metadata",
+        "score": 1,
+        "box": {
+          "X1": 0,
+          "X2": 1,
+          "Y1": 0,
+          "Y2": 1
+        },
+        "text": "[{\"key\":\"articleType\",\"value\":\"ads\"}, {\"key\":\"section\",\"value\":\"last page\"}]",
+        "groupId": "1",
+        "id": "aba453dd-f870-4510-ae40-a19eb52eb7d6"
+      }]
     }]
   },
   "metadata": [{
-    "key": "page",
+    "key": "pageNumber",
     "value": "1"
   }, {
     "key": "section",
@@ -1331,7 +1359,7 @@ var examplePhotos = [{
     }]
   },
   "metadata": [{
-    "key": "page",
+    "key": "pageNumber",
     "value": "2"
   }]
 }, {
@@ -2050,7 +2078,7 @@ var examplePhotos = [{
     }]
   },
   "metadata": [{
-    "key": "page",
+    "key": "pageNumber",
     "value": "3"
   }]
 }, {

package/Annotator/index.js

@@ -76,7 +76,8 @@ export var Annotator = function Annotator(_ref) {
       groupColors = _ref.groupColors,
       onRecalc = _ref.onRecalc,
       onSave = _ref.onSave,
-      metadata = _ref.metadata;
+      albumMetadata = _ref.albumMetadata,
+      metadataConfigs = _ref.metadataConfigs;
 
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(function (img) {
@@ -121,7 +122,8 @@ export var Annotator = function Annotator(_ref) {
   }, {
     imagesUpdatedAt: null,
     imagesSavedAt: null,
-    metadata: metadata
+    albumMetadata: albumMetadata,
+    metadataConfigs: metadataConfigs
   }))),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
@@ -194,16 +196,10 @@ export var Annotator = function Annotator(_ref) {
     }
   };
 
-  var handleMetadataChange = function handleMetadataChange(_ref3) {
-    var name = _ref3.name,
-        value = _ref3.value,
-        imageIndex = _ref3.imageIndex;
-    dispatchToReducer({
-      type: "UPDATE_METADATA",
-      name: name,
-      value: value,
-      imageIndex: imageIndex
-    });
+  var handleMetadataChange = function handleMetadataChange(params) {
+    dispatchToReducer(_objectSpread({
+      type: "UPDATE_METADATA"
+    }, params));
   };
 
   var handleAddGroup = function handleAddGroup(group) {
@@ -238,10 +234,10 @@ export var Annotator = function Annotator(_ref) {
   }, [onImagesChange, selectedImage]);
   if (!images && !videoSrc) return 'Missing required prop "images" or "videoSrc"';
 
-  var _ref4 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
-      _ref5 = _slicedToArray(_ref4, 2),
-      recalcActive = _ref5[0],
-      saveActive = _ref5[1];
+  var _ref3 = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false],
+      _ref4 = _slicedToArray(_ref3, 2),
+      recalcActive = _ref4[0],
+      saveActive = _ref4[1];
 
   return React.createElement(SettingsProvider, {
     clsColors: clsColors,

package/Annotator/reducers/general-reducer.js

@@ -670,10 +670,7 @@ export default (function (state, action) {
               var groupSelected = true;
 
               if (isNaN(groupId)) {
-                var _state5, _state5$images$state$;
-
-                var groupIds = regionsGroups((_state5 = state) === null || _state5 === void 0 ? void 0 : (_state5$images$state$ = _state5.images[state.selectedImage]) === null || _state5$images$state$ === void 0 ? void 0 : _state5$images$state$.regions);
-                groupId = nextGroupId(groupIds);
+                groupId = nextGroupId();
                 groupSelected = false;
               }
 
@@ -831,12 +828,12 @@ export default (function (state, action) {
         var _x2 = action.x,
             _y2 = action.y;
 
-        var _state6 = state,
-            _state6$mouseDownAt = _state6.mouseDownAt,
-            _mouseDownAt2 = _state6$mouseDownAt === void 0 ? {
+        var _state5 = state,
+            _state5$mouseDownAt = _state5.mouseDownAt,
+            _mouseDownAt2 = _state5$mouseDownAt === void 0 ? {
           x: _x2,
           y: _y2
-        } : _state6$mouseDownAt;
+        } : _state5$mouseDownAt;
 
         if (!state.mode) return state;
         state = setIn(state, ["mouseDownAt"], null);
@@ -1077,8 +1074,8 @@ export default (function (state, action) {
 
     case "CANCEL":
       {
-        var _state7 = state,
-            mode = _state7.mode;
+        var _state6 = state,
+            mode = _state6.mode;
 
         if (mode) {
           switch (mode.mode) {
@@ -1162,13 +1159,14 @@ export default (function (state, action) {
       {
         var name = action.name,
             value = action.value,
-            _imageIndex = action.imageIndex;
+            _imageIndex = action.imageIndex,
+            _groupId2 = action.groupId;
 
         if (isNaN(_imageIndex)) {
-          var _state$metadata;
+          var _state$albumMetadata;
 
-          // update global metadata
-          var metadataIndex = (_state$metadata = state.metadata) === null || _state$metadata === void 0 ? void 0 : _state$metadata.findIndex(function (mt) {
+          // update global/album metadata
+          var metadataIndex = (_state$albumMetadata = state.albumMetadata) === null || _state$albumMetadata === void 0 ? void 0 : _state$albumMetadata.findIndex(function (mt) {
             return mt.key === name;
           });
 
@@ -1177,20 +1175,50 @@ export default (function (state, action) {
             return;
           }
 
-          return setIn(state, ["metadata", metadataIndex], {
+          return setIn(state, ["albumMetadata", metadataIndex], {
             key: name,
             value: value
           });
         } else {
-          var _state$images$_imageI, _state$images$_imageI2;
+          var _state$images$_imageI3, _state$images$_imageI4;
+
+          // update metadata of article
+          if (!isNaN(_groupId2)) {
+            var _state$images$_imageI, _state$images$_imageI2;
+
+            var articleMetadataRegionIdx = (_state$images$_imageI = state.images[_imageIndex]) === null || _state$images$_imageI === void 0 ? void 0 : _state$images$_imageI.regions.findIndex(function (r) {
+              return r.cls === 'metadata' && r.groupId === _groupId2;
+            });
+
+            if (articleMetadataRegionIdx < 0) {
+              console.error("can't find article metadata for goupId \"".concat(_groupId2, "\""));
+              return;
+            }
 
-          // update local metadata of imageIndex
-          var _metadataIndex = (_state$images$_imageI = state.images[_imageIndex]) === null || _state$images$_imageI === void 0 ? void 0 : (_state$images$_imageI2 = _state$images$_imageI.metadata) === null || _state$images$_imageI2 === void 0 ? void 0 : _state$images$_imageI2.findIndex(function (mt) {
+            var articleRegionToUpdate = (_state$images$_imageI2 = state.images[_imageIndex]) === null || _state$images$_imageI2 === void 0 ? void 0 : _state$images$_imageI2.regions[articleMetadataRegionIdx];
+            var articleMetadata = JSON.parse(articleRegionToUpdate.text);
+            var toBeUpdatedMetadataIdx = articleMetadata.findIndex(function (i) {
+              return i.key === name;
+            });
+
+            if (toBeUpdatedMetadataIdx < 0) {
+              console.error("can't find metadata field in article metadata for key \"".concat(name, "\""));
+              return;
+            }
+
+            articleMetadata[toBeUpdatedMetadataIdx].value = value;
+            return setIn(state, ["images", _imageIndex, "regions", articleMetadataRegionIdx], _objectSpread({}, articleRegionToUpdate, {
+              text: JSON.stringify(articleMetadata)
+            }));
+          } // update metadata of image
+
+
+          var _metadataIndex = (_state$images$_imageI3 = state.images[_imageIndex]) === null || _state$images$_imageI3 === void 0 ? void 0 : (_state$images$_imageI4 = _state$images$_imageI3.metadata) === null || _state$images$_imageI4 === void 0 ? void 0 : _state$images$_imageI4.findIndex(function (mt) {
             return mt.key === name;
           });
 
           if (_metadataIndex < 0) {
-            console.error("can't find metadata by key \"".concat(name, "\""));
+            console.error("can't find photo metadata by key \"".concat(name, "\""));
             return;
           }
 

package/Editor/annotation-plugin/annotation.css

@@ -46,11 +46,9 @@
 }
 
 button.MuiButtonBase-root {
-  background-color: white !important;
   opacity: 1 !important;
 }
 
 button.MuiButtonBase-root.expanded {
-  background-color: white !important;
   opacity: 1 !important;
 }

package/GroupSelectorSidebarBox/index.js

@@ -7,7 +7,7 @@ import { grey } from "@mui/material/colors";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
-import isEqual from "lodash/isEqual";
+import uuidToHash from '../utils/uuid-to-hash';
 var theme = createTheme();
 var useStyles = makeStyles(function (theme) {
   return {
@@ -55,7 +55,7 @@ export var GroupSelectorSidebarBox = function GroupSelectorSidebarBox(_ref) {
         style: {
           color: color
         }
-      }, groupTitle),
+      }, uuidToHash(groupTitle)),
       secondary: groupSubtitle
     }));
   }))));

package/GroupsEditorSidebarBox/index.js

@@ -5,6 +5,7 @@ import FilterNoneIcon from '@mui/icons-material/FilterNone';
 import { styled } from "@mui/material/styles";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { grey } from "@mui/material/colors";
+import uuidToHash from "../utils/uuid-to-hash";
 var theme = createTheme();
 var GroupItemDiv = styled("div")(function (_ref) {
   var theme = _ref.theme;
@@ -22,7 +23,7 @@ var GroupItemDiv = styled("div")(function (_ref) {
 
 var GroupItem = function GroupItem(_ref2) {
   var group = _ref2.group;
-  return React.createElement(GroupItemDiv, null, group);
+  return React.createElement(GroupItemDiv, null, uuidToHash(group));
 };
 
 var GroupList = function GroupList(_ref3) {

package/MainLayout/RightSidebarItemsWrapper.js

@@ -11,7 +11,8 @@ function RightSidebarItemsWrapper(_ref) {
     }
   }, []);
   return React.createElement("div", {
-    ref: elementRef
+    ref: elementRef,
+    id: "right-sidebar"
   }, children);
 }
 

package/MainLayout/index.js

@@ -265,7 +265,10 @@ export var MainLayout = function MainLayout(_ref5) {
   var nextImageHasRegions = !nextImage || nextImage.regions && nextImage.regions.length > 0; // Editor.js blocks
 
   var selectedGroupId = ((_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.selectedGroupId) || null;
-  var editorBlocks = regionsToBlocks(((_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : _state$images$state$s2.regions) || []);
+  var extractionEngineRegions = (((_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : _state$images$state$s2.regions) || []).filter(function (r) {
+    return r.cls !== 'metadata';
+  });
+  var editorBlocks = regionsToBlocks(extractionEngineRegions);
   var blocks = editorBlocks.filter(function (i) {
     var _i$data;
 
@@ -290,15 +293,15 @@ export var MainLayout = function MainLayout(_ref5) {
   };
 
   var pages = state.images.map(function (i, idx) {
-    var _i$metadata;
+    var _i$metadata, _i$metadata$find;
 
     return {
       id: "".concat(idx),
       src: i.src,
       isActive: idx === state.selectedImage,
-      pageNumber: (i === null || i === void 0 ? void 0 : (_i$metadata = i.metadata) === null || _i$metadata === void 0 ? void 0 : _i$metadata.find(function (md) {
-        return md.key === "page";
-      }).value) || null,
+      pageNumber: (i === null || i === void 0 ? void 0 : (_i$metadata = i.metadata) === null || _i$metadata === void 0 ? void 0 : (_i$metadata$find = _i$metadata.find(function (md) {
+        return md.key === "pageNumber";
+      })) === null || _i$metadata$find === void 0 ? void 0 : _i$metadata$find.value) || null,
       metadata: i.metadata || []
     };
   });
@@ -340,7 +343,8 @@ export var MainLayout = function MainLayout(_ref5) {
     onSave: onSave,
     saveActive: saveActive,
     recalcActive: recalcActive,
-    onMetadataChange: onMetadataChange
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: state.metadataConfigs || []
   }), React.createElement(WorkspaceWrapper, null, React.createElement(Workspace, {
     style: {
       width: "auto"

package/MetadataEditorSidebarBox/index.js

@@ -8,21 +8,29 @@ var MetadataItemDiv = styled("div")(function (_ref) {
   var theme = _ref.theme;
   return {
     display: "flex",
-    flexDirection: "column",
-    marginBottom: "1rem",
+    flexDirection: "row",
+    marginBottom: ".5em",
     "& > label": {
       fontSize: "1rem",
-      marginBottom: ".5rem",
+      marginBottom: ".5em",
       textTransform: "capitalize"
+    },
+    label: {
+      width: "50%"
     }
   };
 });
 
 var MetadataItem = function MetadataItem(_ref2) {
+  var _metadataConfig$optio;
+
   var name = _ref2.name,
       value = _ref2.value,
       imageIndex = _ref2.imageIndex,
-      onChange = _ref2.onChange;
+      groupId = _ref2.groupId,
+      onChange = _ref2.onChange,
+      _ref2$metadataConfig = _ref2.metadataConfig,
+      metadataConfig = _ref2$metadataConfig === void 0 ? {} : _ref2$metadataConfig;
 
   var handleChange = function handleChange(e) {
     e.preventDefault();
@@ -32,25 +40,38 @@ var MetadataItem = function MetadataItem(_ref2) {
     onChange({
       name: name,
       value: value,
-      imageIndex: imageIndex
+      imageIndex: imageIndex,
+      groupId: groupId
     });
   };
 
   return React.createElement(MetadataItemDiv, null, React.createElement("label", {
     for: name
-  }, name), React.createElement("input", {
+  }, name), React.createElement("div", null, React.createElement("input", {
     type: "text",
     value: value,
     name: name,
-    onChange: handleChange
-  }));
+    onChange: handleChange,
+    id: name,
+    list: "".concat(name, "-list")
+  }), React.createElement("datalist", {
+    id: "".concat(name, "-list")
+  }, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
+    return React.createElement("option", {
+      key: opt,
+      value: opt
+    });
+  }))));
 };
 
 var MetadataList = function MetadataList(_ref3) {
   var title = _ref3.title,
       metadata = _ref3.metadata,
       imageIndex = _ref3.imageIndex,
-      onMetadataChange = _ref3.onMetadataChange;
+      onMetadataChange = _ref3.onMetadataChange,
+      _ref3$metadataConfigs = _ref3.metadataConfigs,
+      metadataConfigs = _ref3$metadataConfigs === void 0 ? [] : _ref3$metadataConfigs,
+      groupId = _ref3.groupId;
   return React.createElement("div", null, React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
     var key = _ref4.key,
         value = _ref4.value;
@@ -58,7 +79,11 @@ var MetadataList = function MetadataList(_ref3) {
       name: key,
       value: value,
       imageIndex: imageIndex,
-      onChange: onMetadataChange
+      groupId: groupId,
+      onChange: onMetadataChange,
+      metadataConfig: metadataConfigs.find(function (i) {
+        return i.key === key;
+      })
     });
   }));
 };
@@ -98,10 +123,28 @@ var DivContainer = styled("div")(function (_ref5) {
   };
 });
 export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
-  var _state$images$state$s;
+  var _state$images$state$s, _state$images$state$s2, _state$images$state$s3, _state$images$state$s4;
 
   var state = _ref6.state,
       onMetadataChange = _ref6.onMetadataChange;
+  var metadataConfigs = state.metadataConfigs || [];
+  var selectedPhotoMetadata = state === null || state === void 0 ? void 0 : (_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.metadata;
+  var selectedGroupId = state === null || state === void 0 ? void 0 : (_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : (_state$images$state$s3 = _state$images$state$s2.regions) === null || _state$images$state$s3 === void 0 ? void 0 : (_state$images$state$s4 = _state$images$state$s3.find(function (r) {
+    return r.highlighted === true;
+  })) === null || _state$images$state$s4 === void 0 ? void 0 : _state$images$state$s4.groupId;
+  var articleMetadata = [];
+
+  if (selectedGroupId !== undefined) {
+    var articleMetadataRegion = state === null || state === void 0 ? void 0 : state.images[state.selectedImage].regions.find(function (r) {
+      return r.cls === 'metadata' && "".concat(r.groupId) === selectedGroupId;
+    });
+
+    if (articleMetadataRegion) {
+      var metadata = JSON.parse(articleMetadataRegion.text);
+      articleMetadata = metadata;
+    }
+  }
+
   return React.createElement(ThemeProvider, {
     theme: theme
   }, React.createElement(SidebarBoxContainer, {
@@ -112,15 +155,35 @@ export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
       }
     }),
     expandedByDefault: true
-  }, React.createElement(DivContainer, null, React.createElement(MetadataList, {
-    title: "Global",
-    metadata: state.metadata,
-    onMetadataChange: onMetadataChange
-  }), (state === null || state === void 0 ? void 0 : (_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.metadata) && React.createElement(MetadataList, {
-    title: "Local",
-    metadata: state.images[state.selectedImage].metadata,
+  }, React.createElement(DivContainer, {
+    style: {
+      height: "600px"
+    }
+  }, articleMetadata.length > 0 && React.createElement(MetadataList, {
+    title: "Article",
+    metadata: articleMetadata,
+    imageIndex: state.selectedImage,
+    groupId: selectedGroupId,
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'photo_metadata-engine';
+    })
+  }), selectedPhotoMetadata && React.createElement(MetadataList, {
+    title: "Page",
+    metadata: selectedPhotoMetadata,
     imageIndex: state.selectedImage,
-    onMetadataChange: onMetadataChange
+    onMetadataChange: onMetadataChange,
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'photo';
+    })
+  }), React.createElement(MetadataList, {
+    title: "Issue",
+    metadata: state.albumMetadata,
+    onMetadataChange: onMetadataChange,
+    id: "metadata-album",
+    metadataConfigs: metadataConfigs.filter(function (mfc) {
+      return mfc.level === 'album';
+    })
   }))));
 };
 export default memo(MetadataEditorSidebarBox);

package/PageSelector/index.js

@@ -12,7 +12,9 @@ function PageThumbnail(_ref) {
       metadata = _ref.metadata,
       showMetadata = _ref.showMetadata,
       imageIndex = _ref.imageIndex,
-      onMetadataChange = _ref.onMetadataChange;
+      onMetadataChange = _ref.onMetadataChange,
+      _ref$metadataConfigs = _ref.metadataConfigs,
+      metadataConfigs = _ref$metadataConfigs === void 0 ? [] : _ref$metadataConfigs;
 
   var handleChange = function handleChange(e) {
     e.preventDefault();
@@ -49,6 +51,8 @@ function PageThumbnail(_ref) {
   }, pageNumber))), React.createElement("div", {
     className: "ps-page-thumbnail-metadata-wrapper"
   }, metadata.map(function (_ref2) {
+    var _metadataConfigs$find;
+
     var key = _ref2.key,
         value = _ref2.value;
     return React.createElement(React.Fragment, null, React.createElement("label", {
@@ -60,8 +64,19 @@ function PageThumbnail(_ref) {
       onChange: handleChange,
       onClick: function onClick(e) {
         return e.stopPropagation();
-      }
-    }));
+      },
+      id: key,
+      list: "".concat(key, "-list")
+    }), React.createElement("datalist", {
+      id: "".concat(key, "-list")
+    }, (_metadataConfigs$find = metadataConfigs.find(function (mcf) {
+      return mcf.key === key;
+    })) === null || _metadataConfigs$find === void 0 ? void 0 : _metadataConfigs$find.options.map(function (opt) {
+      return React.createElement("option", {
+        key: opt,
+        value: opt
+      });
+    })));
   })));
 }
 
@@ -72,7 +87,8 @@ function PageSelector(_ref3) {
       onSave = _ref3.onSave,
       recalcActive = _ref3.recalcActive,
       saveActive = _ref3.saveActive,
-      onMetadataChange = _ref3.onMetadataChange;
+      onMetadataChange = _ref3.onMetadataChange,
+      metadataConfigs = _ref3.metadataConfigs;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -121,7 +137,8 @@ function PageSelector(_ref3) {
       metadata: page.metadata,
       showMetadata: showMetadata,
       imageIndex: page.id,
-      onMetadataChange: onMetadataChange
+      onMetadataChange: onMetadataChange,
+      metadataConfigs: metadataConfigs
     });
   })));
 }

package/RegionLabel/index.js

@@ -14,6 +14,7 @@ import CheckIcon from "@mui/icons-material/Check";
 import TextField from "@mui/material/TextField";
 import Select from "react-select";
 import CreatableSelect from "react-select/creatable";
+import uuidToHash from '../utils/uuid-to-hash';
 import { asMutable } from "seamless-immutable";
 var theme = createTheme();
 var useStyles = makeStyles(function (theme) {
@@ -46,7 +47,7 @@ export var RegionLabel = function RegionLabel(_ref) {
   var allowedGroupsForSelect = allowedGroups ? allowedGroups.map(function (g) {
     return {
       value: "".concat(g),
-      label: "".concat(g)
+      label: uuidToHash(g)
     };
   }) : [];
   return React.createElement(ThemeProvider, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@searpent/react-image-annotate",
-  "version": "2.0.29",
+  "version": "2.0.31",
   "dependencies": {
     "@editorjs/editorjs": "^2.25.0",
     "@editorjs/paragraph": "^2.8.0",
@@ -20,8 +20,8 @@
     "material-survey": "^2.1.0",
     "mmgc1-cpp": "^1.0.50",
     "moment": "^2.23.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-editor-js": "^2.0.6",
     "react-full-screen": "^0.3.1",
     "react-hotkeys": "^2.0.0",
@@ -40,7 +40,8 @@
     "styled-components": "^5.2.1",
     "transformation-matrix-js": "^2.7.6",
     "use-event-callback": "^0.1.0",
-    "use-key-hook": "^1.3.0"
+    "use-key-hook": "^1.3.0",
+    "uuid": "^9.0.0"
   },
   "peerDependencies": {
     "react": "^17.0.0",

package/utils/next-group-id.js

@@ -1,13 +1,7 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { v4 as uuidv4 } from 'uuid';
 
-function nextGroupId(groupIds) {
-  var numberIds = _toConsumableArray(groupIds.filter(function (i) {
-    return !isNaN(i);
-  }).map(function (i) {
-    return parseInt(i);
-  })).sort();
-
-  return (numberIds[numberIds.length - 1] + 1).toString();
+function nextGroupId() {
+  return uuidv4();
 }
 
 export default nextGroupId;

package/utils/photosToImages.js

@@ -1,3 +1,5 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
 function labelAndTextFromResultText(resultText) {
   if (!resultText) {
     return {};
@@ -12,7 +14,7 @@ function labelAndTextFromResultText(resultText) {
   };
 }
 
-function modelResultsToRegions(modelResults) {
+function extractionEngineModelResultsToRegions(modelResults) {
   return modelResults.map(function (r) {
     var _labelAndTextFromResu = labelAndTextFromResultText(r.text),
         label = _labelAndTextFromResu.label,
@@ -21,7 +23,7 @@ function modelResultsToRegions(modelResults) {
     return {
       id: r.id,
       type: "box",
-      visible: true,
+      visible: r.label === 'metadata' ? false : true,
       cls: label,
       highlighted: false,
       groupHighlighted: false,
@@ -35,6 +37,37 @@ function modelResultsToRegions(modelResults) {
   });
 }
 
+function metadataEngineModelResultsToRegions(modelResults) {
+  return modelResults.map(function (r) {
+    return {
+      id: r.id,
+      type: "box",
+      visible: false,
+      cls: "metadata",
+      highlighted: false,
+      groupHighlighted: false,
+      x: r.box.X1,
+      y: r.box.Y1,
+      w: r.box.X2 - r.box.X1,
+      h: r.box.Y2 - r.box.Y1,
+      groupId: r.groupId,
+      text: r.text
+    };
+  });
+}
+
+function modelResultsToRegions(modelResults) {
+  var _modelResults$find, _modelResults$find2;
+
+  var extractionEngineRegions = extractionEngineModelResultsToRegions(((_modelResults$find = modelResults.find(function (mr) {
+    return mr.name === 'extraction-engine';
+  })) === null || _modelResults$find === void 0 ? void 0 : _modelResults$find.results) || []);
+  var metadataEngineRegions = metadataEngineModelResultsToRegions(((_modelResults$find2 = modelResults.find(function (mr) {
+    return mr.name === 'metadata-engine';
+  })) === null || _modelResults$find2 === void 0 ? void 0 : _modelResults$find2.results) || []);
+  return [].concat(_toConsumableArray(extractionEngineRegions), _toConsumableArray(metadataEngineRegions));
+}
+
 function photosToImages(photos) {
   return photos.map(function (photo) {
     return {
@@ -42,9 +75,7 @@ function photosToImages(photos) {
       src: photo.fullsize.key,
       thumbnail: photo.thumbnail.key,
       name: photo.fullsize.key,
-      regions: modelResultsToRegions(photo.modelResults.v1.filter(function (mr) {
-        return mr.name === 'extraction-engine';
-      })[0].results),
+      regions: modelResultsToRegions(photo.modelResults.v1),
       metadata: photo.metadata
     };
   });

package/utils/uuid-to-hash.js

@@ -0,0 +1,5 @@
+var uuidToHash = function uuidToHash(id) {
+  return id.slice(0, 8);
+};
+
+export default uuidToHash;