fix: Restore Model display and select functionality

invokeai/frontend/web/src/features/system/components/ModelManager/ModelList.tsx

@@ -1,36 +1,16 @@
 import { Box, Flex, Heading, Spacer, Spinner, Text } from '@chakra-ui/react';
-import IAIInput from 'common/components/IAIInput';
 import IAIButton from 'common/components/IAIButton';
+import IAIInput from 'common/components/IAIInput';
 
 import AddModel from './AddModel';
-import ModelListItem from './ModelListItem';
 import MergeModels from './MergeModels';
+import ModelListItem from './ModelListItem';
 
-import { useAppSelector } from 'app/store/storeHooks';
 import { useTranslation } from 'react-i18next';
 
-import { createSelector } from '@reduxjs/toolkit';
-import { systemSelector } from 'features/system/store/systemSelectors';
-import type { SystemState } from 'features/system/store/systemSlice';
-import { isEqual, map } from 'lodash-es';
-
-import React, { useMemo, useState, useTransition } from 'react';
 import type { ChangeEvent, ReactNode } from 'react';
-
+import React, { useMemo, useState, useTransition } from 'react';
-const modelListSelector = createSelector(
+import { useListModelsQuery } from 'services/api/endpoints/models';
-  systemSelector,
-  (system: SystemState) => {
-    const models = map(system.model_list, (model, key) => {
-      return { name: key, ...model };
-    });
-    return models;
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
-);
 
 function ModelFilterButton({
   label,
@@ -58,7 +38,9 @@ function ModelFilterButton({
 }
 
 const ModelList = () => {
-  const models = useAppSelector(modelListSelector);
+  const { data: pipelineModels } = useListModelsQuery({
+    model_type: 'pipeline',
+  });
 
   const [renderModelList, setRenderModelList] = React.useState<boolean>(false);
 
@@ -90,43 +72,49 @@ const ModelList = () => {
     const filteredModelListItemsToRender: ReactNode[] = [];
     const localFilteredModelListItemsToRender: ReactNode[] = [];
 
-    models.forEach((model, i) => {
+    if (!pipelineModels) return;
-      if (model.name.toLowerCase().includes(searchText.toLowerCase())) {
+
+    const modelList = pipelineModels.entities;
+
+    Object.keys(modelList).forEach((model, i) => {
+      if (
+        modelList[model].name.toLowerCase().includes(searchText.toLowerCase())
+      ) {
         filteredModelListItemsToRender.push(
           <ModelListItem
             key={i}
-            name={model.name}
+            modelKey={model}
-            status={model.status}
+            name={modelList[model].name}
-            description={model.description}
+            description={modelList[model].description}
           />
         );
-        if (model.format === isSelectedFilter) {
+        if (modelList[model]?.model_format === isSelectedFilter) {
           localFilteredModelListItemsToRender.push(
             <ModelListItem
               key={i}
-              name={model.name}
+              modelKey={model}
-              status={model.status}
+              name={modelList[model].name}
-              description={model.description}
+              description={modelList[model].description}
             />
           );
         }
       }
-      if (model.format !== 'diffusers') {
+      if (modelList[model]?.model_format !== 'diffusers') {
         ckptModelListItemsToRender.push(
           <ModelListItem
             key={i}
-            name={model.name}
+            modelKey={model}
-            status={model.status}
+            name={modelList[model].name}
-            description={model.description}
+            description={modelList[model].description}
           />
         );
       } else {
         diffusersModelListItemsToRender.push(
           <ModelListItem
             key={i}
-            name={model.name}
+            modelKey={model}
-            status={model.status}
+            name={modelList[model].name}
-            description={model.description}
+            description={modelList[model].description}
           />
         );
       }
@@ -142,6 +130,23 @@ const ModelList = () => {
       <Flex flexDirection="column" rowGap={6}>
         {isSelectedFilter === 'all' && (
           <>
+            <Box>
+              <Text
+                sx={{
+                  fontWeight: '500',
+                  py: 2,
+                  px: 4,
+                  mb: 4,
+                  borderRadius: 'base',
+                  width: 'max-content',
+                  fontSize: 'sm',
+                  bg: 'base.750',
+                }}
+              >
+                {t('modelManager.diffusersModels')}
+              </Text>
+              {diffusersModelListItemsToRender}
+            </Box>
             <Box>
               <Text
                 sx={{
@@ -160,40 +165,23 @@ const ModelList = () => {
               </Text>
               {ckptModelListItemsToRender}
             </Box>
-            <Box>
-              <Text
-                sx={{
-                  fontWeight: '500',
-                  py: 2,
-                  px: 4,
-                  mb: 4,
-                  borderRadius: 'base',
-                  width: 'max-content',
-                  fontSize: 'sm',
-                  bg: 'base.750',
-                }}
-              >
-                {t('modelManager.diffusersModels')}
-              </Text>
-              {diffusersModelListItemsToRender}
-            </Box>
           </>
         )}
 
-        {isSelectedFilter === 'ckpt' && (
-          <Flex flexDirection="column" marginTop={4}>
-            {ckptModelListItemsToRender}
-          </Flex>
-        )}
-
         {isSelectedFilter === 'diffusers' && (
           <Flex flexDirection="column" marginTop={4}>
             {diffusersModelListItemsToRender}
           </Flex>
         )}
+
+        {isSelectedFilter === 'ckpt' && (
+          <Flex flexDirection="column" marginTop={4}>
+            {ckptModelListItemsToRender}
+          </Flex>
+        )}
       </Flex>
     );
-  }, [models, searchText, t, isSelectedFilter]);
+  }, [pipelineModels, searchText, t, isSelectedFilter]);
 
   return (
     <Flex flexDirection="column" rowGap={4} width="50%" minWidth="50%">
@@ -211,7 +199,7 @@ const ModelList = () => {
 
       <Flex
         flexDirection="column"
-        gap={1}
+        gap={4}
         maxHeight={window.innerHeight - 240}
         overflow="scroll"
         paddingInlineEnd={4}
@@ -222,16 +210,16 @@ const ModelList = () => {
             onClick={() => setIsSelectedFilter('all')}
             isActive={isSelectedFilter === 'all'}
           />
-          <ModelFilterButton
-            label={t('modelManager.checkpointModels')}
-            onClick={() => setIsSelectedFilter('ckpt')}
-            isActive={isSelectedFilter === 'ckpt'}
-          />
           <ModelFilterButton
             label={t('modelManager.diffusersModels')}
             onClick={() => setIsSelectedFilter('diffusers')}
             isActive={isSelectedFilter === 'diffusers'}
           />
+          <ModelFilterButton
+            label={t('modelManager.checkpointModels')}
+            onClick={() => setIsSelectedFilter('ckpt')}
+            isActive={isSelectedFilter === 'ckpt'}
+          />
         </Flex>
 
         {renderModelList ? (

invokeai/frontend/web/src/features/system/components/ModelManager/ModelListItem.tsx

@@ -1,6 +1,6 @@
 import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
 import { Box, Button, Flex, Spacer, Text, Tooltip } from '@chakra-ui/react';
-import { ModelStatus } from 'app/types/invokeai';
+
 // import { deleteModel, requestModelChange } from 'app/socketio/actions';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -10,9 +10,9 @@ import { setOpenModel } from 'features/system/store/systemSlice';
 import { useTranslation } from 'react-i18next';
 
 type ModelListItemProps = {
+  modelKey: string;
   name: string;
-  status: ModelStatus;
+  description: string | undefined;
-  description: string;
 };
 
 export default function ModelListItem(props: ModelListItemProps) {
@@ -28,18 +28,18 @@ export default function ModelListItem(props: ModelListItemProps) {
 
   const dispatch = useAppDispatch();
 
-  const { name, status, description } = props;
+  const { modelKey, name, description } = props;
 
   const handleChangeModel = () => {
-    dispatch(requestModelChange(name));
+    dispatch(requestModelChange(modelKey));
   };
 
   const openModelHandler = () => {
-    dispatch(setOpenModel(name));
+    dispatch(setOpenModel(modelKey));
   };
 
   const handleModelDelete = () => {
-    dispatch(deleteModel(name));
+    dispatch(deleteModel(modelKey));
     dispatch(setOpenModel(null));
   };
 
@@ -60,7 +60,7 @@ export default function ModelListItem(props: ModelListItemProps) {
       p={2}
       borderRadius="base"
       sx={
-        name === openModel
+        modelKey === openModel
           ? {
               bg: 'accent.750',
               _hover: {
@@ -81,7 +81,6 @@ export default function ModelListItem(props: ModelListItemProps) {
       </Box>
       <Spacer onClick={openModelHandler} cursor="pointer" />
       <Flex gap={2} alignItems="center">
-        <Text color={statusTextColor()}>{status}</Text>
         <Button
           size="sm"
           onClick={handleChangeModel}

invokeai/frontend/web/src/features/system/components/ModelManager/ModelManagerModal.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { ReactElement } from 'react';
 
+import { useListModelsQuery } from 'services/api/endpoints/models';
 import CheckpointModelEdit from './CheckpointModelEdit';
 import DiffusersModelEdit from './DiffusersModelEdit';
 import ModelList from './ModelList';
@@ -34,9 +35,9 @@ export default function ModelManagerModal({
     onClose: onModelManagerModalClose,
   } = useDisclosure();
 
-  const model_list = useAppSelector(
+  const { data: pipelineModels } = useListModelsQuery({
-    (state: RootState) => state.system.model_list
+    model_type: 'pipeline',
-  );
+  });
 
   const openModel = useAppSelector(
     (state: RootState) => state.system.openModel
@@ -61,7 +62,10 @@ export default function ModelManagerModal({
           <ModalBody>
             <Flex width="100%" columnGap={8}>
               <ModelList />
-              {openModel && model_list[openModel]['format'] === 'diffusers' ? (
+              {openModel &&
+              pipelineModels &&
+              pipelineModels['entities'][openModel]['model_format'] ===
+                'diffusers' ? (
                 <DiffusersModelEdit />
               ) : (
                 <CheckpointModelEdit />