init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { observer } from "mobx-react";
import { types } from "mobx-state-tree";
 
import LabelMixin from "../../mixins/LabelMixin";
import Registry from "../../core/Registry";
import SelectedModelMixin from "../../mixins/SelectedModel";
import Types from "../../core/Types";
import { HtxLabels, LabelsModel } from "./Labels/Labels";
import { guidGenerator } from "../../core/Helpers";
import ControlBase from "./Base";
 
/**
 * The `TimeSeriesLabels` tag is used to create a labeled time range.
 *
 * Use with the following data types: time series.
 * @example
 * <!--Basic labeling configuration to apply labels to identified regions of a time series with one channel -->
 * <View>
 *   <TimeSeriesLabels name="label" toName="ts">
 *       <Label value="Run"/>
 *       <Label value="Walk"/>
 *   </TimeSeriesLabels>
 *
 *   <TimeSeries name="ts" value="$csv" valueType="url">
 *      <Channel column="first_column"/>
 *   </TimeSeries>
 * </View>
 *
 * @name TimeSeriesLabels
 * @meta_title Time Series Label Tag for Labeling Time Series Data
 * @meta_description Customize Label Studio for with the TimeSeriesLabel tag to label time series data for machine learning and data science projects.
 * @param {string} name                      - Name of the element
 * @param {string} toname                    - Name of the timeseries to label
 * @param {single|multiple=} [choice=single] - Configure whether you can select one or multiple labels
 * @param {number} [maxUsages]               - Maximum number of times a label can be used per task
 * @param {boolean} [showInline=true]        - Show labels in the same visual line
 * @param {float=} [opacity=0.9]             - Opacity of the range
 * @param {string=} [fillColor=transparent]  - Range fill color in hexadecimal or HTML color name
 * @param {string} [strokeColor=#f48a42]     - Stroke color in hexadecimal
 * @param {number=} [strokeWidth=1]          - Width of the stroke
 */
const TagAttrs = types.model({
  opacity: types.optional(types.string, "0.9"),
  fillcolor: types.maybeNull(types.string),
 
  strokeWidth: types.optional(types.number, 1),
  strokeColor: types.optional(types.string, "#f48a42"),
});
 
const ModelAttrs = types
  .model("TimeSeriesLabelesModel", {
    pid: types.optional(types.string, guidGenerator),
    type: "timeserieslabels",
    children: Types.unionArray(["labels", "label", "choice"]),
  })
  .views((self) => ({
    get hasStates() {
      const states = self.states();
 
      return states && states.length > 0;
    },
 
    states() {
      return self.annotation.toNames.get(self.name);
    },
 
    activeStates() {
      const states = self.states();
 
      return states ? states.filter((c) => c.isSelected === true) : null;
    },
  }));
 
const Model = LabelMixin.props({ _type: "timeserieslabels" }).views((self) => ({
  get shouldBeUnselected() {
    return self.choice === "single";
  },
}));
 
const Composition = types.compose(
  ControlBase,
  LabelsModel,
  ModelAttrs,
  TagAttrs,
  Model,
  SelectedModelMixin.props({ _child: "LabelModel" }),
);
 
const TimeSeriesLabelsModel = types.compose("TimeSeriesLabelsModel", Composition);
 
const HtxTimeSeriesLabels = observer(({ item }) => {
  return <HtxLabels item={item} />;
});
 
Registry.addTag("timeserieslabels", TimeSeriesLabelsModel, HtxTimeSeriesLabels);
 
export { HtxTimeSeriesLabels, TimeSeriesLabelsModel };