(cellcard) Handle cell card hierarchy behaviour

Author: filippomc

src/components/CellCards/CellCard/CellCard.jsx

@@ -63,6 +63,8 @@ const CellCard = ({ cell, data, group, termSlug, discussionHref, onNavigateToCel
       cell={cell}
       hierarchy={data.hierarchy}
       rootLabel={data.entry?.rootClass?.split(":").pop() || "root"}
+      // Same resolver the graph uses: a cell stays in the card, anything else opens its own page.
+      onNavigate={onNavigateToRef}
       actions={commentFor(HIERARCHY_TITLE)}
     />,
     <AnatomicalContext

src/components/CellCards/CellCard/useCellTerm.js

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { loadOntology, findCell } from "../services/ontologyGridService";
+import { useEffect, useMemo, useState } from "react";
+import { loadOntology, peekOntology, findCell } from "../services/ontologyGridService";
 import { ONTOLOGY_CATALOG, DEFAULT_ONTOLOGY_SLUG } from "../config/gridConfig";
 
 /**
@@ -11,41 +11,64 @@ import { ONTOLOGY_CATALOG, DEFAULT_ONTOLOGY_SLUG } from "../config/gridConfig";
  * arriving from a grid tile costs no network and no reparse, while a cold deep-link still
  * works on its own.
  *
+ * A parse already in that cache is resolved *during render* (`peekOntology`) rather than in the
+ * effect. Going through the effect would report `loading` for one frame on every term change,
+ * and that frame swaps the card for its skeleton — unmounting the widgets and losing their
+ * state. The Ontology Hierarchy widget has to stay stationary while the rest of the card changes
+ * around it (spec §3.2), which it cannot do if it is remounted on the way.
+ *
  * The card's data never comes from the InterLex term API — Precision cells are npokb-only and
  * that endpoint 404s on them. `ontologySlug` is the *context* ontology (the `?ontology=` param
  * written by the grid), which is a different thing from `DataContext.activeOntology`: the
  * latter is an edit target, not a data source.
  */
 const useCellTerm = (termSlug, ontologySlug = DEFAULT_ONTOLOGY_SLUG) => {
-  const [state, setState] = useState({ cell: null, data: null, loading: true, error: null });
+  const slug = ontologySlug && ONTOLOGY_CATALOG[ontologySlug] ? ontologySlug : DEFAULT_ONTOLOGY_SLUG;
+  // Carries the slug it was resolved against, so a switch of context ontology cannot be served
+  // the previous ontology's cell for the render before the effect runs.
+  const [state, setState] = useState({ slug, cell: null, data: null, loading: true, error: null });
+  const cached = peekOntology(slug);
 
   useEffect(() => {
-    const slug = ontologySlug && ONTOLOGY_CATALOG[ontologySlug] ? ontologySlug : DEFAULT_ONTOLOGY_SLUG;
     if (!termSlug) {
-      setState({ cell: null, data: null, loading: false, error: null });
+      setState({ slug, cell: null, data: null, loading: false, error: null });
       return undefined;
     }
+    // Already parsed: resolved synchronously below, so there is nothing to load or to flag.
+    if (peekOntology(slug)) return undefined;
 
     let active = true;
-    setState((prev) => ({ ...prev, loading: true, error: null }));
+    setState({ slug, cell: null, data: null, loading: true, error: null });
 
     loadOntology(slug)
       .then((data) => {
         if (!active) return;
         // A term that is not in this ontology is not an error — the tab simply has nothing to
         // show, and the caller renders/hides accordingly.
-        setState({ cell: findCell(data, termSlug) || null, data, loading: false, error: null });
+        setState({ slug, cell: findCell(data, termSlug) || null, data, loading: false, error: null });
       })
       .catch((error) => {
-        if (active) setState({ cell: null, data: null, loading: false, error });
+        if (active) setState({ slug, cell: null, data: null, loading: false, error });
       });
 
     return () => {
       active = false;
     };
-  }, [termSlug, ontologySlug]);
+  }, [termSlug, slug]);
 
-  return state;
+  return useMemo(() => {
+    if (cached) {
+      return {
+        cell: termSlug ? findCell(cached, termSlug) || null : null,
+        data: cached,
+        loading: false,
+        error: null,
+      };
+    }
+    // State left over from another ontology says nothing about this one; the effect is loading it.
+    if (state.slug !== slug) return { cell: null, data: null, loading: true, error: null };
+    return { cell: state.cell, data: state.data, loading: state.loading, error: state.error };
+  }, [cached, termSlug, slug, state]);
 };
 
 export default useCellTerm;