fbx to gltf page job list displaying properly

packages/components/src/jobs/InferenceJob.ts

@@ -16,6 +16,10 @@ export enum FrontendInferenceJobType {
   VideoStyleTransfer,
 }
 
+export enum AllInferenceJobs { All }
+
+export type JobListOptions = FrontendInferenceJobType | AllInferenceJobs;
+
 // NB: Many of these fields are optional despite the response payload containing them
 // This is because we create temporary placeholder objects with just the token.
 export class InferenceJob {

packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx

@@ -3,7 +3,6 @@ import { FrontendInferenceJobType, InferenceJob } from "@storyteller/components/
 // import { useTransition } from "@react-spring/web";
 import JobItem from "./JobItem";
 import { useInferenceJobs,  useLocalize, useSession } from "hooks";
-import { JobListTypes } from "hooks/useInferenceJobs/useInferenceJobs";
 import "./InferenceJobsList.scss";
 import { Button, Panel, JobQueueTicker } from "components/common";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -12,7 +11,6 @@ import { faClipboardList } from "@fortawesome/pro-solid-svg-icons";
 interface JobsListProps {
   failures: (fail: string) => string;
   jobType?: FrontendInferenceJobType;
-  value?: JobListTypes;
   onSelect?: (e: any) => any;
   panel?: boolean;
   showJobQueue?: boolean;
@@ -34,21 +32,15 @@ const resultPaths = {
 export default function InferenceJobsList({
   failures,
   jobType,
-  value,
   onSelect,
   panel = true,
   showHeader = true,
   showJobQueue = false,
   showNoJobs = false
 }: JobsListProps) {
-  const jobValue = value !== undefined ? value : jobType !== undefined ? (jobType || 0) + 1 : 0;
-  // undefined specified here to allow 0.
-  // jobType + 1 because the difference between FrontendInferenceJobType and JobListTypes is an "all" option
-
   const { sessionSubscriptions } = useSession();
   const hasPaidFeatures = sessionSubscriptions?.hasPaidFeatures();
-  const { inferenceJobs = [], jobStatusDescription } = useInferenceJobs(jobValue);
-
+  const { inferenceJobs = [], jobStatusDescription } = useInferenceJobs(jobType);
   const { t } = useLocalize("InferenceJobs");
 
   const jobContent = (

packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx

@@ -1,8 +1,8 @@
-import React from "react"; // useState
+import React, { useState } from "react"; // useState
 import InferenceJobsList from "components/layout/InferenceJobsList";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
-// import { TempSelect as Select } from "components/common";
-// import { enumToKeyArr } from "resources";
+import { TempSelect as Select } from "components/common";
+import { enumToKeyArr } from "resources";
 import ModalHeader from "../ModalHeader";
 import { useLocalize } from "hooks";
 
@@ -18,18 +18,16 @@ export default function InferenceJobsModal({
   showModalHeader = true,
   ...rest
 }: Props) {
-  // const presetFilter = enumToKeyArr(FrontendInferenceJobType)[inJobType];
-  // const [jobType,jobTypeSet] = useState(inJobType > -1 ? presetFilter : "All");
-  // const typeObj = ["All", ...Object.values(FrontendInferenceJobType)];
-
-  // const options = typeObj.filter(val => isNaN(Number(val)))
-  // .map((value) => {
-  //   if (typeof value === "string") return { value, label: value }
-  //   return { label: "", value: "" };
-  // });
-
+  const presetFilter = enumToKeyArr(FrontendInferenceJobType)[inJobType];
+  const [jobType,jobTypeSet] = useState(inJobType > -1 ? presetFilter : "All");
+  const typeObj = ["All", ...Object.values(FrontendInferenceJobType)];
+  const options = typeObj.filter(val => isNaN(Number(val)))
+  .map((value) => {
+    if (typeof value === "string") return { value, label: value }
+    return { label: "", value: "" };
+  });
   const { t } = useLocalize("InferenceJobs");
-
+  const selectedType = typeObj.indexOf(jobType) - 1;
   const failures = (fail = "") => {
     switch (fail) {
       default:
@@ -41,7 +39,7 @@ export default function InferenceJobsModal({
     <>
       { showModalHeader && <ModalHeader {...{ handleClose, title: t("core.jobsTitle") }} /> }
       {
-        // <Select {...{ onChange: ({ target }: { target: any }) => jobTypeSet(target.value), options, value: jobType }} />
+        <Select {...{ onChange: ({ target }: { target: any }) => jobTypeSet(target.value), options, value: jobType }} />
       }
       <InferenceJobsList
         {...{
@@ -49,8 +47,7 @@ export default function InferenceJobsModal({
           onSelect: () => {
             if (handleClose) handleClose();
           },
-          value: 0, // fixed for now
-          // value: typeObj.indexOf(jobType),
+          ...selectedType > -1 ? { jobType: selectedType } : {},
           showHeader: false,
           showJobQueue: true,
           showNoJobs: true,

packages/fakeyou.com/src/components/providers/CoreServicesProvider/ServerStatusChecker.tsx

@@ -6,6 +6,5 @@ interface Props {
 
 export default function ServerStatusChecker({ value }: Props) {
   useStatusPoll();
-  console.log("🤬",);
   return null;
 };

packages/fakeyou.com/src/hooks/useInferenceJobs/useInferenceJobs.tsx

@@ -5,11 +5,7 @@ import { InferenceJobsContext } from 'context';
 import { useModal } from "hooks";
 import { InferenceJobsModal } from "components/modals";
 
-export enum JobListAll { All }
-
-export type JobListTypes = FrontendInferenceJobType | JobListAll;
-
-export default function useInferenceJobs(jobType: JobListTypes = 0, debug = false) {
+export default function useInferenceJobs(jobType?: FrontendInferenceJobType, debug = false) {
   const { byCategory, enqueue, inferenceJobs, queueStats } = useContext(InferenceJobsContext);
   const { open } = useModal();
   const openJobListModal = () => open({ component: InferenceJobsModal, props: { jobType } });
@@ -20,7 +16,8 @@ export default function useInferenceJobs(jobType: JobListTypes = 0, debug = fals
       if (!noModalPls) { openJobListModal(); }
       enqueue(jobToken,jobType);
     },
-    inferenceJobs: jobType === JobListAll.All ? inferenceJobs : (byCategory?.get(jobType - 1) || []),
+    inferenceJobs: jobType === undefined ? inferenceJobs : (byCategory?.get(jobType) || []),
+    // inferenceJobs: jobType === AllInferenceJobs.All ? inferenceJobs : (byCategory?.get(jobType) || []),
     jobStatusDescription: (jobState: JobState) => Object.keys(JobState).filter(key => isNaN(Number(key)))[jobState],
     queueStats
   };

packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx

@@ -20,9 +20,7 @@ interface Props {
 export default function EngineCompositor({ value, sessionWrapper }: Props) {
   const [mediaToken, mediaTokenSet] = useState();
   const onChange = ({ target }: any) => mediaTokenSet(target.value);
-  const inferenceJobs = useInferenceJobs(
-    FrontendInferenceJobType.EngineComposition
-  );
+  const inferenceJobs = useInferenceJobs(FrontendInferenceJobType.EngineComposition);
 
   const onClick = () => {
     EnqueueEngineCompositing("", {

packages/fakeyou.com/src/v2/view/pages/fbx_to_gltf/FbxToGltfPage.tsx

@@ -43,7 +43,6 @@ export default function FbxToGltfPage({
   const { inferenceJobs } = useInferenceJobs(
     FrontendInferenceJobType.ConvertFbxtoGltf
   );
-  const hasConversionJobs = inferenceJobs && inferenceJobs.length > 0;
 
   console.log("inferenceJobs", inferenceJobs);
 
@@ -151,11 +150,9 @@ export default function FbxToGltfPage({
         imageUrl="/images/header/fbx-to-gltf.png"
       />
 
-      {hasConversionJobs && (
         <div className="mb-4">
           <FbxToGltfJobList />
         </div>
-      )}
 
       <Panel padding={true}>
         <div className="d-flex flex-column gap-3">