feat: BROS-44: Add MultiChannel tag support for TimeSeries (#7669)

Co-authored-by: niklub <[email protected]>
Co-authored-by: Gondragos <[email protected]>
Co-authored-by: robot-ci-heartex <[email protected]>
Co-authored-by: makseq <[email protected]>
Co-authored-by: bmartel <[email protected]>

Author: 5 people

docs/source/includes/tags/channel.md

@@ -6,7 +6,7 @@
 | [legend] | <code>string</code> |  | display name of the channel |
 | [units] | <code>string</code> |  | display units name |
 | [displayFormat] | <code>string</code> |  | format string for the values, uses d3-format:<br/>        `[,][.precision][f\|%]`<br/>        `,` - group thousands with separator (from locale): `,` (12345.6 -> 12,345.6) `,.2f` (12345.6 -> 12,345.60)<br/>        `.precision` - precision for `f\|%` type, significant digits for empty type:<br/>                     `.3f` (12.3456 -> 12.345, 1000 -> 1000.000)<br/>                     `.3` (12.3456 -> 12.3, 1.2345 -> 1.23, 12345 -> 1.23e+4)<br/>        `f` - treat as float, default precision is .6: `f` (12 -> 12.000000) `.2f` (12 -> 12.00) `.0f` (12.34 -> 12)<br/>        `%` - treat as percents and format accordingly: `%.0` (0.128 -> 13%) `%.1` (1.2345 -> 123.4%) |
-| [height] | <code>number</code> |  | height of the plot |
+| [height] | <code>number</code> | <code>200</code> | height of the plot |
 | [strokeColor] | <code>string</code> | <code>&quot;#f48a42&quot;</code> | plot stroke color, expects hex value |
 | [strokeWidth] | <code>number</code> | <code>1</code> | plot stroke width |
 | [markerColor] | <code>string</code> | <code>&quot;#f48a42&quot;</code> | plot stroke color, expects hex value |

docs/source/includes/tags/multichannel.md

@@ -0,0 +1,9 @@
+### Parameters
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [height] | <code>number</code> | <code>200</code> | height of the plot |
+| [showAxis] | <code>boolean</code> | <code>true</code> | whether to show both axes |
+| [showYAxis] | <code>boolean</code> | <code>true</code> | whether to show the y-axis |
+| [fixedScale] | <code>boolean</code> |  | whether to use a fixed scale for all channels. If not set, inherits from parent TimeSeries tag |
+

docs/source/tags/timeseries.md

@@ -49,3 +49,39 @@ Labeling configuration for time series data stored in the task field `ts` in Lab
   </TimeSeries>
 </View>
 ```
+
+## MultiChannel
+
+The `MultiChannel` tag is used to group multiple channels together in a time series visualization. Use this tag within a `TimeSeries` tag to organize and display multiple data channels in a single view.
+
+{% insertmd includes/tags/multichannel.md %}
+
+### Example
+
+Labeling configuration for time series data with multiple channels grouped together:
+
+```html
+<View>
+  <TimeSeries name="ts" value="$timeseries" valuetype="json"
+              timeColumn="time"
+              timeFormat="%Y-%m-%d %H:%M:%S.%f"
+              timeDisplayFormat="%Y-%m-%d"
+              overviewChannels="velocity">
+    <MultiChannel>
+      <Channel column="velocity"
+               units="miles/h"
+               displayFormat=",.1f"
+               legend="Velocity"/>
+
+      <Channel column="acceleration"
+               units="miles/h^2"
+               displayFormat=",.1f"
+               legend="Acceleration"/>
+    </MultiChannel>
+  </TimeSeries>
+  <TimeSeriesLabels name="label" toName="ts">
+    <Label value="Run" background="red"/>
+    <Label value="Walk" background="green"/>
+  </TimeSeriesLabels>
+</View>
+```

docs/source/templates/timeseries_audio_video.md

@@ -116,8 +116,8 @@ To specify a time-based time series, use the following format:
 
 <!-- {
   "video": "https://app.heartex.ai/static/samples/opossum_snow.mp4",
-  "accel_data": "https://app.heartex.ai/samples/time-series.csv?time=time&values=accel_x%2Caccel_y&sep=%2C&tf=%H:%m:%d.%f",
-  "gyro_data": "https://app.heartex.ai/samples/time-series.csv?time=time&values=gyro_x%2Cgyro_y&sep=%2C&tf=%H:%m:%d.%f"
+  "accel_data": "https://app.heartex.ai/samples/time-series.csv?time=time&values=accel_x%2Caccel_y&sep=%2C&tf=%H:%M:%S.%f",
+  "gyro_data": "https://app.heartex.ai/samples/time-series.csv?time=time&values=gyro_x%2Cgyro_y&sep=%2C&tf=%H:%M:%S.%f"
 }
 -->
 ```
@@ -180,7 +180,7 @@ To specify an index-based time series, use the following format:
 
 #### Labeling configuration
 
-<br><br>
+<br>
 
 {% details <b>Index-based TimeSeries (no timestamps at X axis)</b> %}
 

label_studio/core/label_config.py

@@ -273,7 +273,14 @@ def generate_sample_task_without_check(label_config, mode='upload', secure_mode=
 
         # detect secured mode - objects served as URLs
         value_type = p.get('valueType') or p.get('valuetype')
-        only_urls = secure_mode or value_type == 'url'
+
+        only_urls = value_type == 'url'
+        if secure_mode and p.tag in ['Paragraphs', 'HyperText', 'Text']:
+            # In secure mode default valueType for Paragraphs and RichText is "url"
+            only_urls = only_urls or value_type is None
+        if p.tag == 'TimeSeries':
+            # for TimeSeries default valueType is "url"
+            only_urls = only_urls or value_type is None
 
         example_from_field_name = examples.get('$' + value)
         if example_from_field_name:
@@ -300,10 +307,10 @@ def generate_sample_task_without_check(label_config, mode='upload', secure_mode=
             # TimeSeries special case - generate signals on-the-fly
             time_column = p.get('timeColumn')
             value_columns = []
-            for ts_child in p:
-                if ts_child.tag != 'Channel':
-                    continue
-                value_columns.append(ts_child.get('column'))
+            if hasattr(p, 'findall'):
+                channels = p.findall('.//Channel[@column]')
+                for ts_child in channels:
+                    value_columns.append(ts_child.get('column'))
             sep = p.get('sep')
             time_format = p.get('timeFormat')
 
@@ -362,6 +369,29 @@ def _is_strftime_string(s):
     return '%' in s
 
 
+def _get_smallest_time_freq(time_format):
+    """Determine the smallest time component in strftime format and return pandas frequency"""
+    if not time_format:
+        return 'D'  # default to daily
+
+    # Order from smallest to largest (we want the smallest one)
+    time_components = [
+        ('%S', 's'),  # second
+        ('%M', 'min'),  # minute
+        ('%H', 'h'),  # hour
+        ('%d', 'D'),  # day
+        ('%m', 'MS'),  # month start
+        ('%Y', 'YS'),  # year start
+    ]
+
+    # Find the smallest time component present in the format
+    for strftime_code, pandas_freq in time_components:
+        if strftime_code in time_format:
+            return pandas_freq
+
+    return 'D'  # default to daily if no time components found
+
+
 def generate_time_series_json(time_column, value_columns, time_format=None):
     """Generate sample for time series"""
     n = 100
@@ -372,10 +402,26 @@ def generate_time_series_json(time_column, value_columns, time_format=None):
     if time_format is None:
         times = np.arange(n).tolist()
     else:
-        times = pd.date_range('2020-01-01', periods=n, freq='D').strftime(time_format).tolist()
+        # Automatically determine the appropriate frequency based on time format
+        freq = _get_smallest_time_freq(time_format)
+        times = pd.date_range('2020-01-01', periods=n, freq=freq)
+        new_times = []
+        prev_time_str = None
+        for time in times:
+            time_str = time.strftime(time_format)
+
+            # Check if formatted string is monotonic (to handle cycling due to format truncation)
+            if prev_time_str is not None and time_str <= prev_time_str:
+                break
+
+            new_times.append(time_str)
+            prev_time_str = time_str  # Update prev_time_str for next iteration
+
+        times = new_times
+
     ts = {time_column: times}
     for value_col in value_columns:
-        ts[value_col] = np.random.randn(n).tolist()
+        ts[value_col] = np.random.randn(len(times)).tolist()
     return ts
 
 

web/libs/core/src/lib/utils/feature-flags/flags.ts

@@ -87,3 +87,8 @@ export const FF_THEME_TOGGLE = "fflag_feat_front_optic_1217_theme_toggle_short";
  * Enables the summary view for annotations
  */
 export const FF_SUMMARY = "fflag_feat_front_leap_2036_annotations_summary";
+
+/**
+ * TimeSeries Multi-channel functionality
+ */
+export const FF_MULTICHANNEL_TS = "fflag_feat_front_bros58_timeseries_multichannel_short";