Properly fix issues with CustomRegion

- Proper relations to other parts of LSF like `object` and types
- Remove some excess functions and fields breaking the LSF
- Add missing AreaMixin

Author: hlomzik

web/libs/editor/src/components/App/App.jsx

@@ -15,10 +15,12 @@ import { TreeValidation } from "../TreeValidation/TreeValidation";
 /**
  * Tags
  */
+// Custom tags should be registered first so all MST models will use their parts like regions and results
+import "../../tags/custom";
+
 import "../../tags/object";
 import "../../tags/control";
 import "../../tags/visual";
-import "../../tags/custom";
 
 /**
  * Utils and common components

web/libs/editor/src/tags/custom/Custom.jsx

@@ -7,7 +7,6 @@ import ControlBase from "../control/Base";
 import ClassificationBase from "../control/ClassificationBase";
 
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
-import { CustomRegionModel } from "./CustomRegion";
 import { errorBuilder } from "../../core/DataValidator/ConfigValidator";
 import { parseValue, tryToParseJSON } from "../../utils/data";
 
@@ -26,7 +25,6 @@ const TagAttrs = types.model("CustomIntrefaceAttrs", {
 const Model = types
   .model({
     type: "custominterface",
-    regions: types.array(CustomRegionModel),
     globalState: types.optional(types.frozen(), {}),
     globalMetadata: types.optional(types.array(types.frozen()), []),
   })
@@ -124,7 +122,8 @@ const Model = types
       }
     },
     createRegion(value, pid) {
-      const r = CustomRegionModel.create({ pid, _value: value });
+      return;
+      // const r = CustomRegionModel.create({ pid, _value: value });
       self.regions.push(r);
       // create a simple area/result in the annotation to integrate with store
       try {

web/libs/editor/src/tags/custom/CustomRegion.js

@@ -2,34 +2,35 @@ import { observer } from "mobx-react";
 import { types, getParent } from "mobx-state-tree";
 
 import NormalizationMixin from "../../mixins/Normalization";
+import { AreaMixin } from "../../mixins/AreaMixin";
 import RegionsMixin from "../../mixins/Regions";
 import { guidGenerator } from "../../core/Helpers";
 
 import { HtxTextBox } from "../../components/HtxTextBox/HtxTextBox";
 import { cn } from "../../utils/bem";
+import { CustomInterfaceModel } from "./Custom";
+import { IconGrid } from "@humansignal/icons";
 
 const Model = types
   .model("CustomRegionModel", {
-    id: types.optional(types.identifier, guidGenerator),
-    pid: types.optional(types.string, guidGenerator),
-    type: "customregion",
+    type: "custominterface",
+    object: types.late(() => types.reference(CustomInterfaceModel)),
 
     // Main payload for this region; matches result type name
     custominterface: types.frozen(),
 
     _value: types.frozen(),
     // states: types.array(types.union(ChoicesModel)),
   })
-  .volatile(() => ({
-    classification: true,
-    perRegionTags: [],
-    results: [],
-    selected: false,
-  }))
   .views((self) => ({
     get parent() {
       return getParent(self);
     },
+
+    get noLabelView() {
+      return "Custom region";
+    },
+
     getRegionElement() {
       return document.querySelector(`#CustomRegion-${self.id}`);
     },
@@ -58,17 +59,9 @@ const Model = types
     deleteRegion() {
       self.parent.remove(self);
     },
-
-    selectRegion() {
-      self.selected = true;
-    },
-
-    afterUnselectRegion() {
-      self.selected = false;
-    },
   }));
 
-const CustomRegionModel = types.compose("CustomRegionModel", RegionsMixin, NormalizationMixin, Model);
+const CustomRegionModel = types.compose("CustomRegionModel", RegionsMixin, AreaMixin, NormalizationMixin, Model);
 
 const HtxCustomRegionView = ({ item, onFocus }) => {
   const classes = [styles.mark];
@@ -139,6 +132,17 @@ const HtxCustomRegionView = ({ item, onFocus }) => {
 
 const HtxCustomRegion = observer(HtxCustomRegionView);
 
+// required for NodeViews
+CustomRegionModel.nodeView = {
+  name: "CustomRegion",
+  icon: IconGrid,
+  fullContent: (node) => (
+    <span style={{ color: "#5a5a5a" }}>
+      {JSON.stringify(node.custominterface)}
+    </span>
+  ),
+};
+
 export { CustomRegionModel, HtxCustomRegion };
 
 

web/libs/editor/src/tags/custom/index.ts

@@ -7,12 +7,12 @@ Registry.addCustomTag("CustomInterface", {
   tag: "CustomInterface",
   description: "Embed custom React UI with stateful results",
   isObject: true,
-  model: (CustomInterfaceModel as unknown) as { name: string },
-  view: (CustomInterfaceComponent as unknown) as any,
+  model: CustomInterfaceModel,
+  view: CustomInterfaceComponent,
   result: types.frozen(),
   resultName: "custominterface",
   detector: (sn: any) => Boolean(sn?.value?.custominterface || sn?.custominterface),
-  region: CustomRegionModel as unknown as { name: string },
+  region: CustomRegionModel as any,
 });
 
 export {};