@truedat/dd 8.13.6 → 8.13.8

package/src/components/__tests__/GraphGenerationTranslations.spec.js

@@ -0,0 +1,74 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+import { MemoryRouter } from "react-router";
+import { GraphGenerationDialog } from "../GraphGenerationDialog";
+import { GraphGenerationNotices } from "../GraphGenerationNotices";
+import en from "../../messages/en";
+import es from "../../messages/es";
+import migratedMessages from "./fixtures/graphGenerationMessages.json";
+
+beforeEach(() => jest.useFakeTimers());
+afterEach(() => jest.useRealTimers());
+
+test.each([
+  ["en", { ...en, ...migratedMessages.en }],
+  ["es", { ...es, ...migratedMessages.es }],
+])(
+  "renders translated generation controls and notices in %s",
+  (locale, messages) => {
+    const onError = jest.fn();
+    const view = render(
+      <IntlProvider locale={locale} messages={messages} onError={onError}>
+        <MemoryRouter>
+          <GraphGenerationDialog open requestKey="a" onBackground={jest.fn()} />
+          <GraphGenerationNotices
+            jobs={{
+              pending: {
+                requestId: "pending",
+                notify: true,
+                status: "pending",
+              },
+              completed: {
+                requestId: "completed",
+                notify: true,
+                status: "completed",
+                graphId: 42,
+              },
+              failed: { requestId: "failed", notify: true, status: "failed" },
+            }}
+            dismissGraphGeneration={jest.fn()}
+          />
+        </MemoryRouter>
+      </IntlProvider>,
+    );
+    act(() => jest.advanceTimersByTime(3000));
+    const text = (suffix) => messages[`lineage.graph.wait.${suffix}`];
+    ["explanation", "background.notice", "completed", "failed"].forEach(
+      (suffix) => {
+        expect(text(suffix)).toEqual(expect.any(String));
+        expect(screen.getByText(text(suffix))).toBeInTheDocument();
+      },
+    );
+    ["close", "continue", "background"].forEach((suffix) => {
+      expect(text(suffix)).toEqual(expect.any(String));
+      expect(
+        screen.getByRole("button", { name: text(suffix) }),
+      ).toBeInTheDocument();
+    });
+    expect(text("open")).toEqual(expect.any(String));
+    expect(text("dismiss")).toEqual(expect.any(String));
+    expect(
+      screen.getByRole("link", { name: text("open"), hidden: true }),
+    ).toHaveAttribute("href", "/graphs/42");
+    expect(
+      screen.getAllByRole("button", { name: text("dismiss"), hidden: true }),
+    ).toHaveLength(2);
+    fireEvent.click(screen.getByRole("button", { name: text("continue") }));
+    expect(text("waiting")).toEqual(expect.any(String));
+    expect(
+      screen.getByRole("button", { name: text("waiting") }),
+    ).toBeDisabled();
+    expect(onError).not.toHaveBeenCalled();
+    view.unmount();
+  },
+);

package/src/components/__tests__/GraphLoader.spec.js

@@ -0,0 +1,83 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { useDispatch } from "react-redux";
+import { Route, Routes, useLocation } from "react-router";
+import { render } from "@truedat/test/render";
+import ConnectedGraphLoader, { GraphLoader } from "../GraphLoader";
+import GraphRedirector from "../GraphRedirector";
+import { graph as graphReducer } from "../../reducers/graph";
+import { graphRedirect as redirectReducer } from "../../reducers/graphRedirect";
+import { createGraph, fetchGraph } from "../../routines";
+
+const GenerateGraph = () => {
+  const dispatch = useDispatch();
+  const { pathname } = useLocation();
+  return (
+    <>
+      <button
+        onClick={() =>
+          dispatch(
+            createGraph.success({ data: { id: 43, isRedirected: true } }),
+          )
+        }
+      >
+        Complete generation
+      </button>
+      <output>{pathname}</output>
+    </>
+  );
+};
+
+test("redirects to the generated graph without refetching the previous graph", () => {
+  const requests = jest.fn();
+  render(
+    <Routes>
+      <Route
+        path="/graphs/:id"
+        element={
+          <>
+            <GenerateGraph />
+            <GraphRedirector />
+            <ConnectedGraphLoader />
+          </>
+        }
+      />
+    </Routes>,
+    {
+      routes: ["/graphs/42"],
+      state: { graph: { id: 42 }, graphRedirect: "" },
+      reducer: (state, action) => {
+        if (action.type === fetchGraph.TRIGGER) requests(action.payload);
+        return {
+          graph: graphReducer(state.graph, action),
+          graphRedirect: redirectReducer(state.graphRedirect, action),
+        };
+      },
+    },
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Complete generation" }));
+  expect(screen.getByText("/graphs/43")).toBeInTheDocument();
+  expect(requests).not.toHaveBeenCalled();
+});
+
+test("does not fetch repeatedly when a response is missing its graph id", () => {
+  const fetchGraph = jest.fn();
+  const clearGraph = jest.fn();
+  const view = (graph) => (
+    <Routes>
+      <Route
+        path="/graphs/:id"
+        element={
+          <GraphLoader
+            graph={graph}
+            fetchGraph={fetchGraph}
+            clearGraph={clearGraph}
+          />
+        }
+      />
+    </Routes>
+  );
+  const { rerender } = render(view({}), { routes: ["/graphs/42"] });
+  rerender(view({ data: { id: 42 } }));
+  rerender(view({ data: { id: 42 } }));
+  expect(fetchGraph).toHaveBeenCalledTimes(1);
+});

package/src/components/__tests__/LineageGraphInteraction.spec.js

@@ -1,10 +1,11 @@
-import { fireEvent, screen, within } from "@testing-library/react";
+import { act, fireEvent, screen, within } from "@testing-library/react";
 import { Route, Routes, useLocation } from "react-router";
 import { render } from "@truedat/test/render";
 import { LineageGraph } from "../LineageGraph";
 import { GraphLoader } from "../GraphLoader";
 
 let mockGraphProps;
+let mockDeferInitialFit = false;
 
 jest.mock("@truedat/core/components/Graph", () => {
   const React = require("react");
@@ -12,10 +13,9 @@ jest.mock("@truedat/core/components/Graph", () => {
   return function Graph(props) {
     mockGraphProps = props;
     const [expanded, setExpanded] = React.useState(false);
-    React.useEffect(
-      () => props.onInitialFitComplete(),
-      [props.onInitialFitComplete],
-    );
+    React.useEffect(() => {
+      if (!mockDeferInitialFit) props.onInitialFitComplete();
+    }, [props.onInitialFitComplete]);
     const canvas = (name) => (
       <div className="td-graph-container" data-testid={name}>
         {props.nodes
@@ -50,7 +50,6 @@ const props = {
   graphId: "graph-1",
   loading: false,
   simplified: true,
-  cancelPoll: jest.fn(),
   groups: [],
   resources: [
     { id: "orders", name: "Orders", x: 0, y: 0, w: 288, h: 100 },
@@ -72,6 +71,55 @@ const renderGraph = (extra = {}) =>
     { state },
   );
 
+it("keeps the unanswered loading dialog through polling and until the graph is fitted", () => {
+  mockDeferInitialFit = true;
+  const backgroundGraph = jest.fn();
+  const onGraphReady = jest.fn();
+  const generationJob = { requestId: "slow-graph", status: "pending" };
+  const pendingProps = {
+    ...props,
+    simplified: false,
+    loading: true,
+    generationJob,
+    backgroundGraph,
+    onGraphReady,
+  };
+  const view = render(<LineageGraph {...pendingProps} />, { state });
+  try {
+    act(() => jest.advanceTimersByTime(3000));
+    const continueButton = screen.getByRole("button", {
+      name: "lineage.graph.wait.continue",
+    });
+    for (let retry = 1; retry <= 3; retry += 1) {
+      view.rerender(
+        <LineageGraph
+          {...pendingProps}
+          generationJob={{ ...generationJob, hash: "slow-hash", retry }}
+        />,
+      );
+      act(() => jest.advanceTimersByTime(3000));
+      expect(continueButton).toBeVisible();
+      expect(continueButton).toBeEnabled();
+    }
+    view.rerender(
+      <LineageGraph
+        {...pendingProps}
+        loading={false}
+        generationJob={{ ...generationJob, status: "completed" }}
+      />,
+    );
+    expect(continueButton).toBeVisible();
+    expect(onGraphReady).not.toHaveBeenCalled();
+    expect(backgroundGraph).not.toHaveBeenCalled();
+    act(() => mockGraphProps.onInitialFitComplete());
+    expect(continueButton).not.toBeInTheDocument();
+    expect(onGraphReady).toHaveBeenCalledTimes(1);
+  } finally {
+    mockDeferInitialFit = false;
+    view.unmount();
+  }
+});
+
 it("selects successive nodes through a real portal and keeps dependencies active on return", () => {
   renderGraph();
   fireEvent.click(screen.getByText("Toggle expanded"));
@@ -225,7 +273,6 @@ it.each([
               graph={graph}
               fetchGraph={fetchGraph}
               clearGraph={jest.fn()}
-              cancelPoll={jest.fn()}
             />
           }
         />
@@ -236,3 +283,27 @@ it.each([
     else expect(fetchGraph).not.toHaveBeenCalled();
   },
 );
+
+test.each([
+  { simplified: true },
+  { simplified: false },
+  {
+    simplified: true,
+    generationJob: { requestId: "other", status: "pending" },
+  },
+])("keeps loading inline without a background action: %j", (extra) => {
+  const backgroundGraph = jest.fn();
+  const view = renderGraph({ ...extra, loading: true, backgroundGraph });
+  act(() => jest.advanceTimersByTime(3000));
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  expect(
+    screen.getByText("lineage.graph.loading").closest("[role=status]"),
+  ).toBeInTheDocument();
+  expect(
+    screen.queryByRole("button", { name: "lineage.graph.wait.background" }),
+  ).not.toBeInTheDocument();
+  fireEvent.keyDown(document, { key: "Escape", keyCode: 27 });
+  expect(backgroundGraph).not.toHaveBeenCalled();
+  expect(screen.getByText("lineage.graph.loading")).toBeInTheDocument();
+  view.unmount();
+});

package/src/components/__tests__/__snapshots__/LineageRoutes.spec.js.snap

@@ -2,6 +2,10 @@
 
 exports[`<LineageRoutes /> renders correctly with GRAPHS route 1`] = `
 <div>
+  <div
+    aria-live="polite"
+    class="lineage-generation-notices"
+  />
   <div
     class="ui icon visible bottom attached message center"
   >
@@ -25,4 +29,11 @@ exports[`<LineageRoutes /> renders correctly with GRAPHS route 1`] = `
 </div>
 `;
 
-exports[`<LineageRoutes /> renders correctly with default route 1`] = `<div />`;
+exports[`<LineageRoutes /> renders correctly with default route 1`] = `
+<div>
+  <div
+    aria-live="polite"
+    class="lineage-generation-notices"
+  />
+</div>
+`;

package/src/components/__tests__/fixtures/graphGenerationMessages.json

@@ -0,0 +1,28 @@
+{
+  "en": {
+    "lineage.graph.loading": "Analyzing...",
+    "lineage.graph.wait.background": "Generate in background",
+    "lineage.graph.wait.background.notice": "The graph is being generated in the background. We will notify you when it is ready.",
+    "lineage.graph.wait.close": "Close and continue generating in background",
+    "lineage.graph.wait.completed": "The graph is ready.",
+    "lineage.graph.wait.continue": "Keep waiting",
+    "lineage.graph.wait.dismiss": "Dismiss notification",
+    "lineage.graph.wait.explanation": "This graph is taking longer than expected. You can keep waiting or continue working while it is generated in the background.",
+    "lineage.graph.wait.failed": "Unable to complete graph generation. Please try again.",
+    "lineage.graph.wait.open": "Open graph",
+    "lineage.graph.wait.waiting": "Waiting…"
+  },
+  "es": {
+    "lineage.graph.loading": "Analizando...",
+    "lineage.graph.wait.background": "Generar en segundo plano",
+    "lineage.graph.wait.background.notice": "El grafo se está generando en segundo plano. Te avisaremos cuando esté listo.",
+    "lineage.graph.wait.close": "Cerrar y continuar generando en segundo plano",
+    "lineage.graph.wait.completed": "El grafo está listo.",
+    "lineage.graph.wait.continue": "Seguir esperando",
+    "lineage.graph.wait.dismiss": "Descartar notificación",
+    "lineage.graph.wait.explanation": "Este grafo está tardando más de lo esperado. Puedes seguir esperando o continuar trabajando mientras se genera en segundo plano.",
+    "lineage.graph.wait.failed": "No se ha podido completar la generación del grafo. Vuelve a intentarlo.",
+    "lineage.graph.wait.open": "Abrir grafo",
+    "lineage.graph.wait.waiting": "Esperando…"
+  }
+}

package/src/messages/en.js

@@ -195,35 +195,6 @@ export default {
   "joinType.left": "outer left",
   "joinType.right": "outer right",
   "joinType.full_outer": "full outer join",
-  "lineage.events.header": "My graphs",
-  "lineage.events.props.graph_data": "Graph",
-  "lineage.events.props.inserted_at": "Date",
-  "lineage.events.props.message": "Message",
-  "lineage.events.props.status": "Status",
-  "lineage.events.search.results.empty": "No graphs found",
-  "lineage.events.subheader": "Lineage graphs",
-  "lineage.form.header": "Select Structures",
-  "lineage.form.levels.all.label": "All",
-  "lineage.form.levels.header": "Levels",
-  "lineage.form.levels.select.input": "Select...",
-  "lineage.form.levels.select.label": "Depth",
-  "lineage.graph.loading": "Analyzing...",
-  "lineage.graph.loading.background.launched": "Background task launched",
-  "lineage.graph.loading.background.existing":
-    "The task for this graph was already launched",
-  "lineage.graph.loading.polling": "Poll retry #{retry}",
-  "lineage.graph.status.already_calculated": "Already calculated",
-  "lineage.graph.status.already_started": "Already started",
-  "lineage.graph.status.completed": "Completed",
-  "lineage.graph.status.failed": "Failed",
-  "lineage.graph.status.just_started": "Just started",
-  "lineage.graph.status.started": "Started",
-  "lineage.graph.status.timed_out": "Timed out",
-  "lineage.graph.metadata.header": "Information",
-  "lineage.graph.metadata.close.button": "Close",
-  "lineage.group.placeholder": "Select Top Level Structure",
-  "lineage.resources.placeholder": "Select Child Structures",
-  "lineage.subgroup.placeholder": "Select Child Structure",
   metadata: "Metadata",
   "metadataView.fields": "Available metadata fields",
   "metadataView.fields.placeholder":

package/src/messages/es.js

@@ -199,36 +199,6 @@ export default {
   "joinType.left": "outer left",
   "joinType.right": "outer right",
   "joinType.full_outer": "full outer join",
-  "lineage.events.header": "Mis grafos",
-  "lineage.events.props.graph_data": "Grafo",
-  "lineage.events.props.inserted_at": "Fecha",
-  "lineage.events.props.message": "Mensaje",
-  "lineage.events.props.status": "Estado",
-  "lineage.events.search.results.empty": "Ningún grafo encontrado",
-  "lineage.events.subheader": "Grafos de linaje",
-  "lineage.form.header": "Seleccionar Estructuras",
-  "lineage.form.levels.all.label": "Completo",
-  "lineage.form.levels.header": "Niveles",
-  "lineage.form.levels.select.input": "Seleccionar...",
-  "lineage.form.levels.select.label": "Profundidad",
-  "lineage.graph.loading": "Analizando...",
-  "lineage.graph.loading.background.launched":
-    "Tarea en segundo plano lanzada para grafo",
-  "lineage.graph.loading.background.existing":
-    "La tarea en segundo plano para este grafo ya fue lanzada",
-  "lineage.graph.loading.polling": "Sondeo #{retry}",
-  "lineage.graph.status.already_calculated": "Previamente calculado",
-  "lineage.graph.status.already_started": "Previamente iniciado",
-  "lineage.graph.status.completed": "Finalizado",
-  "lineage.graph.status.failed": "Fallido",
-  "lineage.graph.status.just_started": "Acaba de iniciarse",
-  "lineage.graph.status.started": "Iniciado",
-  "lineage.graph.status.timed_out": "Tiempo de espera máximo sobrepasado",
-  "lineage.graph.metadata.header": "Información",
-  "lineage.graph.metadata.close.button": "Cerrar",
-  "lineage.group.placeholder": "Seleccionar Estructura Padre",
-  "lineage.resources.placeholder": "Seleccionar Estructuras Hijos",
-  "lineage.subgroup.placeholder": "Seleccionar Estructura Hijo",
   metadata: "Metadata",
   "metadataView.fields": "Campos",
   "metadataView.fields.placeholder":

package/src/reducers/__tests__/graphGenerationState.spec.js

@@ -0,0 +1,113 @@
+import { graphGenerationState as reduce } from "../graphGenerationState";
+import {
+  backgroundGraph,
+  clearGraph,
+  graphGeneration,
+  fetchLineageEvents,
+} from "../../routines";
+
+test("a new request backgrounds the previous one and ignores unrelated events", () => {
+  let state = reduce(undefined, graphGeneration.request({ requestId: "a" }));
+  state = reduce(state, graphGeneration({ requestId: "a", hash: "hash-a" }));
+  state = reduce(state, graphGeneration.request({ requestId: "b" }));
+  state = reduce(
+    state,
+    fetchLineageEvents.success({
+      data: [{ graph_hash: "other", graph_id: 2, status: "COMPLETED" }],
+    }),
+  );
+  expect(state.jobs.a).toMatchObject({ status: "pending", background: true });
+  expect(state.jobs.b.background).toBe(false);
+});
+
+test("background completion matches a graph id, is stable and cannot be reverted by a late poll", () => {
+  let state = reduce(undefined, graphGeneration.request({ requestId: "a" }));
+  state = reduce(state, backgroundGraph());
+  state = reduce(
+    state,
+    graphGeneration.success({
+      requestId: "a",
+      graphId: 5,
+      status: "awaitingEvent",
+    }),
+  );
+  const complete = fetchLineageEvents.success({
+    data: [{ graph_id: 5, status: "COMPLETED" }],
+  });
+  state = reduce(state, complete);
+  expect(state.jobs.a.status).toBe("completed");
+  expect(reduce(state, complete)).toEqual(state);
+  expect(
+    reduce(
+      state,
+      graphGeneration.success({ requestId: "a", status: "awaitingEvent" }),
+    ),
+  ).toEqual(state);
+});
+
+test("failed events notify failure and completed events without an id cannot be opened", () => {
+  let state = reduce(undefined, graphGeneration.request({ requestId: "a" }));
+  state = reduce(state, graphGeneration({ requestId: "a", hash: "a" }));
+  state = reduce(state, backgroundGraph());
+  state = reduce(
+    state,
+    fetchLineageEvents.success({
+      data: [{ graph_hash: "a", status: "COMPLETED" }],
+    }),
+  );
+  expect(state.jobs.a.status).toBe("pending");
+  state = reduce(
+    state,
+    fetchLineageEvents.success({
+      data: [{ graph_hash: "a", status: "FAILED" }],
+    }),
+  );
+  expect(state.jobs.a.status).toBe("failed");
+});
+
+test.each([clearGraph(), backgroundGraph({ notify: false })])(
+  "implicit background and manual close do not enable notifications: %j",
+  (action) => {
+    let state = reduce(undefined, graphGeneration.request({ requestId: "a" }));
+    state = reduce(state, action);
+    expect(state.jobs.a.notify).toBe(false);
+  },
+);
+test("only an explicit background choice enables notifications", () => {
+  let state = reduce(undefined, graphGeneration.request({ requestId: "a" }));
+  state = reduce(state, graphGeneration.request({ requestId: "b" }));
+  expect(state.jobs.a.notify).not.toBe(true);
+  state = reduce(state, backgroundGraph());
+  expect(state.jobs.b.notify).toBe(true);
+});
+
+test("unrelated and repeated events preserve state and job references", () => {
+  let state = reduce(undefined, graphGeneration.request({ requestId: "a" }));
+  state = reduce(state, graphGeneration({ requestId: "a", hash: "a" }));
+  state = reduce(state, backgroundGraph());
+  expect(reduce(state, fetchLineageEvents.success({ data: [] }))).toBe(state);
+  const event = fetchLineageEvents.success({
+    data: [{ graph_hash: "a", graph_id: 5, status: "COMPLETED" }],
+  });
+  const completed = reduce(state, event);
+  expect(completed.jobs.a.status).toBe("completed");
+  expect(reduce(completed, event)).toBe(completed);
+});
+
+test("event indexing preserves the first match across graph id and hash", () => {
+  const state = {
+    active: "a",
+    jobs: { a: { graphId: 5, hash: "a", notify: true, status: "pending" } },
+  };
+  const next = reduce(
+    state,
+    fetchLineageEvents.success({
+      data: [
+        { graph_hash: "a", graph_id: 6, status: "COMPLETED" },
+        { graph_id: 5, status: "FAILED" },
+        { graph_hash: "a", graph_id: 7, status: "FAILED" },
+      ],
+    }),
+  );
+  expect(next.jobs.a).toMatchObject({ graphId: 6, status: "completed" });
+});

package/src/reducers/graphGenerationState.js

@@ -0,0 +1,113 @@
+import {
+  backgroundGraph,
+  clearGraph,
+  dismissGraphGeneration,
+  graphGeneration,
+  fetchLineageEvents,
+} from "../routines";
+import {
+  isCompletedStatus,
+  isFailedStatus,
+} from "../components/lineageEventHelpers";
+
+export const initialState = { active: null, jobs: {} };
+
+export const graphGenerationState = (
+  state = initialState,
+  { type, payload },
+) => {
+  const activeJob = state.jobs[state.active];
+  switch (type) {
+    case graphGeneration.REQUEST:
+      return {
+        active: payload.requestId,
+        jobs: {
+          ...Object.fromEntries(
+            Object.entries(state.jobs).filter(
+              ([, job]) =>
+                job.notify || (!job.background && job.status === "failed"),
+            ),
+          ),
+          ...(activeJob?.status === "pending"
+            ? { [state.active]: { ...activeJob, background: true } }
+            : {}),
+          [payload.requestId]: {
+            requestId: payload.requestId,
+            status: "pending",
+            background: false,
+          },
+        },
+      };
+    case backgroundGraph.TRIGGER:
+    case clearGraph.TRIGGER:
+      return activeJob?.status === "pending"
+        ? {
+            ...state,
+            jobs: {
+              ...state.jobs,
+              [state.active]: {
+                ...activeJob,
+                background: true,
+                notify:
+                  type === backgroundGraph.TRIGGER
+                    ? payload?.notify !== false
+                    : activeJob.notify === true,
+              },
+            },
+          }
+        : state;
+    case graphGeneration.TRIGGER:
+    case graphGeneration.SUCCESS:
+    case graphGeneration.FAILURE: {
+      const job = state.jobs[payload.requestId];
+      if (!job || ["completed", "failed"].includes(job.status)) return state;
+      return {
+        ...state,
+        jobs: { ...state.jobs, [payload.requestId]: { ...job, ...payload } },
+      };
+    }
+    case fetchLineageEvents.SUCCESS: {
+      const byId = new Map();
+      const byHash = new Map();
+      (payload.data || []).forEach((event, index) => {
+        const entry = { event, index };
+        if (event.graph_id != null && !byId.has(String(event.graph_id)))
+          byId.set(String(event.graph_id), entry);
+        if (event.graph_hash && !byHash.has(event.graph_hash))
+          byHash.set(event.graph_hash, entry);
+      });
+      const entries = Object.entries(state.jobs).map(([key, job]) => {
+        if (!job.notify || !["pending", "awaitingEvent"].includes(job.status))
+          return [key, job];
+        const idMatch =
+          job.graphId != null ? byId.get(String(job.graphId)) : undefined;
+        const hashMatch = job.hash ? byHash.get(job.hash) : undefined;
+        const event = (
+          idMatch && (!hashMatch || idMatch.index < hashMatch.index)
+            ? idMatch
+            : hashMatch
+        )?.event;
+        if (isFailedStatus(event?.status))
+          return [key, { ...job, status: "failed" }];
+        if (isCompletedStatus(event?.status) && event.graph_id != null)
+          return [
+            key,
+            { ...job, status: "completed", graphId: event.graph_id },
+          ];
+        return [key, job];
+      });
+      return entries.some(([key, job]) => state.jobs[key] !== job)
+        ? { ...state, jobs: Object.fromEntries(entries) }
+        : state;
+    }
+    case dismissGraphGeneration.TRIGGER:
+      return {
+        ...state,
+        jobs: Object.fromEntries(
+          Object.entries(state.jobs).filter(([key]) => key !== payload),
+        ),
+      };
+    default:
+      return state;
+  }
+};

package/src/reducers/graphLoading.js

@@ -1,4 +1,5 @@
 import {
+  backgroundGraph,
   clearGraph,
   clearStructure,
   createGraph,
@@ -10,6 +11,7 @@ import {
 
 export const graphLoading = (state = false, { type, payload }) => {
   switch (type) {
+    case backgroundGraph.TRIGGER:
     case clearGraph.TRIGGER:
       return false;
     case clearStructure.TRIGGER:

package/src/reducers/index.js

@@ -19,6 +19,7 @@ import { grantSelectedFilter } from "./grantSelectedFilter";
 import { grantsPageSize } from "./grantsPageSize";
 
 import { graph } from "./graph";
+import { graphGenerationState } from "./graphGenerationState";
 import { graphLoading } from "./graphLoading";
 import { graphRedirect } from "./graphRedirect";
 import { lineageEvents } from "./lineageEvents";
@@ -98,6 +99,7 @@ export {
   grantSelectedFilter,
   grantsPageSize,
   graph,
+  graphGenerationState,
   graphLoading,
   graphRedirect,
   lineageEvents,