store: sort stages by id

Author: utkarshgupta137

src/components/job-table.tsx

@@ -38,7 +38,7 @@ const StageItem = observer((props: { stageId: string }) => {
 
 const StageTable = observer((props: { jobId: string }) => {
     const notebook = useNotebookStore();
-    const stageIds = notebook.jobs[props.jobId].uniqueStageIds.slice(0).sort();
+    const stageIds = notebook.jobs[props.jobId].uniqueStageIds;
     const rows = stageIds.map((stageId) => {
         return <StageItem stageId={stageId} key={stageId} />;
     });

src/store/notebook.ts

@@ -89,6 +89,7 @@ export class NotebookStore {
             stage.name = data.stageInfos[stageId].name;
             job.uniqueStageIds.push(uniqueStageId);
         });
+        job.uniqueStageIds.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
 
         if (job.name === 'null') {
             const lastStageId = Math.max.apply(null, data.stageIds);