supervisely 6.73.431__py3-none-any.whl → 6.73.432__py3-none-any.whl

supervisely/app/widgets/dataset_thumbnail/dataset_thumbnail.py

@@ -19,6 +19,10 @@ class DatasetThumbnail(Widget):
     :type dataset_info: Optional[DatasetInfo]
     :param show_project_name: if True, project name will be shown
     :type show_project_name: Optional[bool]
+    :param remove_margins: if True, removes margins around the widget
+    :type remove_margins: bool, optional
+    :param custom_name: custom name for the dataset (if None, actual dataset name will be used)
+    :type custom_name: str, optional
     :param widget_id: An identifier of the widget.
     :type widget_id: str, optional
 
@@ -38,18 +42,21 @@ class DatasetThumbnail(Widget):
         project_info: Optional[ProjectInfo] = None,
         dataset_info: Optional[DatasetInfo] = None,
         show_project_name: Optional[bool] = True,
+        remove_margins: bool = False,
+        custom_name: str = None,
         widget_id: Optional[str] = None,
     ):
         self._project_info: ProjectInfo = None
         self._dataset_info: DatasetInfo = None
         self._id: int = None
-        self._name: str = None
+        self._name: str = custom_name
         self._description: str = None
         self._url: str = None
         self._image_preview_url: str = None
         self._show_project_name: bool = show_project_name
         self._project_name: str = None
         self._project_url: str = None
+        self._remove_margins: bool = remove_margins
         self._set_info(project_info, dataset_info, show_project_name)
 
         super().__init__(widget_id=widget_id, file_path=__file__)
@@ -79,6 +86,7 @@ class DatasetThumbnail(Widget):
             "show_project_name": self._show_project_name,
             "project_name": self._project_name,
             "project_url": self._project_url,
+            "removeMargins": self._remove_margins,
         }
 
     def get_json_state(self) -> None:
@@ -96,7 +104,8 @@ class DatasetThumbnail(Widget):
         self._project_info = project_info
         self._dataset_info = dataset_info
         self._id = dataset_info.id
-        self._name = dataset_info.name
+        if self._name is None:
+            self._name = dataset_info.name
         self._description = f"{self._dataset_info.items_count} {self._project_info.type} in dataset"
         self._url = Dataset.get_url(project_id=project_info.id, dataset_id=dataset_info.id)
         self._image_preview_url = dataset_info.image_preview_url

supervisely/app/widgets/dataset_thumbnail/template.html

@@ -1,4 +1,6 @@
-<sly-field title="" :description="data.{{{widget.widget_id}}}.description">
+<link rel="stylesheet" href="./sly/css/app/widgets/project_thumbnail/style.css" />
+
+<sly-field {% if widget._remove_margins %} class="remove-margins" {% endif %} title="" :description="data.{{{widget.widget_id}}}.description">
   <span slot="title">
     <span v-if="data.{{{widget.widget_id}}}.show_project_name">
       <a target="_blank" :href="data.{{{widget.widget_id}}}.project_url">

supervisely/app/widgets/fast_table/fast_table.py

@@ -46,6 +46,21 @@ class FastTable(Widget):
     :type width: str, optional
     :param widget_id: Unique widget identifier.
     :type widget_id: str, optional
+    :param show_header: Whether to show table header
+    :type show_header: bool, optional
+    :param is_radio: Enable radio button selection mode (single row selection)
+    :type is_radio: bool, optional
+    :param is_selectable: Enable multiple row selection
+    :type is_selectable: bool, optional
+    :param header_left_content: Widget to display in the left side of the header
+    :type header_left_content: Widget, optional
+    :param header_right_content: Widget to display in the right side of the header
+    :type header_right_content: Widget, optional
+    :param max_selected_rows: Maximum number of rows that can be selected
+    :type max_selected_rows: int, optional
+    :param search_position: Position of the search input ("left" or "right")
+    :type search_position: Literal["left", "right"], optional
+
 
     :Usage example:
     .. code-block:: python
@@ -141,6 +156,8 @@ class FastTable(Widget):
         is_selectable: bool = False,
         header_left_content: Optional[Widget] = None,
         header_right_content: Optional[Widget] = None,
+        max_selected_rows: Optional[int] = None,
+        search_position: Optional[Literal["left", "right"]] = None,
     ):
         self._supported_types = tuple([pd.DataFrame, list, type(None)])
         self._row_click_handled = False
@@ -170,8 +187,9 @@ class FastTable(Widget):
         self._searched_data = None
         self._active_page = 1
         self._width = width
-        self._selected_rows = None
+        self._selected_rows = []
         self._selected_cell = None
+        self._clicked_row = None
         self._is_row_clickable = False
         self._is_cell_clickable = False
         self._search_str = ""
@@ -179,6 +197,9 @@ class FastTable(Widget):
         self._project_meta = self._unpack_project_meta(project_meta)
         self._header_left_content = header_left_content
         self._header_right_content = header_right_content
+        self._max_selected_rows = max_selected_rows
+        acceptable_search_positions = ["left", "right"]
+        self._search_position = search_position if search_position in acceptable_search_positions else "left"
 
         # table_options
         self._page_size = page_size
@@ -234,7 +255,9 @@ class FastTable(Widget):
         self._searched_data = self._search(search_value)
         self._rows_total = len(self._searched_data)
 
-        if self._rows_total > 0 and self._active_page == 0:  # if previous filtered data was empty
+        # if active page is greater than the number of pages (e.g. after filtering)
+        max_page = (self._rows_total - 1) // self._page_size + 1
+        if (self._rows_total > 0 and self._active_page == 0) or self._active_page > max_page:
             self._active_page = 1
             StateJson()[self.widget_id]["page"] = self._active_page
 
@@ -260,7 +283,13 @@ class FastTable(Widget):
                 - isRowClickable: whether rows are clickable
                 - isCellClickable: whether cells are clickable
                 - fixColumns: number of fixed columns
+                - isRadio: whether radio button selection mode is enabled
+                - isRowSelectable: whether multiple row selection is enabled
+                - maxSelectedRows: maximum number of rows that can be selected
+                - searchPosition: position of the search input ("left" or "right")
             - pageSize: number of rows per page
+            - showHeader: whether to show table header
+            - selectionChangedHandled: whether selection changed event listener is set
 
         :return: Dictionary with widget data
         :rtype: Dict[str, Any]
@@ -276,6 +305,9 @@ class FastTable(Widget):
                 "isCellClickable": self._is_cell_clickable,
                 "fixColumns": self._fix_columns,
                 "isRadio": self._is_radio,
+                "isRowSelectable": self._is_selectable,
+                "maxSelectedRows": self._max_selected_rows,
+                "searchPosition": self._search_position
             },
             "pageSize": self._page_size,
             "showHeader": self._show_header,
@@ -286,8 +318,9 @@ class FastTable(Widget):
         """Returns dictionary with widget state.
         Dictionary contains the following fields:
             - search: search string
-            - selectedRow: selected row
+            - selectedRows: selected rows
             - selectedCell: selected cell
+            - clickedRow: clicked row
             - page: active page
             - sort: sorting options with the following fields:
                 - column: index of the column to sort by
@@ -300,6 +333,7 @@ class FastTable(Widget):
             "search": self._search_str,
             "selectedRows": self._selected_rows,
             "selectedCell": self._selected_cell,
+            "clickedRow": self._clicked_row,
             "page": self._active_page,
             "sort": {
                 "column": self._sort_column_idx,
@@ -383,38 +417,95 @@ class FastTable(Widget):
             filter_function = self._default_filter_function
         self._filter_function = filter_function
 
-    def read_json(self, data: Dict, meta: Dict = None) -> None:
+    def read_json(self, data: Dict, meta: Dict = None, custom_columns: Optional[List[Union[str, tuple]]] = None) -> None:
         """Replace table data with options and project meta in the widget
 
-        :param data: Table data with options
+        :param data: Table data with options:
+            - data: table data
+            - columns: list of column names
+            - projectMeta: project meta information - if provided
+            - columnsOptions: list of dicts with options for each column
+            - total: total number of rows
+            - options: table options with the following fields:
+                - isRowClickable: whether rows are clickable
+                - isCellClickable: whether cells are clickable
+                - fixColumns: number of fixed columns
+                - isRadio: whether radio button selection mode is enabled
+                - isRowSelectable: whether multiple row selection is enabled
+                - maxSelectedRows: maximum number of rows that can be selected
+                - searchPosition: position of the search input ("left" or "right")
+            - pageSize: number of rows per page
+            - showHeader: whether to show table header
+            - selectionChangedHandled: whether selection changed event listener is set
+
         :type data: dict
         :param meta: Project meta information
         :type meta: dict
+        :param custom_columns: List of column names. Can include widgets as tuples (column_name, widget)
+        :type custom_columns: List[Union[str, tuple]], optional
+
+        Example of data dict:
+        .. code-block:: python
+
+            data = {
+                "data": [["apple", "21"], ["banana", "15"]],
+                "columns": ["Class", "Items"],
+                "columnsOptions": [
+                    { "type": "class"},
+                    { "maxValue": 21, "postfix": "pcs", "tooltip": "description text", "subtitle": "boxes" }
+                ],
+                "options": {
+                    "isRowClickable": True,
+                    "isCellClickable": True,
+                    "fixColumns": 1,
+                    "isRadio": False,
+                    "isRowSelectable": True,
+                    "maxSelectedRows": 5,
+                    "searchPosition": "right",
+                    "sort": {"column": 0, "order": "asc"},
+                },
+            }
         """
-        self._columns_first_idx = self._prepare_json_data(data, "columns")
         self._columns_options = self._prepare_json_data(data, "columnsOptions")
+        self._read_custom_columns(custom_columns)
+        if not self._columns_first_idx:
+            self._columns_first_idx = self._prepare_json_data(data, "columns")
         self._table_options = self._prepare_json_data(data, "options")
         self._project_meta = self._unpack_project_meta(meta)
-        self._parsed_source_data = data.get("data", None)
-        self._source_data = self._prepare_input_data(self._parsed_source_data)
-        self._sliced_data = self._slice_table_data(self._source_data)
-        self._parsed_active_data = self._unpack_pandas_table_data(self._sliced_data)
+        table_data = data.get("data", None)
+        self._validate_input_data(table_data)
+        self._source_data = self._prepare_input_data(table_data)
+        (
+            self._parsed_source_data,
+            self._sliced_data,
+            self._parsed_active_data,
+        ) = self._prepare_working_data()
         self._rows_total = len(self._parsed_source_data["data"])
         init_options = DataJson()[self.widget_id]["options"]
         init_options.update(self._table_options)
         sort = init_options.pop("sort", {"column": None, "order": None})
-        page_size = init_options.pop("pageSize", 10)
+        self._active_page = 1
+        self._sort_column_idx = sort.get("column", None)
+        if self._sort_column_idx is not None and self._sort_column_idx > len(self._columns_first_idx) - 1:
+            self._sort_column_idx = None
+        self._sort_order = sort.get("order", None)
+        self._page_size = init_options.pop("pageSize", 10) 
         DataJson()[self.widget_id]["data"] = self._parsed_active_data["data"]
         DataJson()[self.widget_id]["columns"] = self._parsed_active_data["columns"]
         DataJson()[self.widget_id]["columnsOptions"] = self._columns_options
         DataJson()[self.widget_id]["options"] = init_options
         DataJson()[self.widget_id]["total"] = len(self._source_data)
-        DataJson()[self.widget_id]["pageSize"] = page_size
+        DataJson()[self.widget_id]["pageSize"] = self._page_size
         DataJson()[self.widget_id]["projectMeta"] = self._project_meta
-        StateJson()[self.widget_id]["sort"] = sort
+        StateJson()[self.widget_id]["sort"]["column"] = self._sort_column_idx
+        StateJson()[self.widget_id]["sort"]["order"] = self._sort_order
+        StateJson()[self.widget_id]["page"] = self._active_page
+        StateJson()[self.widget_id]["selectedRows"] = []
+        StateJson()[self.widget_id]["selectedCell"] = None
+        self._maybe_update_selected_row()
+        self._validate_sort_attrs()
         DataJson().send_changes()
         StateJson().send_changes()
-        self.clear_selection()
 
     def read_pandas(self, data: pd.DataFrame) -> None:
         """Replace table data (rows and columns) in the widget.
@@ -440,6 +531,24 @@ class FastTable(Widget):
     def to_json(self, active_page: Optional[bool] = False) -> Dict[str, Any]:
         """Export table data with current options as dict.
 
+        Dictionary contains the following fields:
+            - data: table data
+            - columns: list of column names
+            - projectMeta: project meta information - if provided
+            - columnsOptions: list of dicts with options for each column
+            - total: total number of rows
+            - options: table options with the following fields:
+                - isRowClickable: whether rows are clickable
+                - isCellClickable: whether cells are clickable
+                - fixColumns: number of fixed columns
+                - isRadio: whether radio button selection mode is enabled
+                - isRowSelectable: whether multiple row selection is enabled
+                - maxSelectedRows: maximum number of rows that can be selected
+                - searchPosition: position of the search input ("left" or "right")
+            - pageSize: number of rows per page
+            - showHeader: whether to show table header
+            - selectionChangedHandled: whether selection changed event listener is set
+
         :param active_page: Specifies the size of the data to be exported. If True - returns only the active page of the table
         :type active_page: Optional[bool]
         :return: Table data with current options
@@ -477,7 +586,7 @@ class FastTable(Widget):
 
     def clear_selection(self) -> None:
         """Clears the selection of the table."""
-        StateJson()[self.widget_id]["selectedRows"] = None
+        StateJson()[self.widget_id]["selectedRows"] = []
         StateJson()[self.widget_id]["selectedCell"] = None
         StateJson().send_changes()
         self._maybe_update_selected_row()
@@ -558,15 +667,15 @@ class FastTable(Widget):
             if self._rows_total != 0:
                 self.select_row(0)
             else:
-                self._selected_rows = None
-                StateJson()[self.widget_id]["selectedRows"] = None
+                self._selected_rows = []
+                StateJson()[self.widget_id]["selectedRows"] = self._selected_rows
                 StateJson().send_changes()
             return
         if not self._selected_rows:
             return
         if self._rows_total == 0:
-            self._selected_rows = None
-            StateJson()[self.widget_id]["selectedRows"] = None
+            self._selected_rows = []
+            StateJson()[self.widget_id]["selectedRows"] = self._selected_rows
             StateJson().send_changes()
             return
         if self._is_selectable:
@@ -1115,8 +1224,12 @@ class FastTable(Widget):
 
         @server.post(selection_changed_route_path)
         def _selection_changed():
-            selected_row = self.get_selected_row()
-            func(selected_row)
+            if self._is_radio:
+                selected_row = self.get_selected_row()
+                func(selected_row)
+            elif self._is_selectable:
+                selected_rows = self.get_selected_rows()
+                func(selected_rows)
 
         self._selection_changed_handled = True
         DataJson()[self.widget_id]["selectionChangedHandled"] = True
@@ -1201,3 +1314,25 @@ class FastTable(Widget):
 
         idxs = self._source_data[self._source_data[column].isin(values)].index.tolist()
         self.select_rows(idxs)
+
+    def _read_custom_columns(self, columns: List[Union[str, tuple]]) -> None:
+        if not columns:
+            return
+        self._columns = columns
+        self._columns_options = self._columns_options or [{} for _ in columns]
+        self._columns_data = []
+        self._columns_first_idx = []
+        for i, col in enumerate(columns):
+            if isinstance(col, str):
+                self._columns_first_idx.append(col)
+                self._columns_data.append(self.ColumnData(name=col))
+            elif isinstance(col, tuple):
+                self._columns_first_idx.append(col[0])
+                self._columns_data.append(
+                    self.ColumnData(name=col[0], is_widget=True, widget=col[1])
+                )
+                self._columns_options[i]["customCell"] = True
+            else:
+                raise TypeError(f"Column name must be a string or a tuple, got {type(col)}")
+
+        self._validate_sort_attrs()

supervisely/app/widgets/fast_table/script.js

@@ -17,7 +17,7 @@ Vue.component('fast-table', {
               style="flex-grow: 1"
             >
               <slot name="header-left-side-start" />
-              <div class="relative w-full md:max-w-[14rem]">
+              <div v-if="settings.searchPosition !== 'right'" class="relative w-full md:max-w-[14rem]">
                 <i class="zmdi zmdi-search h-4 absolute top-2 left-2.5 opacity-50" />
                 <i
                   v-if="search"
@@ -35,6 +35,22 @@ Vue.component('fast-table', {
               </div>
               <slot name="header-left-side-end" />
             </div>
+            <div v-if="settings.searchPosition === 'right'" class="relative w-full md:max-w-[14rem]">
+              <i class="zmdi zmdi-search h-4 absolute top-2 left-2.5 opacity-50" />
+              <i
+                v-if="search"
+                class="zmdi zmdi-close h-4 absolute top-2.5 right-3 opacity-50 cursor-pointer"
+                @click="searchChanged('')"
+              />
+              <input
+                :value="search"
+                type="text"
+                :placeholder="\`\${name ? \`Search for \${name}...\` : 'Search'}\`"
+                class="text-sm rounded-md px-3 py-1.5 text-gray-900 shadow-sm placeholder:text-gray-400 border border-slate-200 w-full pl-8 bg-slate-50"
+                @input="searchChanged($event.target.value)"
+                @keydown.esc="searchChanged('')"
+              >
+            </div>
             <div
               v-if="data && data.length"
               class="text-[.9rem] text-slate-500 flex items-center gap-0 w-full md:w-auto whitespace-nowrap"
@@ -73,6 +89,7 @@ Vue.component('fast-table', {
             <table
               ref="tableBox"
               class="w-full text-[.8rem] md:text-[.9rem] mb-1"
+              :key="'table-' + page"
             >
               <thead>
                 <tr>
@@ -84,17 +101,25 @@ Vue.component('fast-table', {
                   >
                   </th>
                   <th
-                    v-else-if="settings.isRowSelectable"
+                    v-if="settings.isRowSelectable && (!settings.maxSelectedRows || settings.maxSelectedRows > 1)"
                     class="px-2 md:px-3 py-2.5 whitespace-nowrap first:pl-3 last:pr-3 md:last:pr-6 first:text-left cursor-pointer sticky top-0 bg-slate-50 box-content shadow-[inset_0_-2px_0_#dfe6ec] group"
                     :class="{ 'first:sticky first:left-0 first:z-20 first:shadow-[inset_-2px_-2px_0_#dfe6ec]': fixColumns }"
                   >
                     <el-checkbox
-                      v-if="settings.isRowSelectable"
+                      v-if="settings.isRowSelectable && (!settings.maxSelectedRows || settings.maxSelectedRows > 1)"
                       size="small"
-                      :value="isAllRowsSelected"
-                      @input="selectAllRows"
+                      v-model="headerCheckboxModel"
+                      :indeterminate="isSomeOnPageSelected && !isAllOnPageSelected"
+                      :key="'headercb-' + page + '-' + (data && data.map(r => r.idx).join(',')) + '-' + (selectedRows && selectedRows.map(r => r.idx).join(',')) + '-' + (isAllOnPageSelected?1:0) + '-' + (isSomeOnPageSelected?1:0)"
+                      style="transform: scale(1.2);"
                     />
                   </th>
+                  <th
+                    v-if="settings.isRowSelectable && settings.maxSelectedRows === 1"
+                    class="px-2 md:px-3 py-2.5 whitespace-nowrap first:pl-3 last:pr-3 md:last:pr-6 first:text-left cursor-pointer sticky top-0 bg-slate-50 box-content shadow-[inset_0_-2px_0_#dfe6ec] group"
+                    :class="{ 'first:sticky first:left-0 first:z-20 first:shadow-[inset_-2px_-2px_0_#dfe6ec]': fixColumns }"
+                  >
+                  </th>
                   <th
                     v-for="(c,idx) in columns.slice(0, columnNumberLimit)"
                     class="px-2 md:px-3 py-2.5 whitespace-nowrap first:pl-3 last:pr-3 md:first:pl-6 md:last:pr-6 first:text-left cursor-pointer sticky top-0 bg-slate-50 box-content shadow-[inset_0_-2px_0_#dfe6ec] group"
@@ -140,12 +165,13 @@ Vue.component('fast-table', {
                   </th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody :key="'page-' + page">
                 <tr
                   v-for="row in data"
+                  :key="'row-' + rowKeyValue(row)"
                   class="border-b border-gray-200 last:border-0 group"
                   :class="{ 'cursor-pointer': settings.isRowClickable }"
-                  @click="settings.isRowClickable && $emit('row-click', { idx: row.idx, row: row.items, columnsSettings })"
+                  @click="settings.isRowClickable && $emit('row-click', { idx: rowKeyValue(row), row: row.items, columnsSettings })"
                 >
                   <td
                     v-if="settings.isRadio"
@@ -169,8 +195,11 @@ Vue.component('fast-table', {
                   >
                     <el-checkbox
                       size="small"
-                      :value="!!selectedRowsById[row.id]"
-                      @input="updateSelectedRows(row)"
+                      v-model="rowCheckboxModel[rowKeyValue(row)]"
+                      @change="onRowCheckboxChange(row, rowCheckboxModel[rowKeyValue(row)])"
+                      @click.stop
+                      :key="'rowcb-' + page + '-' + rowKeyValue(row)"
+                      style="transform: scale(1.2);"
                     />
                   </td>
 
@@ -314,11 +343,16 @@ Vue.component('fast-table', {
       type: Boolean,
       default: false,
     },
+    rowKey: {
+      type: String,
+      default: 'idx',
+    },
   },
 
   data() {
     return {
       columnNumberLimit: 50,
+      rowCheckboxModel: {},
     };
   },
 
@@ -342,6 +376,7 @@ Vue.component('fast-table', {
     settings() {
       const defaultSettings = {
         showHeaderControls: true,
+        searchPosition: 'left',
       };
       return {
         ...defaultSettings,
@@ -353,10 +388,6 @@ Vue.component('fast-table', {
       return this.pageSize || 50;
     },
 
-    selectedRowsById() {
-      return _.keyBy(this.selectedRows, 'id');
-    },
-
     classesMap() {
       return this.projectMeta ? _.keyBy(this.projectMeta.classes, 'title') : {};
     },
@@ -373,15 +404,53 @@ Vue.component('fast-table', {
       return this.columnsSettings.find(i => i?.subtitle);
     },
 
-    isAllRowsSelected() {
-      if (!this.selectedRows?.length) return false;
-      return this.data.every(r => this.selectedRowsById[r.id]);
+    isAllOnPageSelected() {
+      const rows = this.data || [];
+      if (rows.length === 0) return false;
+      const selectedIdx = new Set((this.selectedRows || []).map(r => this.rowKeyValue(r)));
+      return rows.every(r => selectedIdx.has(this.rowKeyValue(r)));
+    },
+
+    isSomeOnPageSelected() {
+      const rows = this.data || [];
+      if (rows.length === 0) return false;
+      const selectedIdx = new Set((this.selectedRows || []).map(r => this.rowKeyValue(r)));
+      const count = rows.filter(r => selectedIdx.has(this.rowKeyValue(r))).length;
+      return count > 0 && count < rows.length;
+    },
+
+    selectedIdxSet() {
+      return new Set((this.selectedRows || []).map(r => this.rowKeyValue(r)));
     },
+
+    headerCheckboxModel: {
+      get() {
+        return this.isAllOnPageSelected;
+      },
+      set(val) {
+        this.selectAllRows(val);
+      }
+    },
+  },
+
+  watch: {
+    data: {
+      immediate: true,
+      handler() {
+        this.syncRowCheckboxModel();
+      }
+    },
+    selectedRows: {
+      immediate: true,
+      handler() {
+        this.syncRowCheckboxModel();
+      }
+    }
   },
 
   methods: {
     _updateData() {
-      this.$emit('filters-changed');
+      this.$emit('filters-changed')
     },
 
     searchChanged(val) {
@@ -409,31 +478,85 @@ Vue.component('fast-table', {
       this.updateData();
     },
 
-    selectAllRows() {
-      if (this.isAllRowsSelected) {
-        const curRowsSet = new Set(this.data.map(r => r.id));
-        this.$emit('update:selected-rows', [...this.selectedRows.filter(r => !curRowsSet.has(r.id))]);
+    selectAllRows(checked) {
+      if (!this.data || this.data.length === 0) return;
+
+      const current = Array.isArray(this.selectedRows) ? [...this.selectedRows] : [];
+      const max = this.settings && this.settings.maxSelectedRows ? this.settings.maxSelectedRows : 0;
+
+      if (checked) {
+        const selectedIdx = new Set(current.map(r => this.rowKeyValue(r)));
+        const result = [...current];
+
+        if (max && max > 0) {
+          let quota = Math.max(0, max - result.length);
+          for (const r of this.data) {
+            const key = this.rowKeyValue(r);
+            if (!selectedIdx.has(key)) {
+              if (quota <= 0) break;
+              result.push(_.cloneDeep(r));
+              selectedIdx.add(key);
+              quota -= 1;
+            }
+          }
+          this.$emit('update:selected-rows', result);
+        } else {
+          for (const r of this.data) {
+            const key = this.rowKeyValue(r);
+            if (!selectedIdx.has(key)) {
+              result.push(_.cloneDeep(r));
+              selectedIdx.add(key);
+            }
+          }
+          this.$emit('update:selected-rows', result);
+        }
       } else {
-        const selected = [...this.selectedRows];
-
-        this.data.forEach((row) => {
-          if (this.selectedRowsById[row.id]) return;
-
-          selected.push(row);
-        });
-
-        this.$emit('update:selected-rows', selected);
+        const pageIdx = new Set(this.data.map(r => this.rowKeyValue(r)));
+        const result = current.filter(r => !pageIdx.has(this.rowKeyValue(r)));
+        this.$emit('update:selected-rows', result);
       }
     },
 
-    updateSelectedRows(row) {
-      const isRowSelected = this.selectedRowsById[row.id];
-
-      if (!isRowSelected) {
-        this.$emit('update:selected-rows', [...this.selectedRows, row]);
+    syncRowCheckboxModel() {
+      const map = {};
+      const selected = new Set((this.selectedRows || []).map(r => this.rowKeyValue(r)));
+      for (const r of (this.data || [])) {
+        const key = this.rowKeyValue(r);
+        map[key] = selected.has(key);
+      }
+      this.rowCheckboxModel = map;
+    },
+
+    onRowCheckboxChange(row, checked) {
+      this.updateSelectedRows(row, checked);
+    },
+
+    updateSelectedRows(row, checked) {
+      checked = typeof checked === 'boolean' ? checked : !!checked;
+      const current = Array.isArray(this.selectedRows) ? [...this.selectedRows] : [];
+      const key = this.rowKeyValue(row);
+      const exists = current.some(r => this.rowKeyValue(r) === key);
+      const max = this.settings && this.settings.maxSelectedRows ? this.settings.maxSelectedRows : 0;
+
+      let result = current;
+      if (checked) {
+        if (max && max > 0) {
+          if (max === 1) {
+            result = [_.cloneDeep(row)];
+            this.$emit('update:selected-rows', result);
+            return;
+          }
+          if (!exists && current.length >= max) {
+            // revert checkbox state if over the limit
+            this.$nextTick(() => { this.$set(this.rowCheckboxModel, key, false); });
+            return;
+          }
+        }
+        if (!exists) result = [...current, _.cloneDeep(row)];
       } else {
-        this.$emit('update:selected-rows', [...this.selectedRows.filter(p => p.id !== row.id)]);
+        if (exists) result = current.filter(r => this.rowKeyValue(r) !== key);
       }
+      this.$emit('update:selected-rows', result);
     },
 
     updateSelectedRadio(row) {
@@ -453,6 +576,12 @@ Vue.component('fast-table', {
       if (!this.search) return text;
       return text.toString().replace(new RegExp(this.search, 'gi'), match => '<span class="bg-yellow-400">'+match+'</span>');
     },
+
+    rowKeyValue(row) {
+      if (!row) return undefined;
+      const keyName = this.rowKey || 'idx';
+      return row[keyName] != null ? row[keyName] : row.idx;
+    },
   },
 
   mounted() {

supervisely/app/widgets/fast_table/style.css

@@ -704,8 +704,38 @@
 	border-width: 1px;
 }
 
-.header-left-side-start-cls {
-	color: black;
+.tailwind .el-checkbox__inner {
+	--tw-border-opacity: 1;
+	border-width: 1px;
+	border-color: rgb(226 232 240 / var(--tw-border-opacity));
+}
+.tailwind .el-checkbox__input.is-checked .el-checkbox__inner,
+.tailwind .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+	--tw-bg-opacity: 1;
+	background-color: rgb(14 165 233 / var(--tw-bg-opacity));
+	border-color: rgb(14 165 233 / var(--tw-bg-opacity));
+}
+/* refine the checkmark so it's thinner and not a full box */
+.tailwind .el-checkbox__inner::after {
+	border-left: 0 !important;
+	border-top: 0 !important;
+}
+.tailwind .el-checkbox__input.is-checked .el-checkbox__inner::after {
+	border-right: 1.5px solid #fff;
+	border-bottom: 1.5px solid #fff;
+	border-left: 0 !important;
+	border-top: 0 !important;
+}
+.tailwind .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+	background-color: #fff;
+	height: 2px;
+}
+
+.tailwind .el-checkbox__inner::after {
+	left: 4px;
+	top: 1px;
+	width: 4px;
+	height: 8px;
 }
 
 .sly-fast-table-disable-overlay {

supervisely/app/widgets/fast_table/template.html

@@ -24,7 +24,7 @@
   if
   widget._row_click_handled
   %}
-  @row-click="state.{{{widget.widget_id}}}.selectedRow = $event; post('/{{{widget.widget_id}}}/row_clicked_cb')"
+  @row-click="state.{{{widget.widget_id}}}.clickedRow = $event; post('/{{{widget.widget_id}}}/row_clicked_cb')"
   {%
   endif
   %}

{supervisely-6.73.431.dist-info → supervisely-6.73.432.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: supervisely
-Version: 6.73.431
+Version: 6.73.432
 Summary: Supervisely Python SDK.
 Home-page: https://github.com/supervisely/supervisely
 Author: Supervisely

{supervisely-6.73.431.dist-info → supervisely-6.73.432.dist-info}/RECORD

@@ -216,8 +216,8 @@ supervisely/app/widgets/custom_models_selector/custom_models_selector.py,sha256=
 supervisely/app/widgets/custom_models_selector/style.css,sha256=-zPPXHnJvatYj_xVVAb7T8uoSsUTyhm5xCKWkkFQ78E,548
 supervisely/app/widgets/custom_models_selector/template.html,sha256=Ot7dluekJEUtBWYezAVmcg6PbcEtb2_MRaTBhEnvRjk,2888
 supervisely/app/widgets/dataset_thumbnail/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-supervisely/app/widgets/dataset_thumbnail/dataset_thumbnail.py,sha256=f7l7Te4jPRtvBcjTuUoo_AFRjpTujJHKHNYyt5EIx3Q,4646
-supervisely/app/widgets/dataset_thumbnail/template.html,sha256=yXlpgxkuQEklVY8iXLydKZ07vpG5RLHAmLCKb58l-ac,677
+supervisely/app/widgets/dataset_thumbnail/dataset_thumbnail.py,sha256=C-PaA9TYTs_AEC-rZr789ww6NMNkBOgZOSKkXHqgs1k,5106
+supervisely/app/widgets/dataset_thumbnail/template.html,sha256=zQZrSLeqbUGR3W0XxuztvEgS1ndnzxvhAhC1JbgmVtk,828
 supervisely/app/widgets/date_picker/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 supervisely/app/widgets/date_picker/date_picker.py,sha256=76tXh9OamTk7lz7aQJvKli7T-vbadULs8DpkndlvbeM,8213
 supervisely/app/widgets/date_picker/template.html,sha256=bQ8y6W7ZIXxQ3xRH6SlARBSAhHMOjDZqMddbdOZ69YM,699
@@ -266,10 +266,10 @@ supervisely/app/widgets/empty/template.html,sha256=aDBKkin5aLuqByzNN517-rTYCGIg5
 supervisely/app/widgets/experiment_selector/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 supervisely/app/widgets/experiment_selector/experiment_selector.py,sha256=9UseS99hb0ln4QLSeSIfXM7-pIpqLyWsyWoYQsELlnM,28402
 supervisely/app/widgets/fast_table/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-supervisely/app/widgets/fast_table/fast_table.py,sha256=WEiQrWLBXx-USGhj5REn7AhlrLjA-5zQhQpedRfJF8E,49273
-supervisely/app/widgets/fast_table/script.js,sha256=cHjXm_tq5dFTgBxBKaS6lvT67wiaTjxnU2uWHF7hNoY,17327
-supervisely/app/widgets/fast_table/style.css,sha256=VwE8LHybH3vvZboaVFyfN7pE6MoIF_7fEdwNdjQMFUM,15763
-supervisely/app/widgets/fast_table/template.html,sha256=P0JVtohKUZcCI4aKDtnr6SxudHyYmWeGvjc8wm1VRs0,2788
+supervisely/app/widgets/fast_table/fast_table.py,sha256=OlClGdTcERueYBNR8uITYQa-8mwNT53NeIlJokebRN0,56293
+supervisely/app/widgets/fast_table/script.js,sha256=V0l3hlRjejsVM6lSYDF6b79NZgegSdLKH0RBrhumnPU,22728
+supervisely/app/widgets/fast_table/style.css,sha256=DwVGIX4Hap_rG7D570pfyFRAUSMtfHUZEQYs9C6JrAY,16685
+supervisely/app/widgets/fast_table/template.html,sha256=KTeZs6F8bUYOVZ58D7C4yrDTXKB9wvqEVT4RgRZr4sk,2787
 supervisely/app/widgets/field/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 supervisely/app/widgets/field/field.py,sha256=FqBqfIEcUK7R3va30YS_zijWTUSD5QT3-kpLKJNPq7o,6258
 supervisely/app/widgets/field/style.css,sha256=sLMbqxS4EDPykcQZNMXeYdR4v1y1OP6iqcX0tRz7C68,56
@@ -1127,9 +1127,9 @@ supervisely/worker_proto/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZ
 supervisely/worker_proto/worker_api_pb2.py,sha256=VQfi5JRBHs2pFCK1snec3JECgGnua3Xjqw_-b3aFxuM,59142
 supervisely/worker_proto/worker_api_pb2_grpc.py,sha256=3BwQXOaP9qpdi0Dt9EKG--Lm8KGN0C5AgmUfRv77_Jk,28940
 supervisely_lib/__init__.py,sha256=7-3QnN8Zf0wj8NCr2oJmqoQWMKKPKTECvjH9pd2S5vY,159
-supervisely-6.73.431.dist-info/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
-supervisely-6.73.431.dist-info/METADATA,sha256=Tdduz5-kfqxj39qOe4tcX_-58Hp904M_Ja2X3M6G_LA,35433
-supervisely-6.73.431.dist-info/WHEEL,sha256=iAkIy5fosb7FzIOwONchHf19Qu7_1wCWyFNR5gu9nU0,91
-supervisely-6.73.431.dist-info/entry_points.txt,sha256=U96-5Hxrp2ApRjnCoUiUhWMqijqh8zLR03sEhWtAcms,102
-supervisely-6.73.431.dist-info/top_level.txt,sha256=kcFVwb7SXtfqZifrZaSE3owHExX4gcNYe7Q2uoby084,28
-supervisely-6.73.431.dist-info/RECORD,,
+supervisely-6.73.432.dist-info/LICENSE,sha256=xx0jnfkXJvxRnG63LTGOxlggYnIysveWIZ6H3PNdCrQ,11357
+supervisely-6.73.432.dist-info/METADATA,sha256=mJQpgFJG362uNb35ChhLMbHqErpjRc-bx5KHRkaut_c,35433
+supervisely-6.73.432.dist-info/WHEEL,sha256=iAkIy5fosb7FzIOwONchHf19Qu7_1wCWyFNR5gu9nU0,91
+supervisely-6.73.432.dist-info/entry_points.txt,sha256=U96-5Hxrp2ApRjnCoUiUhWMqijqh8zLR03sEhWtAcms,102
+supervisely-6.73.432.dist-info/top_level.txt,sha256=kcFVwb7SXtfqZifrZaSE3owHExX4gcNYe7Q2uoby084,28
+supervisely-6.73.432.dist-info/RECORD,,