Add contour plot of the full covariance matrix

package.json

@@ -12,28 +12,32 @@
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-typescript": "^8.0.0",
-    "@tsconfig/svelte": "^1.0.13",
+    "@tsconfig/svelte": "^2.0.1",
     "@types/d3-array": "^2.12.1",
+    "@types/d3-contour": "^2.0.0",
+    "@types/d3-geo": "^2.0.0",
     "@types/d3-random": "^2.2.0",
     "@types/d3-scale": "^3.3.0",
     "@types/d3-scale-chromatic": "^2.0.0",
     "@types/katex": "^0.11.0",
     "d3-array": "latest",
-    "d3-random": "^2.2.2",
+    "d3-contour": "^3.0.1",
+    "d3-geo": "^3.0.1",
+    "d3-random": "^3.0.1",
     "d3-scale": "latest",
     "d3-scale-chromatic": "^3.0.0",
     "katex": "^0.13.11",
     "ml-matrix": "latest",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.1",
     "prettier-plugin-svelte": "^2.3.0",
-    "rollup": "^2.50.4",
+    "rollup": "^2.51.1",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.38.2",
-    "svelte-check": "^2.0.0",
-    "svelte-collapsible": "^0.0.9",
+    "svelte-check": "^2.1.0",
+    "svelte-collapsible": "^0.1.1",
     "svelte-preprocess": "^4.7.3",
     "tslib": "^2.0.0",
     "typescript": "^4.3.2"

src/App.svelte

@@ -31,6 +31,7 @@ Future thoughts:
   import PlotMarginals from "./PlotMarginals.svelte";
   import PlotKernelSlices from "./PlotKernelSlices.svelte";
   import PlotBivariateCovariance from "./PlotBivariateCovariance.svelte";
+  import PlotCovarianceFunction from "./PlotCovarianceFunction.svelte";
   import RandomSample from "./RandomSample.svelte";
   import Animation from "./Animation.svelte";
   import ConfigModel from "./ConfigModel.svelte";
@@ -63,6 +64,7 @@ Future thoughts:
     confidence: true,
     samples: true,
     marginals: true,
+    fullcov: false,
     withNoise: false,
   };
 
@@ -121,6 +123,8 @@ Future thoughts:
   $: covProps = covEllipse(covY1Y2);
 
   let points = [];
+
+  let widthPlotMarginals: number;
 </script>
 
 <div>
@@ -170,7 +174,7 @@ Future thoughts:
         observations on which to condition the Gaussian process by
         <strong>clicking</strong>
         anywhere in the plot; these observations are drawn as black circles &#9899;.
-        To remove an observation, click on it again.
+        To remove an observation again, click on it.
         <small
           ><em>Note:</em> Two observations too close to each other can lead to numerical
           issues and long compute times. If the app seems to hang, reload the page
@@ -228,7 +232,11 @@ Future thoughts:
       <div class="chart" style="grid-area: bicovmatrix;">
         <ShowBivariateCovarianceMatrix {atX1} {atX2} />
       </div>
-      <div class="chart" style="grid-area: marginals;">
+      <div
+        class="chart"
+        style="grid-area: marginals;"
+        bind:clientWidth={widthPlotMarginals}
+      >
         <PlotMarginals
           {xs}
           {means}
@@ -245,6 +253,20 @@ Future thoughts:
         <PlotBivariateCovariance {atX1} {atX2} {covProps} {plotProps} />
       </div>
     </div>
+    <label
+      ><input type="checkbox" bind:checked={plotProps.fullcov} />Visualize full
+      covariance function <Katex
+        math={"\\operatorname{cov}(f(x),f(x'))"}
+      /></label
+    >
+    {#if plotProps.fullcov}
+      <div
+        class="fullcovchart"
+        style="width: {widthPlotMarginals}px; height: {widthPlotMarginals}px;"
+      >
+        <PlotCovarianceFunction {covMat} />
+      </div>
+    {/if}
   </div>
 
   <CollapsibleCard open={true}>
@@ -333,6 +355,9 @@ Future thoughts:
     min-width: 200px;
     /* background-color: #fafafa; */
   }
+  .fullcovchart {
+    background-color: #fafafa; /* TODO */
+  }
   .squarechart {
     width: 350px;
     height: 350px;