fix: DEV-2905: Change the model version selector api response handling and present upgrade error for out of date ml backend

label_studio/data_manager/managers.py

@@ -516,14 +516,25 @@ def annotate_predictions_score(queryset):
     if not first_task:
         return queryset
 
-    model_version = first_task.project.model_version
-    if model_version is None:
-        return queryset.annotate(predictions_score=Avg("predictions__score"))
+    # new approach with each ML backend contains it's version
+    if flag_set('ff_front_dev_1682_model_version_dropdown_070622_short', first_task.project.organization.created_by):
+        model_versions = list(first_task.project.ml_backends.filter(project=first_task.project).
+                              values_list("model_version", flat=True))
+        if len(model_versions) == 0:
+            return queryset.annotate(predictions_score=Avg("predictions__score"))
 
+        else:
+            return queryset.annotate(predictions_score=Avg(
+                "predictions__score", filter=Q(predictions__model_version__in=model_versions)
+            ))
     else:
-        return queryset.annotate(predictions_score=Avg(
-            "predictions__score", filter=Q(predictions__model_version=model_version)
-        ))
+        model_version = first_task.project.model_version
+        if model_version is None:
+            return queryset.annotate(predictions_score=Avg("predictions__score"))
+        else:
+            return queryset.annotate(predictions_score=Avg(
+                "predictions__score", filter=Q(predictions__model_version=model_version)
+            ))
 
 
 def annotate_annotations_ids(queryset):

label_studio/frontend/src/pages/Settings/MachineLearningSettings/MachineLearningList.js

@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import { format, isValid } from 'date-fns';
 import { useCallback, useContext } from 'react';
 import { FaEllipsisV } from 'react-icons/fa';
 import truncate from 'truncate-middle';
@@ -46,7 +46,7 @@ export const MachineLearningList = ({ backends, fetchBackends, onEdit }) => {
   );
 };
 
-const BackendCard = ({backend, onStartTrain, onEdit, onDelete}) => {
+const BackendCard = ({ backend, onStartTrain, onEdit, onDelete }) => {
   const confirmDelete = useCallback((backend) => {
     confirm({
       title: "Delete ML Backend",
@@ -57,7 +57,7 @@ const BackendCard = ({backend, onStartTrain, onEdit, onDelete}) => {
   }, [backend, onDelete]);
 
   return (
-    <Card style={{marginTop: 0}} header={backend.title} extra={(
+    <Card style={{ marginTop: 0 }} header={backend.title} extra={(
       <div className={cn('ml').elem('info')}>
         <BackendState backend={backend}/>
 
@@ -72,7 +72,7 @@ const BackendCard = ({backend, onStartTrain, onEdit, onDelete}) => {
       </div>
     )}>
       <DescriptionList className={cn('ml').elem('summary')}>
-        <DescriptionList.Item term="URL" termStyle={{whiteSpace: 'nowrap'}}>
+        <DescriptionList.Item term="URL" termStyle={{ whiteSpace: 'nowrap' }}>
           {truncate(backend.url, 20, 10, '...')}
         </DescriptionList.Item>
         {backend.description && (
@@ -82,7 +82,9 @@ const BackendCard = ({backend, onStartTrain, onEdit, onDelete}) => {
           />
         )}
         <DescriptionList.Item term="Version">
-          {backend.version ? format(new Date(backend.version), 'MMMM dd, yyyy ∙ HH:mm:ss') : 'unknown'}
+          {backend.model_version && isValid(backend.model_version) ?
+            format(new Date(isNaN(backend.model_version) ? backend.model_version: Number(backend.model_version)), 'MMMM dd, yyyy ∙ HH:mm:ss')
+            : backend.model_version || 'unknown'}
         </DescriptionList.Item>
       </DescriptionList>
 
@@ -93,11 +95,12 @@ const BackendCard = ({backend, onStartTrain, onEdit, onDelete}) => {
   );
 };
 
-const BackendState = ({backend}) => {
+const BackendState = ({ backend }) => {
   const { state } = backend;
+
   return (
     <div className={cn('ml').elem('status')}>
-      <span className={cn('ml').elem('indicator').mod({state})}></span>
+      <span className={cn('ml').elem('indicator').mod({ state })}></span>
       <Oneof value={state} className={cn('ml').elem('status-label')}>
         <span case="DI">Disconnected</span>
         <span case="CO">Connected</span>

label_studio/frontend/src/pages/Settings/MachineLearningSettings/MachineLearningSettings.js

@@ -65,7 +65,6 @@ export const MachineLearningSettings = () => {
               <ModelVersionSelector
                 object={backend}
                 apiName="modelVersions"
-                valueName="version"
                 label="Version"
               />
             </Form.Row>

label_studio/frontend/src/pages/Settings/MachineLearningSettings/ModelVersionSelector.js

@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useAPI } from '../../../providers/ApiProvider';
 import { Select } from '../../../components/Form';
+import { Block, Elem } from '../../../utils/bem';
+
+import './ModelVersionSelector.styl';
 
 export const ModelVersionSelector = ({
   name = "model_version",
@@ -11,7 +14,14 @@ export const ModelVersionSelector = ({
   ...props
 }) => {
   const api = useAPI();
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
   const [versions, setVersions] = useState([]);
+  const [version, setVersion] = useState(object?.[valueName] || null);
+
+  useEffect(() => {
+    setVersion(object?.[valueName] || null);
+  }, [object?.[valueName]]);
 
   const fetchMLVersions = useCallback(async () => {
     const pk = object?.id;
@@ -24,24 +34,50 @@ export const ModelVersionSelector = ({
       },
     });
 
-    if (!modelVersions) return;
+    // handle possible error
+    if (modelVersions?.message) {
+      setError(modelVersions.message);
+    }
+
+    if (modelVersions?.versions?.length) {
+      setVersions(modelVersions.versions.map(version => ({
+        value: version,
+        label: version,
+      })));
+    }
 
-    setVersions(Object.entries(modelVersions).reduce((v, [key, value]) => [...v, {
-      value: key,
-      label: key + " (" + value + " predictions)",
-    }], []));
+    setLoading(false);
   }, [api, object?.id, apiName]);
 
   useEffect(fetchMLVersions, []);
 
   return (
-    <Select
-      name={name}
-      disabled={!versions.length}
-      defaultValue={object?.[valueName] || null}
-      options={versions}
-      placeholder={placeholder}
-      {...props}
-    />
+    <Block name="modelVersionSelector">
+      {loading ? (
+        <Select
+          disabled={true}
+          value={null}
+          options={[]}
+          placeholder={"Loading ..."}
+          {...props}
+        />
+      )
+        : (
+          <Select
+            name={name}
+            disabled={!versions.length}
+            value={version}
+            onChange={e => setVersion(e.target.value)}
+            options={versions}
+            placeholder={placeholder}
+            {...props}
+          />
+        )}
+      {error && (
+        <Elem name="message">
+          {error}
+        </Elem>
+      )}
+    </Block>
   );
 };

label_studio/frontend/src/pages/Settings/MachineLearningSettings/ModelVersionSelector.styl

@@ -0,0 +1,11 @@
+.modelVersionSelector
+  width 100%
+  display flex
+  flex-direction column
+  gap 12px
+
+  &__message
+    font-size 16px
+    color #DD0000
+    margin-bottom 12px
+

label_studio/frontend/src/pages/Settings/MachineLearningSettings/ProjectModelVersionSelector.js

@@ -13,7 +13,13 @@ export const ProjectModelVersionSelector = ({
 }) => {
   const api = useAPI();
   const { project, updateProject } = useContext(ProjectContext);
+  const [loading, setLoading] = useState(true);
   const [versions, setVersions] = useState([]);
+  const [version, setVersion] = useState(project?.[valueName] || null);
+
+  useEffect(() => {
+    setVersion(project?.[valueName] || null);
+  }, [project?.[valueName]]);
 
   const resetMLVersion = useCallback(async (e) => {
     e.preventDefault();
@@ -35,12 +41,14 @@ export const ProjectModelVersionSelector = ({
       },
     });
 
-    if (!modelVersions) return;
+    if (modelVersions) {
+      setVersions(Object.entries(modelVersions).reduce((v, [key, value]) => [...v, {
+        value: key,
+        label: `${key} (${value} predictions)`,
+      }], []));
+    }
 
-    setVersions(Object.entries(modelVersions).reduce((v, [key, value]) => [...v, {
-      value: key,
-      label: key + " (" + value + " predictions)",
-    }], []));
+    setLoading(false);
   }, [api, project?.id, apiName]);
 
   useEffect(fetchMLVersions, [fetchMLVersions]);
@@ -52,10 +60,10 @@ export const ProjectModelVersionSelector = ({
         description={(
           <>
             Model version allows you to specify which prediction will be shown to the annotators.
-            {project.model_version && (
+            {version && (
               <>
                 <br />
-                <b>Current project model version: {project.model_version}</b>
+                <b>Current project model version: {version}</b>
               </>
             )}
           </>
@@ -66,14 +74,26 @@ export const ProjectModelVersionSelector = ({
 
       <div style={{ display: 'flex', alignItems: 'center', width: 400, paddingLeft: 16 }}>
         <div style={{ flex: 1, paddingRight: 16 }}>
-          <Select
-            name={name}
-            disabled={!versions.length}
-            defaultValue={project?.[valueName] || null}
-            options={versions}
-            placeholder={placeholder}
-            {...props}
-          />
+          {loading ? (
+            <Select
+              disabled={true}
+              value={null}
+              options={[]}
+              placeholder={"Loading ..."}
+              {...props}
+            />
+          )
+            : (
+              <Select
+                name={name}
+                disabled={!versions.length}
+                value={version}
+                onChange={e => setVersion(e.target.value)}
+                options={versions}
+                placeholder={placeholder}
+                {...props}
+              />
+            )}
         </div>
 
         <Button onClick={resetMLVersion}>

label_studio/ml/api.py

@@ -254,3 +254,32 @@ def post(self, request, *args, **kwargs):
             result,
             status=status.HTTP_200_OK,
         )
+
+
+@method_decorator(
+    name='get',
+    decorator=swagger_auto_schema(
+        tags=['Machine Learning'],
+        operation_summary='Get model versions',
+        operation_description='Get available versions of the model.',
+        responses={"200": "List of available versions."},
+    ),
+)
+class MLBackendVersionsAPI(generics.RetrieveAPIView):
+
+    permission_required = all_permissions.projects_change
+
+    def get(self, request, *args, **kwargs):
+        ml_backend = get_object_with_check_and_log(request, MLBackend, pk=self.kwargs['pk'])
+        self.check_object_permissions(self.request, ml_backend)
+        versions_response = ml_backend.get_versions()
+        if versions_response.status_code == 200:
+            result = {'versions': versions_response.response.get("versions", [])}
+            return Response(data=result, status=200)
+        elif versions_response.status_code == 404:
+            result = {'versions': [ml_backend.model_version], 'message': 'Upgrade your ML backend version to latest.'}
+            return Response(data=result, status=200)
+        else:
+            result = {'error': str(versions_response.error_message)}
+            status_code = versions_response.status_code if versions_response.status_code > 0 else 500
+            return Response(data=result, status=status_code)

label_studio/ml/api_connector.py

@@ -213,12 +213,13 @@ def health(self):
     def validate(self, config):
         return self._request('validate', request={'config': config}, timeout=self._validate_request_timeout)
 
-    def setup(self, project):
+    def setup(self, project, model_version=None):
         return self._request('setup', request={
             'project': self._create_project_uid(project),
             'schema': project.label_config,
             'hostname': settings.HOSTNAME if settings.HOSTNAME else ('http://localhost:' + settings.INTERNAL_PORT),
-            'access_token': project.created_by.auth_token.key
+            'access_token': project.created_by.auth_token.key,
+            'model_version': model_version
         }, timeout=TIMEOUT_SETUP)
 
     def duplicate_model(self, project_src, project_dst):
@@ -233,6 +234,11 @@ def delete(self, project):
     def get_train_job_status(self, train_job):
         return self._request('job_status', request={'job': train_job.job_id}, timeout=TIMEOUT_TRAIN_JOB_STATUS)
 
+    def get_versions(self, project):
+        return self._request('versions', request={
+            'project': self._create_project_uid(project)
+        }, timeout=TIMEOUT_SETUP, method='POST')
+
 
 def get_ml_api(project):
     if project.ml_backend_active_connection is None:

label_studio/ml/migrations/0006_mlbackend_auto_update.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.1.14 on 2022-02-14 15:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('ml', '0005_auto_20211010_1344'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='mlbackend',
+            name='auto_update',
+            field=models.BooleanField(default=True, help_text='If false, model version is set by the user, if true - getting latest version from backend.', verbose_name='auto_update'),
+        ),
+    ]