Add reactivity fundamental

Author: MikeJohnPage

_quarto.yml

@@ -41,7 +41,7 @@ website:
       - text: "How-To"
         href: howto/01-export-code.qmd
       - text: "Fundamentals"
-        href: fundamentals/index.qmd
+        href: fundamentals/01-reactivity.qmd
       - text: "Blocks"
         href: blocks/01-wrangling.qmd
       - text: "Demo"
@@ -62,7 +62,7 @@ website:
         - howto/02-save-and-restore.qmd
     - title: "Fundamentals"
       contents:
-        - fundamentals/index.qmd
+        - fundamentals/01-reactivity.qmd
     - title: "Blocks"
       contents:
         - blocks/01-wrangling.qmd

docs/blocks/01-wrangling.html

@@ -101,7 +101,7 @@
 <span class="menu-text">How-To</span></a>
   </li>  
   <li class="nav-item">
-    <a class="nav-link" href="../fundamentals/index.html"> 
+    <a class="nav-link" href="../fundamentals/01-reactivity.html"> 
 <span class="menu-text">Fundamentals</span></a>
   </li>  
   <li class="nav-item">

docs/blocks/02-visualisation.html

@@ -102,7 +102,7 @@
 <span class="menu-text">How-To</span></a>
   </li>  
   <li class="nav-item">
-    <a class="nav-link" href="../fundamentals/index.html"> 
+    <a class="nav-link" href="../fundamentals/01-reactivity.html"> 
 <span class="menu-text">Fundamentals</span></a>
   </li>  
   <li class="nav-item">

docs/blocks/03-io.html

@@ -101,7 +101,7 @@
 <span class="menu-text">How-To</span></a>
   </li>  
   <li class="nav-item">
-    <a class="nav-link" href="../fundamentals/index.html"> 
+    <a class="nav-link" href="../fundamentals/01-reactivity.html"> 
 <span class="menu-text">Fundamentals</span></a>
   </li>  
   <li class="nav-item">

docs/fundamentals/01-img-01.png

@@ -7,7 +7,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 
 
-<title>index – blockr</title>
+<title>reactivity – blockr</title>
 <style>
 code{white-space: pre-wrap;}
 span.smallcaps{font-variant: small-caps;}
@@ -100,7 +100,7 @@
 <span class="menu-text">How-To</span></a>
   </li>  
   <li class="nav-item">
-    <a class="nav-link active" href="../fundamentals/index.html" aria-current="page"> 
+    <a class="nav-link active" href="../fundamentals/01-reactivity.html" aria-current="page"> 
 <span class="menu-text">Fundamentals</span></a>
   </li>  
   <li class="nav-item">
@@ -137,7 +137,7 @@
       <button type="button" class="quarto-btn-toggle btn" data-bs-toggle="collapse" role="button" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
         <i class="bi bi-layout-text-sidebar-reverse"></i>
       </button>
-        <nav class="quarto-page-breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="../fundamentals/index.html">index.html</a></li></ol></nav>
+        <nav class="quarto-page-breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="../fundamentals/01-reactivity.html">Reactivity</a></li></ol></nav>
         <a class="flex-grow-1" role="navigation" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">      
         </a>
     </div>
@@ -151,26 +151,76 @@
     <ul class="list-unstyled mt-1">
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="../fundamentals/index.html" class="sidebar-item-text sidebar-link active">
- <span class="menu-text">index.html</span></a>
+  <a href="../fundamentals/01-reactivity.html" class="sidebar-item-text sidebar-link active">
+ <span class="menu-text">Reactivity</span></a>
   </div>
 </li>
     </ul>
     </div>
 </nav>
 <div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item"></div>
 <!-- margin-sidebar -->
-    <div id="quarto-margin-sidebar" class="sidebar margin-sidebar zindex-bottom">
-        
+    <div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
+        <nav id="TOC" role="doc-toc" class="toc-active">
+    <h2 id="toc-title">On this page</h2>
+   
+  <ul>
+  <li><a href="#reactivity" id="toc-reactivity" class="nav-link active" data-scroll-target="#reactivity">Reactivity</a>
+  <ul class="collapse">
+  <li><a href="#overview" id="toc-overview" class="nav-link" data-scroll-target="#overview">Overview</a></li>
+  <li><a href="#example" id="toc-example" class="nav-link" data-scroll-target="#example">Example</a></li>
+  <li><a href="#errors" id="toc-errors" class="nav-link" data-scroll-target="#errors">Errors</a></li>
+  </ul></li>
+  </ul>
+</nav>
     </div>
 <!-- main -->
 <main class="content" id="quarto-document-content"><header id="title-block-header" class="quarto-title-block"></header>
 
 
 
 
+<section id="reactivity" class="level1">
+<h1>Reactivity</h1>
+<section id="overview" class="level2">
+<h2 class="anchored" data-anchor-id="overview">Overview</h2>
+<p>blockr uses a concept called reactivity to ensure that any changes you make to a block in your workflow are automatically reflected in all downstream blocks. This means that when you update one part of your workflow, you don’t need to manually trigger updates elsewhere, everything downstream adjusts automatically. It’s the same idea that powers the interactivity you’re used to seeing in spreadsheets: if cell A1 contains a price and cell B1 calculates tax with =A1 * 0.2, changing A1 instantly updates B1. blockr works the same way, but for entire data transformation steps instead of individual cells.</p>
+<div class="callout callout-style-default callout-note callout-titled">
+<div class="callout-header d-flex align-content-center">
+<div class="callout-icon-container">
+<i class="callout-icon"></i>
+</div>
+<div class="callout-title-container flex-fill">
+Note
+</div>
+</div>
+<div class="callout-body-container callout-body">
+<p>blockr did not invent reactivity! blockr is built on the <a href="https://shiny.posit.co/">Shiny</a> framework in R, which itself borrowed the ideas of reactivity from <a href="https://www.meteor.com/">Meteor</a></p>
+</div>
+</div>
+</section>
+<section id="example" class="level2">
+<h2 class="anchored" data-anchor-id="example">Example</h2>
+<p>If you have already completed the <a href="../tutorials/02-build-a-dashboard.html">Build a dashboard</a> tutorial, you have already seen reactivity in action. In that tutorial you learnt how to build a simple dashboard which uses a filter to update a plot on penguins:</p>
+<p><img src="01-img-01.png" class="img-fluid"></p>
+<p>Let’s zoom into the workflow to better understand what is going on. Here, we can see that as one block updates, all downstream blocks update:</p>
+<p><img src="01-img-02.png" class="img-fluid"></p>
+<p>In this example, this results in only a single block updating.</p>
+<p>A downstream block is any block that depends on (directly or indirectly) the output of a given block. In other words, it comes after it in the workflow. If data flows from A → B → C, then B and C are both downstream of A. This means that for complicated workflows, a change higher up the workflow can result in many blocks being updated:</p>
+<p><img src="01-img-03.png" class="img-fluid"></p>
+<p>Note that upstream blocks never get updated. In our simple example, this means that our data block does <strong>not</strong> get updated, because it is upstream of our filter block:</p>
+<p><img src="01-img-04.png" class="img-fluid"></p>
+</section>
+<section id="errors" class="level2">
+<h2 class="anchored" data-anchor-id="errors">Errors</h2>
+<p>Sometimes updating a block can causes errors downstream.</p>
+<p>For example, again using our simple penguins dashboard, if we update the dataset block to use a dataset other than penguins, it will causes errors downstream:</p>
+<p><img src="01-img-05.png" class="img-fluid"></p>
+<p>This happens because the downstream filter and plot blocks user variables from the penguins dataset. When this dataset changes, these variables are no longer available and so the downstream blocks error to let us know they are trying to use variables that no longer exist. In this instance to fix these errors, we just need to update the variables used in the downstream blocks to those found in the new dataset.</p>
 
 
+</section>
+</section>
 
 </main> <!-- /main -->
 <script id="quarto-html-after-body" type="application/javascript">