@@ -31,9 +27,9 @@ const Node = observer(({ node }) => {
if (getType(node).name === "AudioRegionModel") {
return (
-
+
- Audio {node.start.toFixed(2)} - {node.end.toFixed(2)}
+ Audio {node.start.toFixed(2)} - {node.end.toFixed(2)}
);
@@ -42,9 +38,9 @@ const Node = observer(({ node }) => {
if (getType(node).name === "TextAreaRegionModel") {
return (
-
+
- Input {node._value}
+ Input {node._value}
);
@@ -55,9 +51,9 @@ const Node = observer(({ node }) => {
const y = node.height * node.scaleY;
return (
-
+
- Rectangle {w.toFixed(2)} x {y.toFixed(2)}
+ Rectangle {w.toFixed(2)} x {y.toFixed(2)}
);
@@ -66,17 +62,28 @@ const Node = observer(({ node }) => {
if (getType(node).name === "PolygonRegionModel") {
return (
-
+
Polygon
);
}
+
+ if (getType(node).name === "KeyPointRegionModel") {
+ return (
+
+
+
+ KeyPoint
+
+
+ );
+ }
});
const NodeMinimal = ({ node }) => {
- if (getType(node).name == "TextRegionModel") {
+ if (getType(node).name === "TextRegionModel") {
return (
Text
@@ -84,7 +91,7 @@ const NodeMinimal = ({ node }) => {
);
}
- if (getType(node).name == "RectRegionModel") {
+ if (getType(node).name === "RectRegionModel") {
return (
@@ -93,7 +100,7 @@ const NodeMinimal = ({ node }) => {
);
}
- if (getType(node).name == "AudioRegionModel") {
+ if (getType(node).name === "AudioRegionModel") {
return (
@@ -102,7 +109,7 @@ const NodeMinimal = ({ node }) => {
);
}
- if (getType(node).name == "TextAreaRegionModel") {
+ if (getType(node).name === "TextAreaRegionModel") {
return (
@@ -111,7 +118,7 @@ const NodeMinimal = ({ node }) => {
);
}
- if (getType(node).name == "PolygonRegionModel") {
+ if (getType(node).name === "PolygonRegionModel") {
return (
@@ -119,6 +126,15 @@ const NodeMinimal = ({ node }) => {
);
}
+
+ if (getType(node).name === "KeyPointRegionModel") {
+ return (
+
+
+ KeyPoint
+
+ );
+ }
};
export { Node, NodeMinimal };
diff --git a/src/components/Node/Node.module.scss b/src/components/Node/Node.module.scss
new file mode 100644
index 000000000000..18e5dedd93da
--- /dev/null
+++ b/src/components/Node/Node.module.scss
@@ -0,0 +1,6 @@
+.node {
+ color: #262626;
+ &:hover {
+ color: #1890ff;
+ }
+}
diff --git a/src/components/Relations/Relations.js b/src/components/Relations/Relations.js
index d44b3a6be53a..629075694217 100644
--- a/src/components/Relations/Relations.js
+++ b/src/components/Relations/Relations.js
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
import { isValidReference } from "mobx-state-tree";
import { Icon } from "antd";
-import { NodeMinimal } from "../Node";
+import { NodeMinimal } from "../Node/Node";
import styles from "./Relations.module.scss";
/**
diff --git a/src/env/development.js b/src/env/development.js
index 31f5eed43905..369838be2d33 100644
--- a/src/env/development.js
+++ b/src/env/development.js
@@ -3,12 +3,15 @@ import { AudioClassification } from "../examples/audio_classification";
import { AudioRegions } from "../examples/audio_regions";
import { ChatbotAnalysis } from "../examples/chatbot_analysis";
import { ImageBbox } from "../examples/image_bbox";
+import { ImagePolygons } from "../examples/image_polygons";
+import { ImageKeyPoint } from "../examples/image_keypoints";
+import { ImageMultilabel } from "../examples/image_multilabel";
import { NamedEntity } from "../examples/named_entity";
import { References } from "../examples/references";
import { TranscribeAudio } from "../examples/transcribe_audio";
/**
- * Choose data type
+ * Choose labeling scheme
*/
let dataType = Sentiment;
diff --git a/src/interfaces/control/KeyPoint.js b/src/interfaces/control/KeyPoint.js
new file mode 100644
index 000000000000..e186245645cd
--- /dev/null
+++ b/src/interfaces/control/KeyPoint.js
@@ -0,0 +1,68 @@
+import React, { Component } from "react";
+
+import { observer, inject } from "mobx-react";
+import { types, getParentOfType, getRoot } from "mobx-state-tree";
+import { Button, Icon } from "semantic-ui-react";
+
+import Registry from "../../core/Registry";
+import { isHtx, cloneNode } from "../../core/Helpers";
+import { guidGenerator } from "../../core/Helpers";
+import { KeyPointRegionModel } from "../object/KeyPointRegion";
+
+/**
+ * KeyPoint tag
+ * KeyPoint is used to add a keypoint to an image
+ * @example
+ *
+ *
+ *
+ *
+ * @name KeyPoint
+ * @param {string} name name of the element
+ * @param {string} toname name of the image to label
+ * @param {float=} [opacity=0.6] opacity of keypoint
+ * @param {string=} fillColor keypoint fill color, default is transparent
+ * @param {number=} [strokeWidth=1] width of the stroke
+ */
+const TagAttrs = types.model({
+ name: types.maybeNull(types.string),
+ toname: types.maybeNull(types.string),
+
+ opacity: types.optional(types.string, "0.9"),
+ fillcolor: types.optional(types.string, "#8bad00"),
+
+ strokewidth: types.optional(types.string, "1"),
+});
+
+const Model = types
+ .model({
+ id: types.identifier,
+ type: "keypoint",
+ })
+ .views(self => ({
+ get hasStates() {
+ const states = self.states();
+ return states && states.length > 0;
+ },
+
+ get completion() {
+ return getRoot(self).completionStore.selected;
+ },
+ }))
+ .actions(self => ({
+ fromStateJSON(obj) {},
+ }));
+
+const KeyPointModel = types.compose(
+ "KeyPointModel",
+ TagAttrs,
+ Model,
+);
+
+const HtxView = () => {
+ return null;
+};
+
+Registry.addTag("keypoint", KeyPointModel, HtxView);
+
+export { HtxView, KeyPointModel };
diff --git a/src/interfaces/control/KeyPointLabels.js b/src/interfaces/control/KeyPointLabels.js
new file mode 100644
index 000000000000..d2c9b272f52d
--- /dev/null
+++ b/src/interfaces/control/KeyPointLabels.js
@@ -0,0 +1,97 @@
+import React, { Component } from "react";
+
+import { observer } from "mobx-react";
+import { types, getRoot } from "mobx-state-tree";
+
+import Types from "../../core/Types";
+import Registry from "../../core/Registry";
+
+import { guidGenerator } from "../../core/Helpers";
+import SelectedModelMixin from "../mixins/SelectedModel";
+
+import { HtxLabels, LabelsModel } from "./Labels";
+import { KeyPointModel } from "./KeyPoint";
+
+/**
+ * KeyPointLabels tag
+ * KeyPointLabels add labeled keypoints
+ * @example
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * @name KeyPointLabels
+ * @param {string} name name of the element
+ * @param {string} toname name of the image to label
+ * @param {float=} [opacity=0.6] opacity of keypoint
+ * @param {string=} fillColor keypoint fill color, default is transparent
+ * @param {number=} [strokeWidth=1] width of the stroke
+ */
+const TagAttrs = types.model({
+ name: types.maybeNull(types.string),
+ toname: types.maybeNull(types.string),
+
+ opacity: types.optional(types.string, "0.9"),
+ fillcolor: types.maybeNull(types.string),
+
+ strokewidth: types.optional(types.string, "1"),
+});
+
+const Model = types
+ .model("KeyPointLabelesModel", {
+ id: types.identifier,
+ pid: types.optional(types.string, guidGenerator),
+ type: "keypointlabels",
+ children: Types.unionArray(["labels", "label", "choice"]),
+ })
+ .views(self => ({
+ get hasStates() {
+ const states = self.states();
+ return states && states.length > 0;
+ },
+
+ get completion() {
+ return getRoot(self).completionStore.selected;
+ },
+ }))
+ .actions(self => ({
+ fromStateJSON(obj, fromModel) {
+ self.unselectAll();
+
+ if (!obj.value.keypointlabels) throw new Error("No labels param");
+
+ if (obj.id) self.pid = obj.id;
+
+ obj.value.keypointlabels.forEach(l => {
+ const label = self.findLabel(l);
+
+ if (!label) throw new Error("No label " + obj.value.label);
+
+ label.markSelected(true);
+ });
+ },
+ }));
+
+const Composition = types.compose(
+ LabelsModel,
+ KeyPointModel,
+ TagAttrs,
+ Model,
+ SelectedModelMixin,
+);
+
+const KeyPointLabelsModel = types.compose(
+ "KeyPointLabelsModel",
+ Composition,
+);
+
+const HtxKeyPointLabels = observer(({ item }) => {
+ return ;
+});
+
+Registry.addTag("keypointlabels", KeyPointLabelsModel, HtxKeyPointLabels);
+
+export { HtxKeyPointLabels, KeyPointLabelsModel };
diff --git a/src/interfaces/control/Label.js b/src/interfaces/control/Label.js
index 2824554547d4..ce2dbd5abe5e 100644
--- a/src/interfaces/control/Label.js
+++ b/src/interfaces/control/Label.js
@@ -53,7 +53,12 @@ const Model = types
toggleSelected() {
const sel = self.selected;
- const labels = Types.getParentOfTypeString(self, ["LabelsModel", "RectangleLabelsModel", "PolygonLabelsModel"]);
+ const labels = Types.getParentOfTypeString(self, [
+ "LabelsModel",
+ "RectangleLabelsModel",
+ "PolygonLabelsModel",
+ "KeyPointLabelsModel",
+ ]);
labels.shouldBeUnselected && labels.unselectAll();
if (labels.shouldBeUnselected && sel === true) {
diff --git a/src/interfaces/control/Labels.js b/src/interfaces/control/Labels.js
index bb9f716e0d2e..920a493eb901 100644
--- a/src/interfaces/control/Labels.js
+++ b/src/interfaces/control/Labels.js
@@ -40,6 +40,7 @@ const Model = types
id: types.optional(types.identifier, guidGenerator),
pid: types.optional(types.string, guidGenerator),
type: "labels",
+ showinline: types.optional(types.boolean, true),
children: Types.unionArray(["labels", "label", "choices", "choice"]),
})
.views(self => ({
@@ -53,10 +54,18 @@ const Model = types
const sel = self.children.find(c => c.selected === true);
return sel && sel.background;
},
+ /**
+ * Usage check of selected labels before send completion to server
+ */
+ beforeSend() {
+ const names = self.getSelectedNames();
+ if (names && self.type === "labels") {
+ self.unselectAll();
+ }
+ },
toStateJSON() {
const names = self.getSelectedNames();
-
if (names && names.length) {
return {
id: self.pid,
@@ -94,20 +103,22 @@ const LabelsModel = types.compose(
);
const HtxLabels = observer(({ item }) => {
- return (
-
- {Tree.renderChildren(item)}
-
- );
+ const style = {
+ marginTop: "1em",
+ marginBottom: "1em",
+ display: "flex",
+ justifyContent: "flex-start",
+ alignItems: "center",
+ flexFlow: "wrap",
+ };
+
+ if (item.showinline == "false") {
+ style["flexDirection"] = "column";
+ style["alignItems"] = "flex-start";
+ style["marginTop"] = "0";
+ }
+
+ return {Tree.renderChildren(item)}
;
});
Registry.addTag("labels", LabelsModel, HtxLabels);
diff --git a/src/interfaces/control/Ranker.js b/src/interfaces/control/Ranker.js
index f36e766a77e2..09cfa6c9ec29 100644
--- a/src/interfaces/control/Ranker.js
+++ b/src/interfaces/control/Ranker.js
@@ -52,8 +52,8 @@ const TagAttrs = types.model({
// elementvalue: types.maybeNull(types.string),
elementtag: types.optional(types.string, "Text"),
- ranked: types.optional(types.string, "true"),
- sortable: types.optional(types.string, "true"),
+ ranked: types.optional(types.boolean, true),
+ sortable: types.optional(types.boolean, true),
sortedhighlightcolor: types.maybeNull(types.string),
diff --git a/src/interfaces/control/Rectangle.js b/src/interfaces/control/Rectangle.js
index 222d0a6f1258..3837c1116e4c 100644
--- a/src/interfaces/control/Rectangle.js
+++ b/src/interfaces/control/Rectangle.js
@@ -36,7 +36,7 @@ const TagAttrs = types.model({
strokewidth: types.optional(types.string, "1"),
strokecolor: types.optional(types.string, "#f48a42"),
- canrotate: types.optional(types.string, "true"),
+ canrotate: types.optional(types.boolean, true),
});
const Model = types
diff --git a/src/interfaces/control/RectangleLabels.js b/src/interfaces/control/RectangleLabels.js
index 8ddf5b966abf..7a4269306542 100644
--- a/src/interfaces/control/RectangleLabels.js
+++ b/src/interfaces/control/RectangleLabels.js
@@ -4,17 +4,18 @@ import React, { Component } from "react";
import { types } from "mobx-state-tree";
import Types from "../../core/Types";
-import Tree from "../../core/Tree";
import Registry from "../../core/Registry";
import { guidGenerator } from "../../core/Helpers";
import SelectedModelMixin from "../mixins/SelectedModel";
+import InfoModal from "../../components/Infomodal/Infomodal";
import { HtxLabels, LabelsModel } from "./Labels";
import { RectangleModel } from "./Rectangle";
/**
* RectangleLabels tag creates labeled rectangles
+ * Used only for Image
* @example
*
*
@@ -56,35 +57,37 @@ const Model = types
return sel && sel.background;
},
- toStateJSON() {
- // const names = self.getSelectedNames();
- // if (names) {
- // self.unselectAll();
- // }
- // if (names && names.length) {
- // return {
- // id: self.pid,
- // from_name: self.name,
- // to_name: self.name,
- // type: self.type,
- // value: {
- // labels: names,
- // },
- // };
- // }
+ /**
+ * Usage check of selected labels before send completion to server
+ */
+ beforeSend() {
+ const names = self.getSelectedNames();
+
+ if (names && self.type === "rectanglelabels") {
+ self.unselectAll();
+ }
},
fromStateJSON(obj, fromModel) {
self.unselectAll();
- if (!obj.value.rectanglelabels) throw new Error("No labels param");
+ if (!obj.value.rectanglelabels) {
+ InfoModal.error("Error with labels.");
+ return;
+ }
if (obj.id) self.pid = obj.id;
- obj.value.rectanglelabels.forEach(l => {
- const label = self.findLabel(l);
+ /**
+ * Found correct label from config
+ */
+ obj.value.rectanglelabels.forEach(inLabel => {
+ const label = self.findLabel(inLabel);
- if (!label) throw new Error("No label " + obj.value.label);
+ if (!label) {
+ InfoModal.error("Error with labels. Not found: " + obj.value.rectanglelabels);
+ return;
+ }
label.markSelected(true);
});
@@ -105,20 +108,20 @@ const RectangleLabelsModel = types.compose(
const HtxRectangleLabels = observer(({ item }) => {
return ;
- return (
-
- {Tree.renderChildren(item)}
-
- );
+ // return (
+ //
+ // {Tree.renderChildren(item)}
+ //
+ // );
});
Registry.addTag("rectanglelabels", RectangleLabelsModel, HtxRectangleLabels);
diff --git a/src/interfaces/control/TextArea.js b/src/interfaces/control/TextArea.js
index e692fdbaf104..7e2b3ead5206 100644
--- a/src/interfaces/control/TextArea.js
+++ b/src/interfaces/control/TextArea.js
@@ -27,7 +27,7 @@ import ProcessAttrsMixin from "../mixins/ProcessAttrs";
* @param {string=} maxSubmissions maximum number of submissions
*/
const TagAttrs = types.model({
- allowSubmit: types.optional(types.string, "true"),
+ allowSubmit: types.optional(types.boolean, true),
label: types.optional(types.string, ""),
name: types.maybeNull(types.string),
toname: types.maybeNull(types.string),
@@ -133,7 +133,7 @@ const HtxTextArea = observer(({ item }) => {
{item.showSubmit && (
