Link sagecells from different `makeSagecell` calls

siefkenj commented 2 years ago

Fixes #546

This PR builds off of #550

It adds a linkKey: string attribute to the parameters of makeSagecell. All cells created with the same linkKey share a kernel. This option requires that linked: true is set (though it would be easy to automatically set linked: true if someone specifies a linkKey. I have no idea why someone wouldn't want that...).

An example is below. The divs .link1 and .link2 are linked to one kernel and the divs .link3 and .link4 are linked to a different kernel. They can all be linked to the same kernel by modifying linkKey.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>SageMathCell</title>
    <script src="./main_build.js"></script>
    <script>
    // Make the div with id 'mycell' a Sage cell
    sagecell.makeSagecell({inputLocation:  '#mycell',
                           template:       sagecell.templates.minimal,
                           evalButtonText: 'Activate'});
    // Make *any* div with class 'compute' a Sage cell
    sagecell.makeSagecell({inputLocation: 'div.compute',
                           evalButtonText: 'Evaluate'});
    sagecell.makeSagecell({inputLocation: '.link1, .link2',
                           linked: true,
                           linkKey: "Y",
                           evalButtonText: 'Evaluate'});
    sagecell.makeSagecell({inputLocation: '.link3',
                           linked: true,
                           linkKey: "X",
                           evalButtonText: 'Evaluate'});
    sagecell.makeSagecell({inputLocation: '.link4',
                           linked: true,
                           linkKey: "X",
                           evalButtonText: 'Evaluate'});
    </script>
    <link property="sagecell-root" href="https://sagecell.sagemath.org" />
  </head>
  <body>
  <h1>Embedded Sage Cells</h1>

  <h2>Factorial</h2>
  Click the &ldquo;Activate&rdquo; button below to calculate factorials.
    <div id="mycell"><script type="text/x-sage">
@interact
def _(a=(1, 10)):
    print(factorial(a))
 </script>
</div>

<h2>Your own computations</h2>
Type your own Sage computation below and click &ldquo;Evaluate&rdquo;.
    <div class="compute"><script type="text/x-sage">plot(sin(x), (x, 0, 2*pi))</script></div>
    <div class="compute"><script type="text/x-sage">
@interact
def f(n=(0,10)):
    print(2^n)
</script></div>

  <div class="link1"><script type="text/x-sage">a=4
a
  </script></div>
  <div class="link2"><script type="text/x-sage">a
  </script></div>
  <div class="link3"><script type="text/x-sage">b=4
b
  </script></div>
  <div class="link4"><script type="text/x-sage">b
  </script></div>
  </body>
</html>

novoselt commented 2 years ago

This option requires that linked: true is set (though it would be easy to automatically set linked: true if someone specifies a linkKey. I have no idea why someone wouldn't want that...).

I am strongly in favour of adopting sensible behaviour right away - since it makes no sense to specify a kernel identifier and not link the cells, let's force linking if the key is given!

novoselt commented 2 years ago

Thinking about it further - it seems that we have two parameters for the same thing. Perhaps existing linked can take other values than just boolean and serve as a key? Or will it break the logic of current linked groups? I've actually never used them myself sticking to big interacts in a single cell.

siefkenj commented 2 years ago

I could extend linked to accept a string, but I think linkKey is more descriptive.

sagemath / sagecell

Link sagecells from different `makeSagecell` calls #551