@explorable-viz/fluid 0.7.64 → 0.7.66

package/dist/fluid/shared/load-figure.js

@@ -780,19 +780,19 @@ var traverseArrayImpl = function() {
       return function(pure3) {
         return function(f) {
           return function(array4) {
-            function go(bot, top3) {
-              switch (top3 - bot) {
+            function go(bot2, top3) {
+              switch (top3 - bot2) {
                 case 0:
                   return pure3([]);
                 case 1:
-                  return map3(array1)(f(array4[bot]));
+                  return map3(array1)(f(array4[bot2]));
                 case 2:
-                  return apply4(map3(array2)(f(array4[bot])))(f(array4[bot + 1]));
+                  return apply4(map3(array2)(f(array4[bot2])))(f(array4[bot2 + 1]));
                 case 3:
-                  return apply4(apply4(map3(array3)(f(array4[bot])))(f(array4[bot + 1])))(f(array4[bot + 2]));
+                  return apply4(apply4(map3(array3)(f(array4[bot2])))(f(array4[bot2 + 1])))(f(array4[bot2 + 2]));
                 default:
-                  var pivot = bot + Math.floor((top3 - bot) / 4) * 2;
-                  return apply4(map3(concat2)(go(bot, pivot)))(go(pivot, top3));
+                  var pivot = bot2 + Math.floor((top3 - bot2) / 4) * 2;
+                  return apply4(map3(concat2)(go(bot2, pivot)))(go(pivot, top3));
               }
             }
             return go(0, array4.length);
@@ -2459,17 +2459,17 @@ var Aff = function() {
         }
       }
     }
-    function onComplete(join4) {
+    function onComplete(join5) {
       return function() {
         if (status === COMPLETED) {
-          rethrow = rethrow && join4.rethrow;
-          join4.handler(step)();
+          rethrow = rethrow && join5.rethrow;
+          join5.handler(step)();
           return function() {
           };
         }
         var jid = joinId++;
         joins = joins || {};
-        joins[jid] = join4;
+        joins[jid] = join5;
         return function() {
           if (joins !== null) {
             delete joins[jid];
@@ -2524,7 +2524,7 @@ var Aff = function() {
         return canceler;
       };
     }
-    function join3(cb) {
+    function join4(cb) {
       return function() {
         var canceler = onComplete({
           rethrow: false,
@@ -2538,7 +2538,7 @@ var Aff = function() {
     }
     return {
       kill,
-      join: join3,
+      join: join4,
       onComplete,
       isSuspended: function() {
         return status === SUSPENDED;
@@ -2622,7 +2622,7 @@ var Aff = function() {
       }
       return kills2;
     }
-    function join3(result, head, tail4) {
+    function join4(result, head, tail4) {
       var fail3, step, lhs, rhs, tmp, kid;
       if (util2.isLeft(result)) {
         fail3 = result;
@@ -2669,9 +2669,9 @@ var Aff = function() {
                     if (tmp) {
                       tmp = false;
                     } else if (tail4 === null) {
-                      join3(fail3, null, null);
+                      join4(fail3, null, null);
                     } else {
-                      join3(fail3, tail4._1, tail4._2);
+                      join4(fail3, tail4._1, tail4._2);
                     }
                   };
                 });
@@ -2706,9 +2706,9 @@ var Aff = function() {
                     if (tmp) {
                       tmp = false;
                     } else if (tail4 === null) {
-                      join3(step, null, null);
+                      join4(step, null, null);
                     } else {
-                      join3(step, tail4._1, tail4._2);
+                      join4(step, tail4._1, tail4._2);
                     }
                   };
                 });
@@ -2732,7 +2732,7 @@ var Aff = function() {
         return function() {
           delete fibers[fiber._1];
           fiber._3 = result;
-          join3(result, fiber._2._1, fiber._2._2);
+          join4(result, fiber._2._1, fiber._2._2);
         };
       };
     }
@@ -14758,18 +14758,18 @@ var ViewState = class {
       let viewFrom, viewTo;
       if (wrapping) {
         let marginHeight = margin / this.heightOracle.lineLength * this.heightOracle.lineHeight;
-        let top3, bot;
+        let top3, bot2;
         if (target != null) {
           let targetFrac = findFraction(structure, target);
           let spaceFrac = ((this.visibleBottom - this.visibleTop) / 2 + marginHeight) / line2.height;
           top3 = targetFrac - spaceFrac;
-          bot = targetFrac + spaceFrac;
+          bot2 = targetFrac + spaceFrac;
         } else {
           top3 = (this.visibleTop - line2.top - marginHeight) / line2.height;
-          bot = (this.visibleBottom - line2.top + marginHeight) / line2.height;
+          bot2 = (this.visibleBottom - line2.top + marginHeight) / line2.height;
         }
         viewFrom = findPosition(structure, top3);
-        viewTo = findPosition(structure, bot);
+        viewTo = findPosition(structure, bot2);
       } else {
         let totalWidth = structure.total * this.heightOracle.charWidth;
         let marginWidth = margin * this.heightOracle.charWidth;
@@ -27780,7 +27780,7 @@ var dataTypes = /* @__PURE__ */ foldrArray(Cons)(Nil)([
   /* @__PURE__ */ dataType("View")([
     /* @__PURE__ */ $Tuple("BarChart", 1),
     /* @__PURE__ */ $Tuple("LineChart", 1),
-    /* @__PURE__ */ $Tuple("LinkedText", 1),
+    /* @__PURE__ */ $Tuple("Paragraph", 1),
     /* @__PURE__ */ $Tuple("MultiView", 1),
     /* @__PURE__ */ $Tuple("ScatterPlot", 1)
   ]),
@@ -27793,11 +27793,12 @@ var dataTypes = /* @__PURE__ */ foldrArray(Cons)(Nil)([
     /* @__PURE__ */ $Tuple("Polyline", 3),
     /* @__PURE__ */ $Tuple("Polymarkers", 2),
     /* @__PURE__ */ $Tuple("Rect", 5),
-    /* @__PURE__ */ $Tuple("Text", 5),
+    /* @__PURE__ */ $Tuple("String", 5),
     /* @__PURE__ */ $Tuple("Viewport", 9)
   ]),
   /* @__PURE__ */ dataType("Transform")([/* @__PURE__ */ $Tuple("Scale", 2), /* @__PURE__ */ $Tuple("Translate", 2)]),
-  /* @__PURE__ */ dataType("Marker")([/* @__PURE__ */ $Tuple("Arrowhead", 0)])
+  /* @__PURE__ */ dataType("Marker")([/* @__PURE__ */ $Tuple("Arrowhead", 0)]),
+  /* @__PURE__ */ dataType("TextFragment")([/* @__PURE__ */ $Tuple("Text", 1), /* @__PURE__ */ $Tuple("Link", 2)])
 ]);
 var ctrToDataType = /* @__PURE__ */ (() => fromFoldable(foldableList)(bindList.bind(listMap((d) => listMap((v) => $Tuple(
   v,
@@ -32336,12 +32337,12 @@ var anon = (v) => {
   fail();
 };
 var orElseBwd = (dictBoundedJoinSemilattice) => {
-  const bot = dictBoundedJoinSemilattice.bot;
+  const bot2 = dictBoundedJoinSemilattice.bot;
   const $0 = dictBoundedJoinSemilattice.JoinSemilattice0();
   return (v) => (ks) => {
     if (v._1.tag === "Nil") {
       if (ks._1._1.tag === "Nil" && ks._2.tag === "Nil") {
-        return $Tuple(bot, ks._1._2);
+        return $Tuple(bot2, ks._1._2);
       }
       fail();
     }
@@ -32349,7 +32350,7 @@ var orElseBwd = (dictBoundedJoinSemilattice) => {
       const $1 = v._1._2;
       const popIfPresent = (v1) => (v2) => {
         if (v1.tag === "Nil") {
-          return $Tuple(bot, v2);
+          return $Tuple(bot2, v2);
         }
         const v3 = unsnoc3(v2);
         const v4 = unsnoc3(nonEmptyListNonEmptyList.nonEmpty(v1));
@@ -34735,32 +34736,32 @@ var joinSemilatticeDictRep = (dictJoinSemilattice) => ({
   }
 });
 var joinSemilatticeBaseVal = (dictJoinSemilattice) => {
-  const join3 = dictJoinSemilattice.join;
+  const join4 = dictJoinSemilattice.join;
   return {
     join: (v) => (v1) => {
       if (v.tag === "Int") {
         if (v1.tag === "Int") {
           return $BaseVal("Int", mustEq(eqInt)(showInt)(v._1)(v1._1));
         }
-        return applyBaseVal.apply(functorBaseVal.map(join3)(v))(v1);
+        return applyBaseVal.apply(functorBaseVal.map(join4)(v))(v1);
       }
       if (v.tag === "Float") {
         if (v1.tag === "Float") {
           return $BaseVal("Float", mustEq(eqNumber)(showNumber)(v._1)(v1._1));
         }
-        return applyBaseVal.apply(functorBaseVal.map(join3)(v))(v1);
+        return applyBaseVal.apply(functorBaseVal.map(join4)(v))(v1);
       }
       if (v.tag === "Str") {
         if (v1.tag === "Str") {
           return $BaseVal("Str", mustEq(eqString)(showString)(v._1)(v1._1));
         }
-        return applyBaseVal.apply(functorBaseVal.map(join3)(v))(v1);
+        return applyBaseVal.apply(functorBaseVal.map(join4)(v))(v1);
       }
       if (v.tag === "Dictionary") {
         if (v1.tag === "Dictionary") {
           return $BaseVal("Dictionary", joinSemilatticeDictRep(dictJoinSemilattice).join(v._1)(v1._1));
         }
-        return applyBaseVal.apply(functorBaseVal.map(join3)(v))(v1);
+        return applyBaseVal.apply(functorBaseVal.map(join4)(v))(v1);
       }
       if (v.tag === "Constr") {
         if (v1.tag === "Constr") {
@@ -34770,18 +34771,18 @@ var joinSemilatticeBaseVal = (dictJoinSemilattice) => {
             joinSemilatticeList(joinSemilatticeVal(dictJoinSemilattice)).join(v._2)(v1._2)
           );
         }
-        return applyBaseVal.apply(functorBaseVal.map(join3)(v))(v1);
+        return applyBaseVal.apply(functorBaseVal.map(join4)(v))(v1);
       }
       if (v.tag === "Matrix") {
         if (v1.tag === "Matrix") {
           return $BaseVal("Matrix", joinSemilatticeMatrixRep(dictJoinSemilattice).join(v._1)(v1._1));
         }
-        return applyBaseVal.apply(functorBaseVal.map(join3)(v))(v1);
+        return applyBaseVal.apply(functorBaseVal.map(join4)(v))(v1);
       }
       if (v.tag === "Fun" && v1.tag === "Fun") {
         return $BaseVal("Fun", joinSemilatticeFun(dictJoinSemilattice).join(v._1)(v1._1));
       }
-      return applyBaseVal.apply(functorBaseVal.map(join3)(v))(v1);
+      return applyBaseVal.apply(functorBaseVal.map(join4)(v))(v1);
     }
   };
 };
@@ -34864,11 +34865,11 @@ var string2 = {
   }
 };
 var unary = (dictBoundedJoinSemilattice) => {
-  const bot = dictBoundedJoinSemilattice.bot;
+  const bot2 = dictBoundedJoinSemilattice.bot;
   return (id3) => (f) => $Tuple(
     id3,
     $Val(
-      bot,
+      bot2,
       $BaseVal(
         "Fun",
         $Fun(
@@ -35021,11 +35022,11 @@ var $$boolean = {
   }
 };
 var binaryZero = (dictBoundedJoinSemilattice) => {
-  const bot = dictBoundedJoinSemilattice.bot;
+  const bot2 = dictBoundedJoinSemilattice.bot;
   return (dictIsZero) => (id3) => (f) => $Tuple(
     id3,
     $Val(
-      bot,
+      bot2,
       $BaseVal(
         "Fun",
         $Fun(
@@ -35109,11 +35110,11 @@ var binaryZero = (dictBoundedJoinSemilattice) => {
   );
 };
 var binary = (dictBoundedJoinSemilattice) => {
-  const bot = dictBoundedJoinSemilattice.bot;
+  const bot2 = dictBoundedJoinSemilattice.bot;
   return (id3) => (f) => $Tuple(
     id3,
     $Val(
-      bot,
+      bot2,
       $BaseVal(
         "Fun",
         $Fun(
@@ -35267,6 +35268,23 @@ var reflectDictSelState\u{1D54A}$x215ValS = {
     })()
   })
 };
+var meetSemilatticeSelState = (dictMeetSemilattice) => ({
+  meet: (v) => (v1) => {
+    if (v1.tag === "Inert") {
+      return Inert;
+    }
+    if (v.tag === "Inert") {
+      return Inert;
+    }
+    if (v.tag === "Reactive" && v1.tag === "Reactive") {
+      return $SelState(
+        "Reactive",
+        { persistent: dictMeetSemilattice.meet(v._1.persistent)(v1._1.persistent), transient: dictMeetSemilattice.meet(v._1.transient)(v1._1.transient) }
+      );
+    }
+    fail();
+  }
+});
 var highlightableSelState = (dictHighlightable) => (dictJoinSemilattice) => ({
   highlightIf: (v) => {
     if (v.tag === "Inert") {
@@ -35316,6 +35334,24 @@ var functorSelState = {
     fail();
   }
 };
+var boundedJoinSemilatticeSel = (dictBoundedJoinSemilattice) => {
+  const $0 = dictBoundedJoinSemilattice.JoinSemilattice0();
+  const joinSemilatticeSelState1 = {
+    join: (v) => (v1) => {
+      if (v1.tag === "Inert") {
+        return v;
+      }
+      if (v.tag === "Inert") {
+        return v1;
+      }
+      if (v.tag === "Reactive" && v1.tag === "Reactive") {
+        return $SelState("Reactive", { persistent: $0.join(v._1.persistent)(v1._1.persistent), transient: $0.join(v._1.transient)(v1._1.transient) });
+      }
+      fail();
+    }
+  };
+  return { bot: Inert, JoinSemilattice0: () => joinSemilatticeSelState1 };
+};
 var applySelState = {
   apply: (v) => (v1) => {
     if (v.tag === "Inert") {
@@ -35331,12 +35367,6 @@ var applySelState = {
   },
   Functor0: () => functorSelState
 };
-var joinSemilatticeSelState = (dictJoinSemilattice) => ({
-  join: (() => {
-    const $0 = dictJoinSemilattice.join;
-    return (a) => (b) => applySelState.apply(functorSelState.map($0)(a))(b);
-  })()
-});
 var to\u{1D54A} = (v) => {
   if (v) {
     return Primary;
@@ -35494,6 +35524,7 @@ var joinSemilattice\u{1D54A} = {
     fail();
   }
 };
+var boundedJoinSemilattice\u{1D54A} = { bot: None, JoinSemilattice0: () => joinSemilattice\u{1D54A} };
 var isPersistent = (x2) => compare$p((() => {
   if (x2.tag === "Inert") {
     return None;
@@ -36309,13 +36340,27 @@ var $Direction = (tag) => tag;
 var for_2 = /* @__PURE__ */ for_(applicativeEffect)(foldableArray);
 var LinkedInputs = /* @__PURE__ */ $Direction("LinkedInputs");
 var LinkedOutputs = /* @__PURE__ */ $Direction("LinkedOutputs");
-var uiHelpers = /* @__PURE__ */ (() => ({
+var uiHelpers = {
   val: fst,
   selState: snd,
-  join: joinSemilatticeSelState(joinSemilattice\u{1D54A}).join,
+  join: (v) => (v1) => {
+    if (v1.tag === "Inert") {
+      return v;
+    }
+    if (v.tag === "Inert") {
+      return v1;
+    }
+    if (v.tag === "Reactive" && v1.tag === "Reactive") {
+      return $SelState(
+        "Reactive",
+        { persistent: joinSemilattice\u{1D54A}.join(v._1.persistent)(v1._1.persistent), transient: joinSemilattice\u{1D54A}.join(v._1.transient)(v1._1.transient) }
+      );
+    }
+    fail();
+  },
   selClasses,
   selClassesFor
-}))();
+};
 var selListener = (figVal) => (redraw) => (selector2) => eventListener((x2) => {
   const $0 = selectionEventData(x2);
   return redraw(figVal(selector2($0._1)($0._2)));
@@ -36593,7 +36638,22 @@ var reflectDictSelState\u{1D54A}$x215ValS23 = { from: () => (r) => ({ x: get_int
 
 // output-es/App.View.LineChart/index.js
 var identity27 = (x2) => x2;
-var join = /* @__PURE__ */ (() => joinSemilatticeSelState(joinSemilattice\u{1D54A}).join)();
+var join = (v) => (v1) => {
+  if (v1.tag === "Inert") {
+    return v;
+  }
+  if (v.tag === "Inert") {
+    return v1;
+  }
+  if (v.tag === "Reactive" && v1.tag === "Reactive") {
+    return $SelState(
+      "Reactive",
+      { persistent: joinSemilattice\u{1D54A}.join(v._1.persistent)(v1._1.persistent), transient: joinSemilattice\u{1D54A}.join(v._1.transient)(v1._1.transient) }
+    );
+  }
+  fail();
+};
+var meet = /* @__PURE__ */ (() => meetSemilatticeSelState(meetSemilattice\u{1D54A}).meet)();
 var for_3 = /* @__PURE__ */ for_(applicativeEffect)(foldableArray);
 var minimum2 = /* @__PURE__ */ minimum(ordNumber)(foldable1NonEmptyArray);
 var maximum2 = /* @__PURE__ */ maximum(ordNumber)(foldable1NonEmptyArray);
@@ -36682,9 +36742,13 @@ var setSelState2 = (v) => (redraw) => (rootElement) => {
         const segment$p = $2();
         const v2 = definitely("index within bounds")(index($0)(segment$p.i));
         return attrs(segment)(fromFoldable10((() => {
-          const $3 = definitely("index within bounds")(index(v2.points)(segment$p.j1));
-          const $4 = definitely("index within bounds")(index(v2.points)(segment$p.j2));
-          const sel = applySelState.apply(functorSelState.map(meetSemilattice\u{1D54A}.meet)(join($3.x._2)($3.y._2)))(join($4.x._2)($4.y._2));
+          const sel = meet((() => {
+            const $3 = definitely("index within bounds")(index(v2.points)(segment$p.j1));
+            return join($3.x._2)($3.y._2);
+          })())((() => {
+            const $3 = definitely("index within bounds")(index(v2.points)(segment$p.j2));
+            return join($3.x._2)($3.y._2);
+          })());
           return [
             $Tuple(
               "stroke",
@@ -36893,87 +36957,8 @@ var drawableLineChart = {
   }
 };
 
-// output-es/App.View.LinkedText/index.js
-var for_4 = /* @__PURE__ */ for_(applicativeEffect)(foldableArray);
-var forWithIndex_2 = /* @__PURE__ */ forWithIndex_(applicativeEffect)(foldableWithIndexArray);
-var reflectValSelState\u{1D54A}Linked = {
-  from: () => (r) => arrayMap((v) => $Tuple(v._2.tag === "Str" ? v._2._1 : typeError(v._2)("Str"), v._1))(reflectValSelState\u{1D54A}ArrayV.from()(r))
-};
-var setSelState3 = (v) => (redraw) => (rootElement) => {
-  const $0 = selectAll2(".linked-text")(rootElement);
-  return () => {
-    const elems$p = $0();
-    return for_4(elems$p)((elem2) => {
-      const $1 = datum2(elem2);
-      return () => {
-        const v1 = $1();
-        const $2 = definitely("index within bounds")(index(v)(v1.i));
-        const $3 = styles(elem2)(fromFoldable10([
-          $Tuple("border-bottom", isTransient($2._2) ? "1px solid blue" : "none"),
-          $Tuple(
-            "background",
-            (() => {
-              if (isPrimary($2._2) && isPersistent($2._2)) {
-                return "#93E9BE";
-              }
-              if (isSecondary($2._2) && isPersistent($2._2)) {
-                return "rgb(226, 226, 226)";
-              }
-              return "white";
-            })()
-          ),
-          $Tuple(
-            "color",
-            (() => {
-              if (isPrimary($2._2) && isTransient($2._2)) {
-                return "blue";
-              }
-              if (isSecondary($2._2) && isTransient($2._2)) {
-                return "royalblue";
-              }
-              return "black";
-            })()
-          )
-        ]))();
-        return for_2(["mousedown", "mouseenter", "mouseleave"])((ev) => on(ev)(redraw)($3))();
-      };
-    })();
-  };
-};
-var createRootElement2 = (v) => (div) => (childId) => {
-  const $0 = createChild(div)(showElementType.show(Text2))(fromFoldable10([
-    classes(["linked-text-parent"]),
-    $Tuple("id", childId)
-  ]));
-  return () => {
-    const rootElement = $0();
-    forWithIndex_2(v)((i) => (elem2) => {
-      const $1 = createChild(rootElement)(showElementType.show(Text2))(fromFoldable10([
-        classes(["linked-text"]),
-        $Tuple("id", childId)
-      ]));
-      return () => {
-        const elem$p = $1();
-        const $2 = setText(elem2._1)(elem$p)();
-        return setDatum({ i })($2)();
-      };
-    })();
-    return rootElement;
-  };
-};
-var drawable2LinkedText = { createRootElement: createRootElement2, setSelState: setSelState3 };
-var drawableLinkedText = {
-  draw: (rSpec) => (figVal) => (v) => (redraw) => {
-    const $0 = selListener(figVal)(redraw)((v1) => (x2) => constrArg("LinkedText")(0)(listElement(v1.i)(x2)));
-    return () => {
-      const $1 = $0();
-      return draw$p(drawable2LinkedText)(uiHelpers)(rSpec)($1)();
-    };
-  }
-};
-
 // output-es/App.View.MatrixView/foreign.js
-function setSelState4({
+function setSelState3({
   hBorderStyles,
   vBorderStyles
 }, {
@@ -37051,7 +37036,7 @@ function drawMatrix_(matrixViewHelpers2, uiHelpers2, {
         select_default2(this).selectAll("line").data(range3(matrix.j + 1).map((j) => ({ i: d, j }))).enter().append("line").attr("x1", ({ j }) => j * w).attr("y1", ({ i }) => (i - 1) * h).attr("x2", ({ j }) => j * w).attr("y2", ({ i }) => i * h).attr("class", "matrix-cell-vBorder");
       });
     }
-    setSelState4(matrixViewHelpers2, uiHelpers2, rootElement, { matrix }, listener);
+    setSelState3(matrixViewHelpers2, uiHelpers2, rootElement, { matrix }, listener);
   };
 }
 var drawMatrix = (x1) => (x2) => (x3) => (x4) => drawMatrix_(x1, x2, x3, x4);
@@ -37129,16 +37114,174 @@ var drawableMultiView = {
   }
 };
 
+// output-es/App.View.Paragraph/index.js
+var $TextFragment = (tag, _1, _2) => ({ tag, _1, _2 });
+var join2 = (v) => (v1) => {
+  if (v1.tag === "Inert") {
+    return v;
+  }
+  if (v.tag === "Inert") {
+    return v1;
+  }
+  if (v.tag === "Reactive" && v1.tag === "Reactive") {
+    return $SelState(
+      "Reactive",
+      { persistent: joinSemilattice\u{1D54A}.join(v._1.persistent)(v1._1.persistent), transient: joinSemilattice\u{1D54A}.join(v._1.transient)(v1._1.transient) }
+    );
+  }
+  fail();
+};
+var bot = /* @__PURE__ */ (() => boundedJoinSemilatticeSel(boundedJoinSemilattice\u{1D54A}).bot)();
+var for_4 = /* @__PURE__ */ for_(applicativeEffect)(foldableArray);
+var forWithIndex_2 = /* @__PURE__ */ forWithIndex_(applicativeEffect)(foldableWithIndexArray);
+var textFragment = {
+  pack: (v) => {
+    if (v.tag === "TextFragment") {
+      return $BaseVal("Constr", "Text", $List("Cons", $Val(v._1._2, $BaseVal("Str", v._1._1)), Nil));
+    }
+    if (v.tag === "Link") {
+      return $BaseVal(
+        "Constr",
+        "Link",
+        $List("Cons", v._1, $List("Cons", $Val(v._2._2, $BaseVal("Str", v._2._1)), Nil))
+      );
+    }
+    fail();
+  },
+  unpack: (v) => {
+    if (v.tag === "Constr" && v._2.tag === "Cons") {
+      if (v._2._1._2.tag === "Str" && v._2._2.tag === "Nil") {
+        if (v._1 === "Text") {
+          return $TextFragment("TextFragment", $Tuple(v._2._1._2._1, v._2._1._1));
+        }
+        return typeError(v)("TextFragment");
+      }
+      if (v._2._2.tag === "Cons" && v._2._2._1._2.tag === "Str" && v._2._2._2.tag === "Nil" && v._1 === "Link") {
+        return $TextFragment("Link", $Val(v._2._1._1, v._2._1._2), $Tuple(v._2._2._1._2._1, v._2._2._1._1));
+      }
+    }
+    return typeError(v)("TextFragment");
+  }
+};
+var reflectValSelState\u{1D54A}Paragr = { from: () => (r) => arrayMap((x2) => textFragment.unpack(x2._2))(reflectValSelState\u{1D54A}ArrayV.from()(r)) };
+var selTextFragment = (v) => (x2) => constrArg("Paragraph")(0)(listElement(v.i)((v1) => {
+  if (v1._2.tag === "Constr" && v1._2._2.tag === "Cons") {
+    if (v1._2._2._2.tag === "Nil") {
+      if (v1._2._1 === "Text") {
+        return $Val(v1._1, $BaseVal("Constr", v1._2._1, $List("Cons", x2(v1._2._2._1), Nil)));
+      }
+      fail();
+    }
+    if (v1._2._2._2.tag === "Cons" && v1._2._2._2._2.tag === "Nil" && v1._2._1 === "Link") {
+      return $Val(
+        v1._1,
+        $BaseVal("Constr", v1._2._1, $List("Cons", x2(v1._2._2._1), $List("Cons", v1._2._2._2._1, Nil)))
+      );
+    }
+  }
+  fail();
+}));
+var getText = (elems) => (i) => {
+  const v = definitely("index within bounds")(index(elems)(i));
+  if (v.tag === "TextFragment") {
+    return v._1;
+  }
+  if (v.tag === "Link") {
+    return $Tuple(v._2._1, join2(v._1._1)(foldableBaseVal.foldr(join2)(bot)(v._1._2)));
+  }
+  fail();
+};
+var setSelState4 = (v) => (redraw) => (rootElement) => {
+  const $0 = selectAll2(".text-fragment")(rootElement);
+  return () => {
+    const elems$p = $0();
+    return for_4(elems$p)((elem2) => {
+      const $1 = datum2(elem2);
+      return () => {
+        const v1 = $1();
+        const $2 = getText(v)(v1.i);
+        const $3 = styles(elem2)(fromFoldable10([
+          $Tuple("border-bottom", isTransient($2._2) ? "1px solid blue" : "none"),
+          $Tuple(
+            "background",
+            (() => {
+              if (isPrimary($2._2) && isPersistent($2._2)) {
+                return "#93E9BE";
+              }
+              if (isSecondary($2._2) && isPersistent($2._2)) {
+                return "rgb(226, 226, 226)";
+              }
+              return "white";
+            })()
+          ),
+          $Tuple(
+            "color",
+            (() => {
+              if (isPrimary($2._2) && isTransient($2._2)) {
+                return "blue";
+              }
+              if (isSecondary($2._2) && isTransient($2._2)) {
+                return "royalblue";
+              }
+              return "black";
+            })()
+          )
+        ]))();
+        return for_2(["mousedown", "mouseenter", "mouseleave"])((ev) => on(ev)(redraw)($3))();
+      };
+    })();
+  };
+};
+var createRootElement2 = (v) => (div) => (childId) => {
+  const $0 = createChild(div)(showElementType.show(Text2))(fromFoldable10([
+    classes(["paragraph"]),
+    $Tuple("id", childId)
+  ]));
+  return () => {
+    const rootElement = $0();
+    forWithIndex_2(v)((i) => (elem2) => {
+      const $1 = createChild(rootElement)(showElementType.show(Text2))(fromFoldable10([
+        classes(["text-fragment"]),
+        $Tuple("id", childId)
+      ]));
+      return () => {
+        const elem$p = $1();
+        const $2 = setText((() => {
+          if (elem2.tag === "TextFragment") {
+            return elem2._1._1;
+          }
+          if (elem2.tag === "Link") {
+            return elem2._2._1;
+          }
+          fail();
+        })())(elem$p)();
+        return setDatum({ i })($2)();
+      };
+    })();
+    return rootElement;
+  };
+};
+var drawable2ParagraphSelStat = { createRootElement: createRootElement2, setSelState: setSelState4 };
+var drawableParagraphSelState = {
+  draw: (rSpec) => (figVal) => (v) => (redraw) => {
+    const $0 = selListener(figVal)(redraw)((v1) => selTextFragment({ i: v1.i }));
+    return () => {
+      const $1 = $0();
+      return draw$p(drawable2ParagraphSelStat)(uiHelpers)(rSpec)($1)();
+    };
+  }
+};
+
 // output-es/App.View.ScatterPlot/foreign.js
 function setSelState5({ point_attrs }, {
   selState: selState2,
   selClasses: selClasses2,
   selClassesFor: selClassesFor2,
-  join: join3
+  join: join4
 }, rootElement, chart, listener) {
   const { points } = chart;
   rootElement.selectAll(".scatterplot-point").each(function(point2) {
-    const sel = join3(selState2(points[point2.i].x))(selState2(points[point2.i].y));
+    const sel = join4(selState2(points[point2.i].x))(selState2(points[point2.i].y));
     select_default2(this).classed(selClasses2, false).classed(selClassesFor2(sel), true).attrs(point_attrs(chart)(point2)).on("mousedown", (e) => {
       listener(e);
     }).on("mouseenter", (e) => {
@@ -37193,7 +37336,21 @@ function drawScatterPlot_(scatterPlotHelpers2, uiHelpers2, {
 var drawScatterPlot = (x1) => (x2) => (x3) => (x4) => drawScatterPlot_(x1, x2, x3, x4);
 
 // output-es/App.View.ScatterPlot/index.js
-var join2 = /* @__PURE__ */ (() => joinSemilatticeSelState(joinSemilattice\u{1D54A}).join)();
+var join3 = (v) => (v1) => {
+  if (v1.tag === "Inert") {
+    return v;
+  }
+  if (v.tag === "Inert") {
+    return v1;
+  }
+  if (v.tag === "Reactive" && v1.tag === "Reactive") {
+    return $SelState(
+      "Reactive",
+      { persistent: joinSemilattice\u{1D54A}.join(v._1.persistent)(v1._1.persistent), transient: joinSemilattice\u{1D54A}.join(v._1.transient)(v1._1.transient) }
+    );
+  }
+  fail();
+};
 var fromFoldable17 = /* @__PURE__ */ fromFoldable(foldableArray);
 var reflectDictSelState\u{1D54A}$x215ValS5 = {
   from: () => (r) => ({
@@ -37208,7 +37365,7 @@ var reflectDictSelState\u{1D54A}$x215ValS5 = {
 var scatterPlotHelpers = {
   point_attrs: (v) => (v1) => {
     const v2 = definitely("index within bounds")(index(v.points)(v1.i));
-    const sel = join2(v2.x._2)(v2.y._2);
+    const sel = join3(v2.x._2)(v2.y._2);
     return fromFoldable17([
       $Tuple(
         "r",
@@ -37531,7 +37688,7 @@ var arrayDictToArray2 = (x2) => arrayMap((a) => arrayMap((a$1) => $$get2(showStr
 var pack = (x2) => (k) => k(drawableBarChart)(x2);
 var pack1 = (x2) => (k) => k(drawableLineChart)(x2);
 var pack2 = (x2) => (k) => k(drawableScatterPlot)(x2);
-var pack3 = (x2) => (k) => k(drawableLinkedText)(x2);
+var pack3 = (x2) => (k) => k(drawableParagraphSelState)(x2);
 var pack4 = (x2) => (k) => k(drawableMultiView)(x2);
 var identity28 = (x2) => x2;
 var pack5 = (x2) => (k) => k(drawableTableView)(x2);
@@ -37548,8 +37705,8 @@ var view = () => (v) => (v1) => (v2) => {
       if (v1._2._1 === "ScatterPlot") {
         return pack2(dict(reflectDictSelState\u{1D54A}$x215ValS5.from())(v1._2._2._1));
       }
-      if (v1._2._1 === "LinkedText") {
-        return pack3(reflectValSelState\u{1D54A}Linked.from()(v1._2._2._1));
+      if (v1._2._1 === "Paragraph") {
+        return pack3(reflectValSelState\u{1D54A}Paragr.from()(v1._2._2._1));
       }
       if (v1._2._1 === "MultiView") {
         const vws = _fmapObject(
@@ -42772,7 +42929,7 @@ var matrixUpdate = /* @__PURE__ */ $Tuple(
     },
     op_bwd: (dictAnn) => {
       const BoundedJoinSemilattice0 = dictAnn.BoundedLattice1().BoundedJoinSemilattice0();
-      const bot = BoundedJoinSemilattice0.bot;
+      const bot2 = BoundedJoinSemilattice0.bot;
       return (v) => {
         if (v._2._2.tag === "Matrix") {
           return $List(
@@ -42791,14 +42948,14 @@ var matrixUpdate = /* @__PURE__ */ $Tuple(
             $List(
               "Cons",
               $Val(
-                bot,
+                bot2,
                 $BaseVal(
                   "Constr",
                   "Pair",
                   $List(
                     "Cons",
-                    $Val(bot, $BaseVal("Int", v._1._1._1)),
-                    $List("Cons", $Val(bot, $BaseVal("Int", v._1._1._2)), Nil)
+                    $Val(bot2, $BaseVal("Int", v._1._1._1)),
+                    $List("Cons", $Val(bot2, $BaseVal("Int", v._1._1._2)), Nil)
                   )
                 )
               ),
@@ -42841,13 +42998,13 @@ var matrixLookup = /* @__PURE__ */ $Tuple(
     },
     op_bwd: (dictAnn) => {
       const BoundedJoinSemilattice0 = dictAnn.BoundedLattice1().BoundedJoinSemilattice0();
-      const bot = BoundedJoinSemilattice0.bot;
+      const bot2 = BoundedJoinSemilattice0.bot;
       return (v) => {
         const $0 = v._2;
         return $List(
           "Cons",
           $Val(
-            bot,
+            bot2,
             $BaseVal(
               "Matrix",
               matrixPut(v._1._2._1)(v._1._2._2)((v$1) => $0)(functorMatrixRep.map((() => {
@@ -42859,14 +43016,14 @@ var matrixLookup = /* @__PURE__ */ $Tuple(
           $List(
             "Cons",
             $Val(
-              bot,
+              bot2,
               $BaseVal(
                 "Constr",
                 "Pair",
                 $List(
                   "Cons",
-                  $Val(bot, $BaseVal("Int", v._1._2._1)),
-                  $List("Cons", $Val(bot, $BaseVal("Int", v._1._2._2)), Nil)
+                  $Val(bot2, $BaseVal("Int", v._1._2._1)),
+                  $List("Cons", $Val(bot2, $BaseVal("Int", v._1._2._2)), Nil)
                 )
               )
             ),
@@ -42891,8 +43048,8 @@ var lessThan = /* @__PURE__ */ union5(asBooleanBoolean)(asBooleanBoolean)(asIntN
 var greaterThanEquals = /* @__PURE__ */ union5(asBooleanBoolean)(asBooleanBoolean)(asIntNumberOrString)(asIntNumberOrString)((a1) => (a2) => a1 >= a2)(/* @__PURE__ */ union5(asBooleanBoolean)(asBooleanBoolean)(asNumberString)(asNumberString)((a1) => (a2) => a1 >= a2)((a1) => (a2) => a1 >= a2));
 var greaterThan = /* @__PURE__ */ union5(asBooleanBoolean)(asBooleanBoolean)(asIntNumberOrString)(asIntNumberOrString)((a1) => (a2) => a1 > a2)(/* @__PURE__ */ union5(asBooleanBoolean)(asBooleanBoolean)(asNumberString)(asNumberString)((a1) => (a2) => a1 > a2)((a1) => (a2) => a1 > a2));
 var extern = (dictBoundedJoinSemilattice) => {
-  const bot = dictBoundedJoinSemilattice.bot;
-  return (v) => $Tuple(v._1, $Val(bot, $BaseVal("Fun", $Fun("Foreign", $Tuple(v._1, v._2), Nil))));
+  const bot2 = dictBoundedJoinSemilattice.bot;
+  return (v) => $Tuple(v._1, $Val(bot2, $BaseVal("Fun", $Fun("Foreign", $Tuple(v._1, v._2), Nil))));
 };
 var extern1 = /* @__PURE__ */ extern(boundedJoinSemilatticeUni);
 var error_ = /* @__PURE__ */ $Tuple(
@@ -43217,21 +43374,21 @@ var dict_get = /* @__PURE__ */ $Tuple(
       };
     },
     op_bwd: (dictAnn) => {
-      const bot = dictAnn.BoundedLattice1().BoundedJoinSemilattice0().bot;
+      const bot2 = dictAnn.BoundedLattice1().BoundedJoinSemilattice0().bot;
       return (v) => {
         const $0 = v._1;
         return $List(
           "Cons",
-          $Val(bot, $BaseVal("Str", $0)),
+          $Val(bot2, $BaseVal("Str", $0)),
           $List(
             "Cons",
             $Val(
-              bot,
+              bot2,
               $BaseVal(
                 "Dictionary",
                 (() => {
                   const $1 = {};
-                  $1[$0] = $Tuple(bot, v._2);
+                  $1[$0] = $Tuple(bot2, v._2);
                   return $1;
                 })()
               )
@@ -43292,7 +43449,7 @@ var dict_foldl = /* @__PURE__ */ $Tuple(
     op_bwd: (dictAnn) => {
       const apply2Bwd2 = apply2Bwd(dictAnn);
       const BoundedJoinSemilattice0 = dictAnn.BoundedLattice1().BoundedJoinSemilattice0();
-      const bot = BoundedJoinSemilattice0.bot;
+      const bot2 = BoundedJoinSemilattice0.bot;
       return (v) => {
         const go = (go$a0$copy) => (go$a1$copy) => {
           let go$a0 = go$a0$copy, go$a1 = go$a1$copy, go$c = true, go$r;
@@ -43312,7 +43469,7 @@ var dict_foldl = /* @__PURE__ */ $Tuple(
                   $Tuple(
                     v5._2._1,
                     mutate(($1) => () => {
-                      $1[$0] = $Tuple(bot, v5._2._2);
+                      $1[$0] = $Tuple(bot2, v5._2._2);
                       return $1;
                     })(b._2._2)
                   )
@@ -43335,7 +43492,7 @@ var dict_foldl = /* @__PURE__ */ $Tuple(
         return $List(
           "Cons",
           v2._1,
-          $List("Cons", v2._2._1, $List("Cons", $Val(bot, $BaseVal("Dictionary", v2._2._2)), Nil))
+          $List("Cons", v2._2._1, $List("Cons", $Val(bot2, $BaseVal("Dictionary", v2._2._2)), Nil))
         );
       };
     }
@@ -43822,9 +43979,22 @@ var dual = (v) => ({
   bwd: (x2) => functorEnvExpr.map(boolNot)(v.fwd(_fmapObject(x2, functorVal.map(boolNot))))
 });
 var neg12 = { neg: (x2) => functorSelState.map(boolNot)(x2) };
-var joinSemilatticeSelState2 = /* @__PURE__ */ joinSemilatticeSelState(joinSemilatticeBoolean);
-var meet = /* @__PURE__ */ (() => {
-  const $0 = joinSemilatticeVal(joinSemilatticeSelState2);
+var joinSemilatticeSelState = {
+  join: (v) => (v1) => {
+    if (v1.tag === "Inert") {
+      return v;
+    }
+    if (v.tag === "Inert") {
+      return v1;
+    }
+    if (v.tag === "Reactive" && v1.tag === "Reactive") {
+      return $SelState("Reactive", { persistent: v._1.persistent || v1._1.persistent, transient: v._1.transient || v1._1.transient });
+    }
+    fail();
+  }
+};
+var meet2 = /* @__PURE__ */ (() => {
+  const $0 = joinSemilatticeVal(joinSemilatticeSelState);
   return {
     fwd: (x2) => {
       const $1 = $0.join($Val(functorSelState.map(boolNot)(x2._1._1), functorBaseVal.map(neg12.neg)(x2._1._2)))($Val(
@@ -43845,7 +44015,7 @@ var meet = /* @__PURE__ */ (() => {
 })();
 var meet1 = {
   fwd: (x2) => _fmapObject(
-    unionWith(joinSemilatticeVal(joinSemilatticeSelState2).join)(_fmapObject(x2._1, functorVal.map(neg12.neg)))(_fmapObject(
+    unionWith(joinSemilatticeVal(joinSemilatticeSelState).join)(_fmapObject(x2._1, functorVal.map(neg12.neg)))(_fmapObject(
       x2._2,
       functorVal.map(neg12.neg)
     )),
@@ -44032,9 +44202,9 @@ var loadFig = (v) => (dictMonadAff) => {
             const $11 = lift1(\u03B3Inert)(vInert)(gc);
             const $12 = lift3(vInert)(\u03B3Inert)(gc_dual);
             return {
-              fwd: (x2) => $12.fwd(meet.fwd($Tuple($11.fwd(x2._1), categoryGaloisConnection.identity.fwd(x2._2)))),
+              fwd: (x2) => $12.fwd(meet2.fwd($Tuple($11.fwd(x2._1), categoryGaloisConnection.identity.fwd(x2._2)))),
               bwd: (x2) => {
-                const $13 = meet.bwd($12.bwd(x2));
+                const $13 = meet2.bwd($12.bwd(x2));
                 return $Tuple($11.bwd($13._1), categoryGaloisConnection.identity.bwd($13._2));
               }
             };