Sort run names with leading numbers differently

tensorboard/webapp/runs/views/runs_table/BUILD

@@ -64,6 +64,7 @@ tf_ng_module(
         "runs_table_component.ts",
         "runs_table_container.ts",
         "runs_table_module.ts",
+        "sorting_utils.ts",
     ],
     assets = [
         ":regex_edit_dialog_styles",
@@ -131,6 +132,7 @@ tf_ts_library(
         "regex_edit_dialog_test.ts",
         "runs_data_table_test.ts",
         "runs_table_test.ts",
+        "sorting_utils_test.ts",
     ],
     deps = [
         ":runs_table",

tensorboard/webapp/runs/views/runs_table/runs_table_container.ts

@@ -70,7 +70,6 @@ import {
   ColumnHeader,
   FilterAddedEvent,
   SortingInfo,
-  SortingOrder,
   TableData,
 } from '../../../widgets/data_table/types';
 import {
@@ -101,6 +100,7 @@ import {
   getPotentialHparamColumns,
 } from '../../../metrics/views/main_view/common_selectors';
 import {runsTableFullScreenToggled} from '../../../core/actions';
+import {sortTableDataItems} from './sorting_utils';
 
 const getRunsLoading = createSelector<
   State,
@@ -182,34 +182,6 @@ function sortRunTableItems(
   return sortedItems;
 }
 
-function sortTableDataItems(
-  items: TableData[],
-  sort: SortingInfo
-): TableData[] {
-  const sortedItems = [...items];
-
-  sortedItems.sort((a, b) => {
-    let aValue = a[sort.name];
-    let bValue = b[sort.name];
-
-    if (sort.name === 'experimentAlias') {
-      aValue = (aValue as ExperimentAlias).aliasNumber;
-      bValue = (bValue as ExperimentAlias).aliasNumber;
-    }
-
-    if (aValue === bValue) {
-      return 0;
-    }
-
-    if (aValue === undefined || bValue === undefined) {
-      return bValue === undefined ? -1 : 1;
-    }
-
-    return aValue < bValue === (sort.order === SortingOrder.ASCENDING) ? -1 : 1;
-  });
-  return sortedItems;
-}
-
 function matchFilter(
   filter: DiscreteFilter | IntervalFilter,
   value: number | DiscreteHparamValue | undefined

tensorboard/webapp/runs/views/runs_table/sorting_utils.ts

@@ -0,0 +1,131 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {
+  SortingInfo,
+  SortingOrder,
+  TableData,
+} from '../../../widgets/data_table/types';
+import {ExperimentAlias} from '../../../experiments/types';
+
+enum UndefinedStrategy {
+  BEFORE,
+  AFTER,
+}
+
+interface SortOptions {
+  insertUndefined: UndefinedStrategy;
+}
+
+const POTENTIALLY_NUMERIC = new Set(['string', 'number']);
+
+const DEFAULT_SORT_OPTIONS: SortOptions = {
+  insertUndefined: UndefinedStrategy.AFTER,
+};
+
+export function parseNumericPrefix(value: string | number) {
+  if (typeof value === 'number') {
+    return isNaN(value) ? undefined : value;
+  }
+
+  if (!isNaN(parseInt(value))) {
+    return parseInt(value);
+  }
+
+  for (let i = 0; i < value.length; i++) {
+    if (isNaN(parseInt(value[i]))) {
+      if (i === 0) return;
+      return parseInt(value.slice(0, i));
+    }
+  }
+
+  return;
+}
+
+export function sortTableDataItems(
+  items: TableData[],
+  sort: SortingInfo
+): TableData[] {
+  const sortedItems = [...items];
+
+  sortedItems.sort((a, b) => {
+    let aValue = a[sort.name];
+    let bValue = b[sort.name];
+
+    if (sort.name === 'experimentAlias') {
+      aValue = (aValue as ExperimentAlias).aliasNumber;
+      bValue = (bValue as ExperimentAlias).aliasNumber;
+    }
+
+    if (aValue === bValue) {
+      return 0;
+    }
+
+    if (aValue === undefined || bValue === undefined) {
+      return orderFromLocalComparison(aValue, bValue);
+    }
+
+    if (
+      POTENTIALLY_NUMERIC.has(typeof aValue) &&
+      POTENTIALLY_NUMERIC.has(typeof bValue)
+    ) {
+      const aPrefix = parseNumericPrefix(aValue as string | number);
+      const bPrefix = parseNumericPrefix(bValue as string | number);
+      // Show runs with numbers before to runs without numbers
+      if (
+        (aPrefix === undefined || bPrefix === undefined) &&
+        aPrefix !== bPrefix
+      ) {
+        return orderFromLocalComparison(aPrefix, bPrefix, {
+          insertUndefined: UndefinedStrategy.BEFORE,
+        });
+      }
+      if (aPrefix !== undefined && bPrefix !== undefined) {
+        if (aPrefix === bPrefix) {
+          const aPostfix =
+            aValue.toString().slice(aPrefix.toString().length) || undefined;
+          const bPostfix =
+            bValue.toString().slice(bPrefix.toString().length) || undefined;
+          return orderFromLocalComparison(aPostfix, bPostfix, {
+            insertUndefined: UndefinedStrategy.BEFORE,
+          });
+        }
+
+        return orderFromLocalComparison(aPrefix, bPrefix);
+      }
+    }
+
+    return orderFromLocalComparison(aValue, bValue);
+  });
+  return sortedItems;
+
+  function orderFromLocalComparison(
+    a: TableData[string] | undefined,
+    b: TableData[string] | undefined,
+    {insertUndefined}: SortOptions = DEFAULT_SORT_OPTIONS
+  ) {
+    if (a === b) {
+      return 0;
+    }
+
+    if (a === undefined) {
+      return insertUndefined === UndefinedStrategy.AFTER ? 1 : -1;
+    }
+    if (b === undefined) {
+      return insertUndefined === UndefinedStrategy.AFTER ? -1 : 1;
+    }
+
+    return a < b === (sort.order === SortingOrder.ASCENDING) ? -1 : 1;
+  }
+}