Only sorting variables on fetch to avoid sort during configuration.

frontend/src/app/ml-models/ml-model-form/ml-model-form.component.ts

@@ -418,7 +418,9 @@ export class MlModelFormComponent implements OnInit {
         const ts = this.value('timespans');
         variables = await this.mlModelsService.getVariables(input, dataset, ts);
         variables.sort((a: Variable, b: Variable) => {
-          return a.source.localeCompare(b.source);
+          const aCompare = `${a.role + a.source + a.name}`;
+          const bCompare = `${b.role + b.source + a.name}`;
+          return aCompare.localeCompare(bCompare);
         });
         this.cachedVariables = variables;
         this.errorMessage = '';
@@ -463,12 +465,6 @@ export class MlModelFormComponent implements OnInit {
       return;
     }
 
-    existingVariables.sort((a: Variable, b: Variable) => {
-      const aCompare = `${a.source + a.role}`;
-      const bCompare = `${b.source + b.role}`;
-      return aCompare.localeCompare(bCompare);
-    });
-
     let controls = [];
 
     for (let existingVariable of existingVariables) {