feat: introduce env variable HADDOCK3WEBAPP_REFRESH_RATE_MS

refactor: add maxLenght as optional param to DotsLoader component

app/bartender-client/constants.ts

@@ -1,4 +1,3 @@
 export const BARTENDER_APPLICATION_NAME = "haddock3";
 export const WORKFLOW_CONFIG_FILENAME = "workflow.cfg";
 export const JOB_OUTPUT_DIR = "output";
-export const PAGE_REFRESH_RATE_MS = 5000;

app/components/ui/DotsLoader.tsx

@@ -1,16 +1,15 @@
 import { ComponentPropsWithoutRef, useEffect, useState } from "react";
 
-// max. number of dots to draw
-const maxLength = 30;
-
 type DotsProps = {
   state: string;
   label?: string;
+  maxLength?: number;
 } & ComponentPropsWithoutRef<"div">;
 
 export default function DotsLoader({
   state,
   label = "Loading",
+  maxLength = 30,
   ...props
 }: DotsProps) {
   const [count, setCount] = useState(1);
@@ -31,7 +30,7 @@ export default function DotsLoader({
       // clean up
       clearInterval(timer);
     };
-  }, []);
+  }, [maxLength]);
 
   useEffect(() => {
     // reset to 1 on each state change

app/models/job.server.ts

@@ -18,6 +18,11 @@ const BOOK_KEEPING_FILES = [
   "workflow.cfg.orig",
 ];
 
+export const HADDOCK3WEBAPP_REFRESH_RATE_MS = process.env
+  .HADDOCK3WEBAPP_REFRESH_RATE_MS
+  ? parseInt(process.env.HADDOCK3WEBAPP_REFRESH_RATE_MS)
+  : 5000;
+
 export function jobIdFromParams(params: Params) {
   const jobId = params.id;
   if (jobId == null) {

app/routes/jobs.$id._index.tsx

@@ -7,11 +7,15 @@ import {
 } from "@remix-run/node";
 import { useLoaderData, useRevalidator } from "@remix-run/react";
 
-import { deleteJob, getJobById, jobIdFromParams } from "~/models/job.server";
+import {
+  deleteJob,
+  getJobById,
+  jobIdFromParams,
+  HADDOCK3WEBAPP_REFRESH_RATE_MS,
+} from "~/models/job.server";
 import { getUser } from "~/auth.server";
 import { JobStatus } from "~/components/JobStatus";
 import { getBartenderTokenByUser } from "~/bartender-client/token.server";
-import { PAGE_REFRESH_RATE_MS } from "~/bartender-client/constants";
 import DotsLoader from "~/components/ui/DotsLoader";
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
@@ -27,7 +31,11 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
     }
   }
 
-  return json({ job });
+  return json({
+    job,
+    // provide refresh rate from env or default of 5 sec.
+    HADDOCK3WEBAPP_REFRESH_RATE_MS,
+  });
 };
 
 export const action = async ({ params, request }: ActionFunctionArgs) => {
@@ -42,29 +50,37 @@ export const action = async ({ params, request }: ActionFunctionArgs) => {
 };
 
 export default function JobPage() {
-  const { job } = useLoaderData<typeof loader>();
+  const { job, HADDOCK3WEBAPP_REFRESH_RATE_MS } =
+    useLoaderData<typeof loader>();
   const { revalidate } = useRevalidator();
 
+  // update value of updated_on
+  job.updated_on = new Date().toISOString();
+
   useEffect(() => {
     // set interval to refresh job status
-    const id = setInterval(() => {
-      // reload only if user is on the page/tab
-      if (
-        document.visibilityState === "visible" &&
-        // and job state is not "definitive"
-        job.state !== "error" &&
-        job.state !== "ok"
-      ) {
-        console.log("JobPage...REVALIDATE");
-        revalidate();
-      }
-    }, PAGE_REFRESH_RATE_MS);
+    let id: NodeJS.Timeout;
+    if (job.state !== "error" && job.state !== "ok") {
+      id = setInterval(() => {
+        // reload only if user is on the page/tab
+        if (
+          document.visibilityState === "visible" &&
+          // and job state is not "definitive"
+          job.state !== "error" &&
+          job.state !== "ok"
+        ) {
+          // console.log("JobPage...REVALIDATE");
+          revalidate();
+        }
+      }, HADDOCK3WEBAPP_REFRESH_RATE_MS);
+      // console.log("useEffect...id...", id);
+    }
     return () => {
       // clear interval
-      console.log("JobPage...clearInterval...", id);
+      // console.log("JobPage...clearInterval...", id);
       if (id) clearInterval(id);
     };
-  }, [revalidate, job.state]);
+  }, [HADDOCK3WEBAPP_REFRESH_RATE_MS, revalidate, job.state]);
 
   return (
     <main className="flex gap-16">

deploy/arq/.env

@@ -3,3 +3,5 @@
 # See https://github.com/i-VRESSE/haddock3-webapp/blob/main/docs/rewrite.md
 # and https://github.com/i-VRESSE/haddock3-webapp/blob/main/docs/auth.md#social-logins
 # respectively for more information.
+
+HADDOCK3WEBAPP_REFRESH_RATE_MS=10000

deploy/arq/docker-compose.yml

@@ -19,12 +19,13 @@ services:
     ports:
       - "8080:8080"
     environment:
-      BARTENDER_API_URL: "http://bartender:8000"
-      DATABASE_URL: postgresql://postgres:postgres@webappdb:5432/postgres
-      BARTENDER_PRIVATE_KEY: /certs/private_key.pem
-      SESSION_SECRET_FILE: /certs/session.secret
-      WAIT_PATHS: /certs/private_key.pem
-      HADDOCK3_RESTRAINTS_URL: "http://h3restraints:5000"
+      - BARTENDER_API_URL=http://bartender:8000
+      - DATABASE_URL=postgresql://postgres:postgres@webappdb:5432/postgres
+      - BARTENDER_PRIVATE_KEY=/certs/private_key.pem
+      - SESSION_SECRET_FILE=/certs/session.secret
+      - WAIT_PATHS=/certs/private_key.pem
+      - HADDOCK3_RESTRAINTS_URL=http://h3restraints:5000
+      - HADDOCK3WEBAPP_REFRESH_RATE_MS
     volumes:
       - bartender-certs:/certs:ro