Merge pull request #38 from cesmii/feature/async-data-improvements

Feature/async data improvements

frontend/composables/useAsyncEquipmentIds.ts

@@ -1,47 +1,93 @@
 import { isNonNullish, unique } from "remeda";
 
-import { GetOeeEquipmentTypesWithEquipmentIdsDocument } from "~/generated/graphql/operations";
+import type { GetOeeEquipmentTypesWithEquipmentIdsQuery } from "~/generated/graphql/operations";
+import { GetOeeEquipmentTypesWithEquipmentIdsDocument  } from "~/generated/graphql/operations";
 
 
 
+/*
+ * There are two possible structures for OEE equipment to descend from an "actual" piece of equipment:
+ *
+ * 1)
+ *    - Physical Equipment
+ *      - OEE Summary (type OEE Summary)
+ *      - OEE Availability (type OEE Availability)
+ *      - OEE Performance (type OEE Performance)
+ *      - OEE Quality (type OEE Quality)
+ *
+ * 2)
+ *    - Physical Equipment (type OEE Summary)
+ *      - OEE Availability (type OEE Availability)
+ *      - OEE Performance (type OEE Performance)
+ *      - OEE Quality (type OEE Quality)
+ *
+ * We can differentiate based on `type` and presence of children.
+ */
+
+
+
+
+
+function deriveOeeEquipmentIds(
+  res: GetOeeEquipmentTypesWithEquipmentIdsQuery,
+): string[] {
+  /** All equipment with OEE `equipmentType`. */
+  const oeeEquipment = unique(
+    res.equipmentTypes?.flatMap((et) => et.equipments) || [],
+  );
+
+  /** Set of equipment IDs with an OEE `equipmentType`. */
+  const oeeEquipmentIds = new Set(oeeEquipment.map((e) => e.id));
+
+  /** Equipment IDs that are the parent of at least one OEE Equipment. */
+  const oeeParentIds = unique(
+    oeeEquipment.map((eq) => eq.partOfId).filter(isNonNullish),
+  );
+
+  /**
+   * The OEE equipment IDs that have a child OEE equipment.
+   * This represents a root equipment following structure #2 (see above).
+   */
+  const oeeEquipmentIdsWithOEEChildren = oeeParentIds
+    .filter(
+      (partOfId) => oeeEquipmentIds.has(partOfId),
+    );
+
+  const oeeParentIdsWithoutOEEChildren = unique(
+    oeeEquipment
+      .filter(
+        (eq) =>
+          // Exclude the parent of equipment who are counted under structure #2.
+          !oeeEquipmentIdsWithOEEChildren.includes(eq.id)
+          // Exclude the equipment who are counted under structure #2.
+          && (!eq.partOfId || !oeeEquipmentIdsWithOEEChildren.includes(eq.partOfId)),
+      )
+      .map((eq) => eq.partOfId)
+      .filter(isNonNullish),
+  );
+
+  const equipmentIds = unique([
+    ...oeeEquipmentIdsWithOEEChildren,
+    ...oeeParentIdsWithoutOEEChildren,
+  ]);
+
+  return equipmentIds;
+}
+
+
+/**
+ * A hook to retrieve all equipment with OEE metrics.
+ * Makes a couple GraphQL calls then transforms the returned equipment into a standard shape.
+ */
 export default function useAsyncEquipmentIds() {
-  return useAsyncQuery(GetOeeEquipmentTypesWithEquipmentIdsDocument,
+  return useAsyncQuery(
+    GetOeeEquipmentTypesWithEquipmentIdsDocument,
     {},
     "default",
-    { errorPolicy: "ignore" }
-    , {
-      transform: (typeRes) => {
-        const oeeEquipment = unique(
-          typeRes.equipmentTypes?.flatMap((et) => et.equipments) || [],
-        );
-
-        const oeeEquipmentIds = new Set(oeeEquipment.map((e) => e.id));
-
-        const oeeParentIds = unique(
-          oeeEquipment.map((eq) => eq.partOfId).filter(isNonNullish),
-        );
-
-        const oeeEquipmentIdsWithOEEChildren = oeeParentIds
-          .filter(
-            (partOfId) => oeeEquipmentIds.has(partOfId),
-          );
-
-        const oeeParentIdsWithoutOEEChildren = unique(
-          oeeEquipment
-            .filter(
-              (eq) => !oeeEquipmentIdsWithOEEChildren.includes(eq.id) && (!eq.partOfId || !oeeEquipmentIdsWithOEEChildren.includes(eq.partOfId)),
-            )
-            .map((eq) => eq.partOfId)
-            .filter(isNonNullish),
-        );
-
-        const equipmentIds = computed(() => unique([
-          ...oeeEquipmentIdsWithOEEChildren,
-          ...oeeParentIdsWithoutOEEChildren,
-        ]));
-
-        return equipmentIds.value;
-      },
-    });
+    { errorPolicy: "ignore" },
+    {
+      transform: deriveOeeEquipmentIds,
+    },
+  );
 }
 

frontend/composables/useAsyncEquipmentWithOEE.ts

@@ -1,3 +1,5 @@
+import type { VariablesOf } from "@graphql-typed-document-node/core";
+
 import { GetEquipmentsDocument } from "~/generated/graphql/operations";
 import { parseEquipmentWithOEE } from "~/lib/equipment";
 
@@ -12,22 +14,28 @@ export default function useAsyncEquipmentWithOEE() {
   const endTime = new Date(startTime);
   endTime.setDate(startTime.getDate() + 1);
 
-
-  const res = useAsyncQuery(GetEquipmentsDocument, {
+  // Making this `computed` so the query is reactive to changes in `equipmentIds`.
+  const variables = computed<VariablesOf<typeof GetEquipmentsDocument>>(() => ({
     filter: {
       id: { in: equipmentIds.value ?? [] },
     },
     startTime: startTime.toISOString(),
     endTime: endTime.toISOString(),
-  }, "default", {
-    enabled: equipmentIds.value && equipmentIds.value.length > 0,
-    errorPolicy: "ignore",
-  }, {
-    watch: [ equipmentIds ],
-    transform: (eqRes) => {
-      return eqRes.equipments?.map(parseEquipmentWithOEE);
+  }));
+
+  const res = useAsyncQuery(
+    GetEquipmentsDocument,
+    variables,
+    "default",
+    {
+      errorPolicy: "ignore",
+    },
+    {
+      transform: (eqRes) => {
+        return eqRes.equipments?.map(parseEquipmentWithOEE);
+      },
     },
-  });
+  );
 
   // Compound status involving both queries.
   const status = computed(() => idStatus.value === "success" ? res.status.value : idStatus.value);

frontend/pages/index.vue

@@ -12,6 +12,20 @@
           text="There was an unexpected error fetching equipment. Please try again."
         />
       </v-col>
+      <v-col
+        v-else-if="equipments && equipments.length === 0"
+        cols="12"
+        class="d-flex flex-column align-center ga-4"
+      >
+        <v-card class="text-center">
+          <v-card-title>
+            No Equipment Found
+          </v-card-title>
+          <v-card-subtitle>
+            Please try refreshing.
+          </v-card-subtitle>
+        </v-card>
+      </v-col>
       <v-col v-else-if="equipments && equipments.length > 0" cols="12">
         <v-row>
           <v-col
@@ -30,10 +44,10 @@
           </v-col>
         </v-row>
       </v-col>
-      <v-col v-else cols="auto">
+      <v-col v-else cols="12" class="d-flex flex-column align-center ga-4">
         <v-card class="text-center">
           <v-card-title>
-            No Equipment Found
+            Unable to Fetch Equipment
           </v-card-title>
           <v-card-subtitle>
             Please try refreshing.