feat(trees): sort Chronostrat tree by period instead of name, add ranges

specifyweb/frontend/js_src/lib/components/TreeView/Row.tsx

@@ -84,27 +84,34 @@ export function TreeRow<SCHEMA extends AnyTree>({
     if (!isLoading) return undefined;
 
     void getRows(row.nodeId).then((fetchedRows: RA<Row>) => {
-      const sortedRows = Array.from(fetchedRows).sort(
-        sortFunction<Row, number | string>(
-          orderByField === 'rankId'
-            ? (row) => row.rankId
-            : orderByField === 'nodeNumber'
-              ? (row) => row.nodeNumber
-              : orderByField === 'name'
-                ? (row) => row.name
-                : orderByField === 'fullName'
-                  ? (row) => row.fullName
-                  : () => 0
-        )
-      );
+      const sortedRows =
+        treeName === 'GeologicTimePeriod'
+          ? /*
+             * GeologicTimePeriod shoud always be sorted by startPeriod.
+             * This skips the client-side sort to preserve that order.
+             */
+            fetchedRows
+          : Array.from(fetchedRows).sort(
+              sortFunction<Row, number | string>(
+                orderByField === 'rankId'
+                  ? (row) => row.rankId
+                  : orderByField === 'nodeNumber'
+                    ? (row) => row.nodeNumber
+                    : orderByField === 'name'
+                      ? (row) => row.name
+                      : orderByField === 'fullName'
+                        ? (row) => row.fullName
+                        : () => 0
+              )
+            );
       destructorCalled ? undefined : setRows(sortedRows);
     });
 
     let destructorCalled = false;
     return (): void => {
       destructorCalled = true;
     };
-  }, [isLoading, getRows, row, orderByField]);
+  }, [isLoading, getRows, row, orderByField, treeName]);
 
   // Fetch children stats
   const isLoadingStats = displayChildren && childStats === undefined;

specifyweb/frontend/js_src/lib/components/TreeView/index.tsx

@@ -187,11 +187,14 @@ function TreeView<TREE_NAME extends AnyTree['tableName']>({
     async (parentId: number | 'null') =>
       fetchRows(
         // See above comment for sortField being hard coded as name here
-        formatUrl(`${baseUrl}/${parentId}/name/`, {
-          includeAuthor: includeAuthor.toString(),
-        })
+        formatUrl(
+          `${baseUrl}/${parentId}/${tableName === 'GeologicTimePeriod' ? 'startPeriod' : 'name'}/`,
+          {
+            includeAuthor: includeAuthor.toString(),
+          }
+        )
       ),
-    [baseUrl]
+    [baseUrl, tableName, includeAuthor]
   );
 
   const [rows, setRows] = useAsyncState<RA<Row>>(