feat:(model-manager) add sorting capabilities for models (#9024)

* feat(model-manager): add comprehensive sorting capabilities for models

dded the ability to sort models in the Model Manager by various attributes
including Name, Base, Type, Format, Size, Date Added, and Date Modified.
Supports both ascending and descending order.

- Backend: Added `order_by` and `direction` query parameters to the
  ``/api/v1/models`/` listing endpoint. Implemented case-insensitive
  sorting in the SQLite model records service.
- Frontend: Introduced `<ModelSortControl />` UI, updated Redux slices
  to manage sort state, removed client-side entity adapter sorting to
  respect server-side ordering, and added i18n localization keys.
- Tests: Added test coverage for SQL-based sorting on size and name.

* feat(model-manager): add comprehensive sorting capabilities for models

dded the ability to sort models in the Model Manager by various attributes
including Name, Base, Type, Format, Size, Date Added, and Date Modified.
Supports both ascending and descending order.

- Backend: Added `order_by` and `direction` query parameters to the
  ``/api/v1/models`/` listing endpoint. Implemented case-insensitive
  sorting in the SQLite model records service.
- Frontend: Introduced `<ModelSortControl />` UI, updated Redux slices
  to manage sort state, removed client-side entity adapter sorting to
  respect server-side ordering, and added i18n localization keys.
- Tests: Added test coverage for SQL-based sorting on size and name.

* ruff fix

* typegen fix

* typegen fix - this time without my custom nodes.

* another typegen fix

* refactor(ui): consolidate model filter and sort controls into a unified menu

-  Replaced separate `ModelSortControl` and `ModelTypeFilter` components with a single, unified "Filtering" dropdown menu.
- Organised filtering options into categorised submenus in the following order: Direction, Sort By, and Model Type.
- Enhanced submenu labels to display the currently active selection inline for quick reference.
- Improved visual alignment within menus by using hidden checkmarks on unselected items, ensuring consistent indentation across all options.
- Resolved styling and linting issues (unused variables, JSX bind warnings) within the new component.

* Lint fix

* Addresses PR feedback to use translation strings directly within `ORDER_BY_OPTIONS`.

Previously, sort keys and their translated labels were maintained in separate constructs (`ORDER_BY_OPTIONS` array and `ORDER_BY_LABELS` map). This refactor converts `ORDER_BY_OPTIONS` into an array of objects containing both the `key` and its corresponding `i18nKey`, creating a single source of truth.

This change:
- Simplifies the `SortBySubMenu` component by removing the redundant `ORDER_BY_LABELS` lookup map.
- Improves maintainability by ensuring developers only need to update one place when adding or modifying sort options.
- Reduces the risk of mismatched keys and labels.

---------

Co-authored-by: Jonathan <34005131+JPPhoto@users.noreply.github.com>
Co-authored-by: Alexander Eichhorn <alex@eichhorn.dev>
Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>

Author: 4 people

invokeai/app/api/routers/model_manager.py

@@ -26,9 +26,11 @@
 from invokeai.app.services.model_records import (
     InvalidModelException,
     ModelRecordChanges,
+    ModelRecordOrderBy,
     UnknownModelException,
 )
 from invokeai.app.services.orphaned_models import OrphanedModelInfo
+from invokeai.app.services.shared.sqlite.sqlite_common import SQLiteDirection
 from invokeai.app.util.suppress_output import SuppressOutput
 from invokeai.backend.model_manager.configs.external_api import ExternalApiModelConfig
 from invokeai.backend.model_manager.configs.factory import AnyModelConfig, ModelConfigFactory
@@ -159,6 +161,8 @@ async def list_model_records(
     model_format: Optional[ModelFormat] = Query(
         default=None, description="Exact match on the format of the model (e.g. 'diffusers')"
     ),
+    order_by: ModelRecordOrderBy = Query(default=ModelRecordOrderBy.Name, description="The field to order by"),
+    direction: SQLiteDirection = Query(default=SQLiteDirection.Ascending, description="The direction to order by"),
 ) -> ModelsList:
     """Get a list of models."""
     record_store = ApiDependencies.invoker.services.model_manager.store
@@ -167,12 +171,23 @@ async def list_model_records(
         for base_model in base_models:
             found_models.extend(
                 record_store.search_by_attr(
-                    base_model=base_model, model_type=model_type, model_name=model_name, model_format=model_format
+                    base_model=base_model,
+                    model_type=model_type,
+                    model_name=model_name,
+                    model_format=model_format,
+                    order_by=order_by,
+                    direction=direction,
                 )
             )
     else:
         found_models.extend(
-            record_store.search_by_attr(model_type=model_type, model_name=model_name, model_format=model_format)
+            record_store.search_by_attr(
+                model_type=model_type,
+                model_name=model_name,
+                model_format=model_format,
+                order_by=order_by,
+                direction=direction,
+            )
         )
     for index, model in enumerate(found_models):
         found_models[index] = prepare_model_config_for_response(model, ApiDependencies)

invokeai/app/services/model_records/model_records_base.py

@@ -11,6 +11,7 @@
 from pydantic import BaseModel, Field
 
 from invokeai.app.services.shared.pagination import PaginatedResults
+from invokeai.app.services.shared.sqlite.sqlite_common import SQLiteDirection
 from invokeai.app.util.model_exclude_null import BaseModelExcludeNull
 from invokeai.backend.model_manager.configs.controlnet import ControlAdapterDefaultSettings
 from invokeai.backend.model_manager.configs.external_api import (
@@ -60,6 +61,10 @@ class ModelRecordOrderBy(str, Enum):
     Base = "base"
     Name = "name"
     Format = "format"
+    Size = "size"
+    DateAdded = "created_at"
+    DateModified = "updated_at"
+    Path = "path"
 
 
 class ModelSummary(BaseModel):
@@ -200,7 +205,11 @@ def get_model_by_hash(self, hash: str) -> AnyModelConfig:
 
     @abstractmethod
     def list_models(
-        self, page: int = 0, per_page: int = 10, order_by: ModelRecordOrderBy = ModelRecordOrderBy.Default
+        self,
+        page: int = 0,
+        per_page: int = 10,
+        order_by: ModelRecordOrderBy = ModelRecordOrderBy.Default,
+        direction: SQLiteDirection = SQLiteDirection.Ascending,
     ) -> PaginatedResults[ModelSummary]:
         """Return a paginated summary listing of each model in the database."""
         pass
@@ -237,6 +246,8 @@ def search_by_attr(
         base_model: Optional[BaseModelType] = None,
         model_type: Optional[ModelType] = None,
         model_format: Optional[ModelFormat] = None,
+        order_by: ModelRecordOrderBy = ModelRecordOrderBy.Default,
+        direction: SQLiteDirection = SQLiteDirection.Ascending,
     ) -> List[AnyModelConfig]:
         """
         Return models matching name, base and/or type.

invokeai/app/services/model_records/model_records_sql.py

@@ -57,6 +57,7 @@
     UnknownModelException,
 )
 from invokeai.app.services.shared.pagination import PaginatedResults
+from invokeai.app.services.shared.sqlite.sqlite_common import SQLiteDirection
 from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
 from invokeai.backend.model_manager.configs.factory import AnyModelConfig, ModelConfigFactory
 from invokeai.backend.model_manager.taxonomy import BaseModelType, ModelFormat, ModelType
@@ -257,6 +258,7 @@ def search_by_attr(
         model_type: Optional[ModelType] = None,
         model_format: Optional[ModelFormat] = None,
         order_by: ModelRecordOrderBy = ModelRecordOrderBy.Default,
+        direction: SQLiteDirection = SQLiteDirection.Ascending,
     ) -> List[AnyModelConfig]:
         """
         Return models matching name, base and/or type.
@@ -266,18 +268,24 @@ def search_by_attr(
         :param model_type: Filter by type of model (optional)
         :param model_format: Filter by model format (e.g. "diffusers") (optional)
         :param order_by: Result order
+        :param direction: Result direction
 
         If none of the optional filters are passed, will return all
         models in the database.
         """
         with self._db.transaction() as cursor:
             assert isinstance(order_by, ModelRecordOrderBy)
+            order_dir = "DESC" if direction == SQLiteDirection.Descending else "ASC"
             ordering = {
-                ModelRecordOrderBy.Default: "type, base, name, format",
+                ModelRecordOrderBy.Default: f"type {order_dir}, base COLLATE NOCASE {order_dir}, name COLLATE NOCASE {order_dir}, format",
                 ModelRecordOrderBy.Type: "type",
-                ModelRecordOrderBy.Base: "base",
-                ModelRecordOrderBy.Name: "name",
+                ModelRecordOrderBy.Base: "base COLLATE NOCASE",
+                ModelRecordOrderBy.Name: "name COLLATE NOCASE",
                 ModelRecordOrderBy.Format: "format",
+                ModelRecordOrderBy.Size: "IFNULL(json_extract(config, '$.file_size'), 0)",
+                ModelRecordOrderBy.DateAdded: "created_at",
+                ModelRecordOrderBy.DateModified: "updated_at",
+                ModelRecordOrderBy.Path: "path",
             }
 
             where_clause: list[str] = []
@@ -301,7 +309,7 @@ def search_by_attr(
                 SELECT config
                 FROM models
                 {where}
-                ORDER BY {ordering[order_by]} -- using ? to bind doesn't work here for some reason;
+                ORDER BY {ordering[order_by]} {order_dir} -- using ? to bind doesn't work here for some reason;
                 """,
                 tuple(bindings),
             )
@@ -357,17 +365,26 @@ def search_by_hash(self, hash: str) -> List[AnyModelConfig]:
         return results
 
     def list_models(
-        self, page: int = 0, per_page: int = 10, order_by: ModelRecordOrderBy = ModelRecordOrderBy.Default
+        self,
+        page: int = 0,
+        per_page: int = 10,
+        order_by: ModelRecordOrderBy = ModelRecordOrderBy.Default,
+        direction: SQLiteDirection = SQLiteDirection.Ascending,
     ) -> PaginatedResults[ModelSummary]:
         """Return a paginated summary listing of each model in the database."""
         with self._db.transaction() as cursor:
             assert isinstance(order_by, ModelRecordOrderBy)
+            order_dir = "DESC" if direction == SQLiteDirection.Descending else "ASC"
             ordering = {
-                ModelRecordOrderBy.Default: "type, base, name, format",
+                ModelRecordOrderBy.Default: f"type {order_dir}, base COLLATE NOCASE {order_dir}, name COLLATE NOCASE {order_dir}, format",
                 ModelRecordOrderBy.Type: "type",
-                ModelRecordOrderBy.Base: "base",
-                ModelRecordOrderBy.Name: "name",
+                ModelRecordOrderBy.Base: "base COLLATE NOCASE",
+                ModelRecordOrderBy.Name: "name COLLATE NOCASE",
                 ModelRecordOrderBy.Format: "format",
+                ModelRecordOrderBy.Size: "IFNULL(json_extract(config, '$.file_size'), 0)",
+                ModelRecordOrderBy.DateAdded: "created_at",
+                ModelRecordOrderBy.DateModified: "updated_at",
+                ModelRecordOrderBy.Path: "path",
             }
 
             # Lock so that the database isn't updated while we're doing the two queries.
@@ -385,7 +402,7 @@ def list_models(
                 f"""--sql
                 SELECT config
                 FROM models
-                ORDER BY {ordering[order_by]} -- using ? to bind doesn't work here for some reason
+                ORDER BY {ordering[order_by]} {order_dir} -- using ? to bind doesn't work here for some reason
                 LIMIT ?
                 OFFSET ?;
                 """,

invokeai/frontend/web/public/locales/en.json

@@ -1203,6 +1203,15 @@
         "modelType": "Model Type",
         "modelUpdated": "Model Updated",
         "modelUpdateFailed": "Model Update Failed",
+        "sortByName": "Name",
+        "sortByBase": "Base",
+        "sortBySize": "Size",
+        "sortByDateAdded": "Date Added",
+        "sortByDateModified": "Date Modified",
+        "sortByPath": "Path",
+        "sortByType": "Type",
+        "sortByFormat": "Format",
+        "sortDefault": "Default",
         "name": "Name",
         "externalProvider": "External Provider",
         "externalCapabilities": "External Capabilities",

invokeai/frontend/web/src/common/hooks/useSubMenu.tsx

@@ -151,11 +151,18 @@ export const useSubMenu = (): UseSubMenuReturn => {
   };
 };
 
-export const SubMenuButtonContent = ({ label }: { label: string }) => {
+export const SubMenuButtonContent = ({ label, value }: { label: string; value?: string }) => {
   return (
     <Flex w="full" h="full" flexDir="row" justifyContent="space-between" alignItems="center">
       <Text>{label}</Text>
-      <Icon as={PiCaretRightBold} />
+      <Flex alignItems="center" gap={2}>
+        {value !== undefined && (
+          <Text fontSize="sm" color="base.400">
+            {value}
+          </Text>
+        )}
+        <Icon as={PiCaretRightBold} />
+      </Flex>
     </Flex>
   );
 };

invokeai/frontend/web/src/features/modelManagerV2/models.ts

@@ -31,7 +31,7 @@ export type ModelCategoryData = {
   filter: (config: AnyModelConfig) => boolean;
 };
 
-export const MODEL_CATEGORIES: Record<ModelCategoryType, ModelCategoryData> = {
+const MODEL_CATEGORIES: Record<ModelCategoryType, ModelCategoryData> = {
   unknown: {
     category: 'unknown',
     i18nKey: 'common.unknown',

invokeai/frontend/web/src/features/modelManagerV2/store/modelManagerV2Slice.ts

@@ -25,6 +25,10 @@ const zModelManagerState = z.object({
   scanPath: z.string().optional(),
   shouldInstallInPlace: z.boolean(),
   selectedModelKeys: z.array(z.string()),
+  orderBy: z
+    .enum(['default', 'name', 'type', 'base', 'size', 'created_at', 'updated_at', 'path', 'format'])
+    .default('name'),
+  sortDirection: z.enum(['asc', 'desc']).default('asc'),
 });
 
 type ModelManagerState = z.infer<typeof zModelManagerState>;
@@ -38,6 +42,8 @@ const getInitialState = (): ModelManagerState => ({
   scanPath: undefined,
   shouldInstallInPlace: true,
   selectedModelKeys: [],
+  orderBy: 'name',
+  sortDirection: 'asc',
 });
 
 const slice = createSlice({
@@ -77,6 +83,12 @@ const slice = createSlice({
     clearModelSelection: (state) => {
       state.selectedModelKeys = [];
     },
+    setOrderBy: (state, action: PayloadAction<ModelManagerState['orderBy']>) => {
+      state.orderBy = action.payload;
+    },
+    setSortDirection: (state, action: PayloadAction<ModelManagerState['sortDirection']>) => {
+      state.sortDirection = action.payload;
+    },
   },
 });
 
@@ -90,6 +102,8 @@ export const {
   modelSelectionChanged,
   toggleModelSelection,
   clearModelSelection,
+  setOrderBy,
+  setSortDirection,
 } = slice.actions;
 
 export const modelManagerSliceConfig: SliceConfig<typeof slice> = {
@@ -119,3 +133,5 @@ export const selectSearchTerm = createModelManagerSelector((mm) => mm.searchTerm
 export const selectFilteredModelType = createModelManagerSelector((mm) => mm.filteredModelType);
 export const selectShouldInstallInPlace = createModelManagerSelector((mm) => mm.shouldInstallInPlace);
 export const selectSelectedModelKeys = createModelManagerSelector((mm) => mm.selectedModelKeys);
+export const selectOrderBy = createModelManagerSelector((mm) => mm.orderBy);
+export const selectSortDirection = createModelManagerSelector((mm) => mm.sortDirection);