dynamic title

Desbordante · Sep 8, 2024 · 9bc7c25 · 9bc7c25
1 parent 8b59b5b
commit 9bc7c25
Show file tree

Hide file tree

Showing 15 changed files with 211 additions and 167 deletions.
diff --git a/web-app/client/proxy.config.js b/web-app/client/proxy.config.js
@@ -7,11 +7,11 @@ module.exports = async () => {
   const cmsIP = process.env.CMS_IP;
   const cmsPort = process.env.CMS_PORT;
 
-  const serverURL = `${serverProtocol}://${serverIP}:${serverPort}`;
+  const serverURL = `${serverProtocol}://${serverIP}`;
   const serverGraphQLEndpoint = `${serverURL}/graphql`;
   const serverProxyURL = '/api/backend';
 
-  const cmsURL = `${cmsProtocol}://${cmsIP}:${cmsPort}`;
+  const cmsURL = `${cmsProtocol}://${cmsIP}`;
   const cmsGraphQLEndpoint = `${cmsURL}/graphql`;
   const cmsProxyURL = '/api/cms';
 

diff --git a/web-app/client/src/components/Loader/Loader.tsx b/web-app/client/src/components/Loader/Loader.tsx
@@ -1,20 +1,34 @@
 import cn from 'classnames';
 import { useRouter } from 'next/router';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import Icon, { IconName } from '@components/Icon';
 import { primitivePathnames } from '@constants/primitiveReportPathnames';
 import useTaskState from '@hooks/useTaskState';
 import getTaskStatusData from '@utils/getTaskStatusData';
 import { PrimitiveType } from 'types/globalTypes';
 import styles from './Loader.module.scss';
+import { NextSeo } from 'next-seo';
+import { approximateAlgorithms } from '@constants/options';
 
 const Loader: FC = () => {
   const router = useRouter();
   const { data, error } = useTaskState();
+  const [title, setTitle] = useState<string>('');
   const status = getTaskStatusData(error, data.state);
 
   useEffect(() => {
-    const { state, type } = data;
+    const { state, type, algorithmName } = data;
+
+    if (type && algorithmName) {
+      setTitle(`${type} + ${algorithmName}`);
+      if (approximateAlgorithms.includes(algorithmName) || type === 'TypoFD') {
+        setTitle(`Discovery approximate functional dependencies is processing`);
+      } else if (type === 'MFD') {
+        setTitle(`Verification metric dependency is processing`);
+      } else {
+        setTitle(`Discovery functional dependencies is processing`);
+      }
+    }
 
     if (
       state &&
@@ -48,19 +62,22 @@ const Loader: FC = () => {
     <Icon name={status.icon as IconName} size={76} {...status.iconProps} />
   );
   return (
-    <div className={styles.container}>
-      {icon}
-      <div className={styles.text}>
-        <h6>
-          Task status:
-          <span className={cn(styles[status.className], styles.status)}>
-            {' '}
-            {status.label}
-          </span>
-        </h6>
-        <p className={styles.description}>{status.description}</p>
+    <>
+      <NextSeo title={title} />
+      <div className={styles.container}>
+        {icon}
+        <div className={styles.text}>
+          <h6>
+            Task status:
+            <span className={cn(styles[status.className], styles.status)}>
+              {' '}
+              {status.label}
+            </span>
+          </h6>
+          <p className={styles.description}>{status.description}</p>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 export default Loader;
diff --git a/web-app/client/src/constants/options.ts b/web-app/client/src/constants/options.ts
@@ -23,6 +23,8 @@ const FDAlgorithms = [
   'FUN',
 ] as const;
 
+export const approximateAlgorithms = ['Pyro', 'TaneX', 'Apriori'];
+
 type FDAlgorithm = (typeof FDAlgorithms)[number];
 type CFDAlgorithm = 'CTane';
 type ARAlgorithm = 'Apriori';

diff --git a/web-app/client/src/graphql/operations/queries/getTaskType.ts b/web-app/client/src/graphql/operations/queries/getTaskType.ts
@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+import { BASE_CONFIG } from '@graphql/operations/fragments';
+
+export const GET_TASK_TYPE = gql`
+  ${BASE_CONFIG}
+  query getTaskType($taskID: ID!) {
+    taskInfo(taskID: $taskID) {
+      data {
+        baseConfig {
+          ...BaseConfig
+        }
+      }
+    }
+  }
+`;
diff --git a/web-app/client/src/hooks/useTaskState.ts b/web-app/client/src/hooks/useTaskState.ts
@@ -19,12 +19,26 @@ import {
 import { GET_TASK_STATE } from '@graphql/operations/queries/getTaskState';
 import { GET_TASK_STATE_LITE } from '@graphql/operations/queries/getTaskStateLite';
 import { showError } from '@utils/toasts';
+import { GET_TASK_TYPE } from '@graphql/operations/queries/getTaskType';
 
 const useTaskState = () => {
   const router = useRouter();
   const taskID = router.query.taskID as string;
   const [taskState, setTaskState] = useAtom(taskStateAtom);
 
+  const {
+    loading: typeLoading,
+    error: typeError,
+    data: typeData,
+  } = useQuery(GET_TASK_TYPE, {
+    variables: {
+      taskID,
+    },
+    onError: (error) => {
+      showError(error.message, "Can't fetch task type. Please try later.");
+    },
+  });
+
   const {
     loading: liteLoading,
     error: liteError,
@@ -43,58 +57,40 @@ const useTaskState = () => {
     },
   );
 
-  const [
-    loadFullTaskState,
-    { loading: fullLoading, error: fullError, data: fullData },
-  ] = useLazyQuery<getTaskState, getTaskStateVariables>(GET_TASK_STATE, {
-    onError: (error) => {
-      showError(error.message, "Can't fetch task state. Please try later.");
-    },
-  });
-
   useEffect(() => {
     if (taskID !== taskState.taskID) {
       setTaskState(taskStateAtomDefaultValuesWithID(taskID));
       startPolling(2000);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+    if (!taskState.algorithmName || !taskState.type) {
+      const baseConfig = typeData?.taskInfo.data.baseConfig;
+      const algorithmName = baseConfig?.algorithmName;
+      const type = baseConfig?.type;
+      setTaskState({
+        ...taskStateAtomDefaultValuesWithID(taskID),
+        algorithmName,
+        type,
+      });
+    }
+  }, [typeData]);
 
   useEffect(() => {
     if (
       taskState.taskID === taskID &&
       taskState.state.__typename === 'TaskState' &&
       taskState.state.processStatus === 'COMPLETED'
     ) {
-      if (taskState.type === '') {
-        stopPolling();
-        loadFullTaskState({
-          variables: {
-            taskID,
-          },
-        });
-      }
-
-      return;
+      stopPolling();
     }
 
     const state = liteData?.taskInfo.state as getTaskState_taskInfo_state;
 
     if (state && 'processStatus' in state) {
-      if (state.processStatus === 'COMPLETED') {
-        stopPolling();
-        if (taskState.type === '')
-          loadFullTaskState({
-            variables: {
-              taskID,
-            },
-          });
-      } else {
-        setTaskState({
-          ...taskStateAtomDefaultValuesWithID(taskID),
-          state, // || taskStateAtomDefaultValues.state,
-        });
-      }
+      setTaskState({
+        ...taskState,
+        state: state,
+      });
     }
     if (state && state.__typename !== 'TaskState') {
       stopPolling();
@@ -103,40 +99,15 @@ const useTaskState = () => {
         state,
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [liteData]);
 
-  useEffect(() => {
-    if (
-      taskState.taskID === taskID &&
-      taskState.state.__typename === 'TaskState' &&
-      taskState.state.processStatus === 'COMPLETED' &&
-      taskState.type !== ''
-    )
-      return;
-
-    const state = fullData?.taskInfo
-      .state as getTaskState_taskInfo_state_TaskState;
-    const data = fullData?.taskInfo.data;
-
-    if (data && state && 'processStatus' in state) {
-      setTaskState({
-        taskID,
-        algorithmName: data?.baseConfig.algorithmName || '',
-        type: data?.baseConfig.type || '',
-        state: state || taskStateAtomDefaultValues.state,
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fullLoading, fullData]);
-
   return {
     data:
       taskState.taskID === taskID
         ? taskState
         : taskStateAtomDefaultValuesWithID(taskID),
-    loading: liteLoading || fullLoading || taskState.taskID !== taskID,
-    error: !fullError ? liteError : fullError,
+    loading: liteLoading || typeLoading || taskState.taskID !== taskID,
+    error: !liteError ? typeError : liteError,
   };
 };
 

diff --git a/web-app/client/src/pages/_document.tsx b/web-app/client/src/pages/_document.tsx
@@ -27,7 +27,7 @@ const MyDocument = () => {
         <NextScript />
         <div
           id="portals-container-node"
-          style={{ position: 'fixed', zIndex: 1001, inset: 0, height: 0 }}
+          style={{ position: 'absolute', zIndex: 1001, inset: 0, height: 0 }}
         />
       </body>
     </Html>

diff --git a/web-app/client/src/pages/create-task/choose-file.tsx b/web-app/client/src/pages/create-task/choose-file.tsx
@@ -16,6 +16,7 @@ import { useTaskUrlParams } from '@hooks/useTaskUrlParams';
 import styles from '@styles/ChooseFile.module.scss';
 import { AllowedDataset } from 'types/algorithms';
 import { MainPrimitiveType } from 'types/globalTypes';
+import { NextSeo } from 'next-seo';
 
 const sortDatasetsBySupportedPrimitive = (
   datasets?: AllowedDataset[],
@@ -158,17 +159,20 @@ const ChooseFile: NextPage<Props> = ({ defaultAlgorithmConfig }) => {
   );
 
   return (
-    <WizardLayout
-      header={header}
-      footer={footer}
-      className={cn(
-        styles.content,
-        !user?.permissions.canUploadFiles && styles.reversed,
-      )}
-    >
-      {userFiles}
-      {builtinFiles}
-    </WizardLayout>
+    <>
+      <NextSeo title="Step 2: select a dataset" />
+      <WizardLayout
+        header={header}
+        footer={footer}
+        className={cn(
+          styles.content,
+          !user?.permissions.canUploadFiles && styles.reversed,
+        )}
+      >
+        {userFiles}
+        {builtinFiles}
+      </WizardLayout>
+    </>
   );
 };
 

diff --git a/web-app/client/src/pages/create-task/choose-primitive.tsx b/web-app/client/src/pages/create-task/choose-primitive.tsx
@@ -8,6 +8,7 @@ import primitiveInfo from '@constants/primitiveInfoType';
 import { useTaskUrlParams } from '@hooks/useTaskUrlParams';
 import styles from '@styles/ChoosePrimitive.module.scss';
 import { MainPrimitiveType } from 'types/globalTypes';
+import { NextSeo } from 'next-seo';
 
 const header = (
   <>
@@ -52,35 +53,38 @@ const ChoosePrimitive = () => {
   );
 
   return (
-    <WizardLayout header={header} footer={footer}>
-      <article className={styles.root}>
-        <ul className={styles.inputsContainer}>
-          {Object.entries(primitiveInfo).map(([primitiveCode, info]) => (
-            <PrimitiveCard
-              key={primitiveCode}
-              name={primitiveCode}
-              info={info}
-              isSelected={primitive.value === primitiveCode}
-              onChange={(event) =>
-                primitive.set(event.currentTarget.value as MainPrimitiveType)
-              }
-            />
-          ))}
-        </ul>
+    <>
+      <NextSeo title="Step 1: select a pattern to discover or verify" />
+      <WizardLayout header={header} footer={footer}>
+        <article className={styles.root}>
+          <ul className={styles.inputsContainer}>
+            {Object.entries(primitiveInfo).map(([primitiveCode, info]) => (
+              <PrimitiveCard
+                key={primitiveCode}
+                name={primitiveCode}
+                info={info}
+                isSelected={primitive.value === primitiveCode}
+                onChange={(event) =>
+                  primitive.set(event.currentTarget.value as MainPrimitiveType)
+                }
+              />
+            ))}
+          </ul>
 
-        {primitive.value && (
-          <PrimitiveDescription
-            className={styles.descriptionAside}
-            info={
-              primitiveInfo[primitive.value] || {
-                label: 'Loading',
-                description: '',
+          {primitive.value && (
+            <PrimitiveDescription
+              className={styles.descriptionAside}
+              info={
+                primitiveInfo[primitive.value] || {
+                  label: 'Loading',
+                  description: '',
+                }
               }
-            }
-          />
-        )}
-      </article>
-    </WizardLayout>
+            />
+          )}
+        </article>
+      </WizardLayout>
+    </>
   );
 };
 

diff --git a/web-app/client/src/pages/create-task/configure-algorithm.tsx b/web-app/client/src/pages/create-task/configure-algorithm.tsx
@@ -8,6 +8,7 @@ import {
 } from '@constants/formPrimitives';
 import { useTaskUrlParams } from '@hooks/useTaskUrlParams';
 import styles from '@styles/ConfigureAlgorithm.module.scss';
+import { NextSeo } from 'next-seo';
 
 const ConfigureAlgorithm: NextPage = () => {
   const router = useRouter();
@@ -33,6 +34,7 @@ const ConfigureAlgorithm: NextPage = () => {
 
   return (
     <>
+      <NextSeo title="Step 3: configure algorithm" />
       {excludedPrimitives.includes(primitiveValue as UsedPrimitivesType) && (
         <div className={styles.filler}>
           <h6>