diff --git a/webapp/cypress/component/MetadataViewerTest.cy.jsx b/webapp/cypress/component/MetadataViewerTest.cy.jsx
new file mode 100644
index 000000000..a63af09e0
--- /dev/null
+++ b/webapp/cypress/component/MetadataViewerTest.cy.jsx
@@ -0,0 +1,46 @@
+import MetadataViewer from "@/components/MetadataViewer.vue";
+
+describe("MetadataViewer", () => {
+  const computedData = {
+    n_peaks: 3,
+    avast_metrics: {
+      field_one: 0.6687006950378418,
+      first_charge_capacity_mAh: 126.34762603468491,
+      discharge_capacity_c3_mAh: null,
+    },
+  };
+
+  it("renders nested computed results as titled sections, omitting null fields", () => {
+    cy.mount(MetadataViewer, { props: { computedData } });
+
+    cy.contains(".metadata-title", "Computed").should("be.visible");
+    cy.contains(".metadata-title", "Metadata").should("not.exist");
+
+    cy.contains("dt", "N peaks").next("dd").should("have.text", "3");
+
+    cy.contains(".computed-section-title", "Avast metrics").should("be.visible");
+    cy.contains("dt", "Field one").next("dd").should("have.text", "0.6687");
+    cy.contains("dt", "First charge capacity mAh").next("dd").should("have.text", "126.35");
+    cy.contains("dt", "Discharge capacity c3 mAh").should("not.exist");
+  });
+
+  it("copies the full-precision computed results as JSON", () => {
+    cy.mount(MetadataViewer, { props: { computedData } });
+    cy.window().then((win) => {
+      cy.stub(win.navigator.clipboard, "writeText").as("writeText").resolves();
+    });
+
+    cy.get("[aria-label='Copy computed data as JSON']").click();
+    cy.get("@writeText").should("have.been.calledOnceWith", JSON.stringify(computedData, null, 2));
+  });
+
+  it("shows computed and metadata sections side by side", () => {
+    cy.mount(MetadataViewer, {
+      props: { computedData, metadata: { instrument: "BioLogic" } },
+    });
+
+    cy.contains(".metadata-title", "Computed").should("be.visible");
+    cy.contains(".metadata-title", "Metadata").should("be.visible");
+    cy.contains("dt", "Instrument").next("dd").should("have.text", "BioLogic");
+  });
+});
diff --git a/webapp/src/components/MetadataViewer.vue b/webapp/src/components/MetadataViewer.vue
index fe8f7f877..50673675c 100644
--- a/webapp/src/components/MetadataViewer.vue
+++ b/webapp/src/components/MetadataViewer.vue
@@ -1,19 +1,51 @@
 <template>
-  <div v-if="hasMetadata" class="metadata-viewer">
-    <div class="metadata-header">
+  <div v-if="hasComputed || hasMetadata" class="metadata-viewer">
+    <div v-if="hasComputed" class="metadata-header">
+      <span class="metadata-title">Computed</span>
+      <button
+        type="button"
+        class="btn btn-sm btn-outline-secondary copy-button"
+        :aria-label="copiedComputed ? 'Computed copied' : 'Copy computed data as JSON'"
+        @click="copyAsJson(displayedComputed, 'copiedComputed')"
+      >
+        <font-awesome-icon :icon="copiedComputed ? 'check' : 'copy'" fixed-width />
+        {{ copiedComputed ? "Copied" : "Copy JSON" }}
+      </button>
+    </div>
+
+    <div v-if="hasComputed" class="metadata-list computed-list">
+      <template v-for="section in computedSections" :key="section.key">
+        <div v-if="section.title" class="computed-section-title" :title="section.key">
+          {{ section.title }}
+        </div>
+        <dl class="mb-0">
+          <template v-for="(value, key) in section.fields" :key="key">
+            <dt :title="String(key)">{{ formatLabel(key) }}</dt>
+            <dd>
+              <details v-if="isExpandable(value)" class="value-details">
+                <summary>{{ summaryFor(value) }}</summary>
+                <pre class="value-json">{{ prettyPrint(value) }}</pre>
+              </details>
+              <span v-else class="value">{{ formatComputedValue(value) }}</span>
+            </dd>
+          </template>
+        </dl>
+      </template>
+    </div>
+    <div v-if="hasMetadata" class="metadata-header">
       <span class="metadata-title">Metadata</span>
       <button
         type="button"
         class="btn btn-sm btn-outline-secondary copy-button"
-        :aria-label="copied ? 'Metadata copied' : 'Copy metadata as JSON'"
-        @click="copyAsJson"
+        :aria-label="copiedMetadata ? 'Metadata copied' : 'Copy metadata as JSON'"
+        @click="copyAsJson(displayedMetadata, 'copiedMetadata')"
       >
-        <font-awesome-icon :icon="copied ? 'check' : 'copy'" fixed-width />
-        {{ copied ? "Copied" : "Copy JSON" }}
+        <font-awesome-icon :icon="copiedMetadata ? 'check' : 'copy'" fixed-width />
+        {{ copiedMetadata ? "Copied" : "Copy JSON" }}
       </button>
     </div>
 
-    <dl class="metadata-list">
+    <dl v-if="hasMetadata" class="metadata-list">
       <template v-for="(value, key) in displayedMetadata" :key="key">
         <dt :title="String(key)">{{ formatLabel(key) }}</dt>
         <dd>
@@ -39,6 +71,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    computedData: {
+      type: Object,
+      default: () => ({}),
+    },
     labels: {
       type: Object,
       default: () => ({}),
@@ -50,44 +86,78 @@ export default {
   },
   data() {
     return {
-      copied: false,
+      copiedMetadata: false,
+      copiedComputed: false,
       copyResetTimeout: null,
     };
   },
   computed: {
     displayedMetadata() {
-      if (!this.metadata) return {};
-
-      const filtered = {};
-      for (const [key, value] of Object.entries(this.metadata)) {
-        if (!this.excludeKeys.includes(key) && value !== null && value !== undefined) {
-          filtered[key] = value;
-        }
-      }
-      return filtered;
+      return this.filterFields(this.metadata);
+    },
+    displayedComputed() {
+      return this.filterFields(this.computedData);
     },
     hasMetadata() {
       return Object.keys(this.displayedMetadata).length > 0;
     },
+    hasComputed() {
+      return Object.keys(this.displayedComputed).length > 0;
+    },
+    /**
+     * Group computed fields for display: top-level scalars form an untitled
+     * section, and each nested object (e.g. a plugin's namespaced results such
+     * as `fast_metrics`) becomes its own titled section with its null fields
+     * omitted.
+     */
+    computedSections() {
+      const ungrouped = {};
+      const sections = [];
+      for (const [key, value] of Object.entries(this.displayedComputed)) {
+        if (this.isPlainObject(value)) {
+          const fields = this.filterFields(value);
+          if (Object.keys(fields).length > 0) {
+            sections.push({ key, title: this.formatLabel(key), fields });
+          }
+        } else {
+          ungrouped[key] = value;
+        }
+      }
+      if (Object.keys(ungrouped).length > 0) {
+        sections.unshift({ key: "__ungrouped__", title: null, fields: ungrouped });
+      }
+      return sections;
+    },
   },
   beforeUnmount() {
     clearTimeout(this.copyResetTimeout);
   },
   methods: {
+    filterFields(dct) {
+      if (!dct) return {};
+
+      const filtered = {};
+      for (const [key, value] of Object.entries(dct)) {
+        if (!this.excludeKeys.includes(key) && value !== null && value !== undefined) {
+          filtered[key] = value;
+        }
+      }
+      return filtered;
+    },
     formatLabel(key) {
       if (this.labels[key]) {
         return this.labels[key];
       }
 
-      return (
-        key
-          .replace(/_/g, " ")
-          // Split camelCase only at a lowercase/digit -> uppercase boundary, so
+      // snake_case keys are already word-separated, and may embed mixed-case
+      // units (e.g. `capacity_mAh`) that camelCase splitting would mangle.
+      const label = key.includes("_")
+        ? key.replace(/_/g, " ")
+        : // Split camelCase only at a lowercase/digit -> uppercase boundary, so
           // that unit acronyms such as `MHz` or `ppm` survive intact.
-          .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
-          .trim()
-          .replace(/^\w/, (c) => c.toUpperCase())
-      );
+          key.replace(/([a-z0-9])([A-Z])/g, "$1 $2");
+
+      return label.trim().replace(/^\w/, (c) => c.toUpperCase());
     },
     isExpandable(value) {
       if (value !== null && typeof value === "object" && !Array.isArray(value)) {
@@ -111,6 +181,19 @@ export default {
       }
       return String(value);
     },
+    isPlainObject(value) {
+      return value !== null && typeof value === "object" && !Array.isArray(value);
+    },
+    /**
+     * As `formatValue`, but rounds non-integer numbers to a readable number of
+     * significant figures (the copied JSON keeps full precision).
+     */
+    formatComputedValue(value) {
+      if (typeof value === "number" && !Number.isInteger(value)) {
+        return String(Number(value.toPrecision(5)));
+      }
+      return this.formatValue(value);
+    },
     formatValue(value) {
       if (value === null || value === undefined) {
         return "";
@@ -123,13 +206,21 @@ export default {
       }
       return String(value);
     },
-    async copyAsJson() {
+    /**
+     * Copy an object to the clipboard as pretty-printed JSON, and briefly set
+     * the given data flag so the corresponding button shows "Copied".
+     *
+     * @param {Object} dct - The object to serialise and copy.
+     * @param {string} flag - Name of the boolean data property to toggle
+     *   (e.g. `"copiedMetadata"` or `"copiedComputed"`).
+     */
+    async copyAsJson(dct, flag) {
       try {
-        await navigator.clipboard.writeText(JSON.stringify(this.displayedMetadata, null, 2));
-        this.copied = true;
+        await navigator.clipboard.writeText(JSON.stringify(dct, null, 2));
+        this[flag] = true;
         clearTimeout(this.copyResetTimeout);
         this.copyResetTimeout = setTimeout(() => {
-          this.copied = false;
+          this[flag] = false;
         }, 2000);
       } catch (error) {
         console.error("Could not copy metadata to the clipboard:", error);
@@ -182,6 +273,17 @@ export default {
   padding-right: 0.35rem;
 }
 
+.computed-list {
+  margin-bottom: 0.75rem;
+}
+
+.computed-section-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #454545;
+  margin: 0.25rem 0 0.4rem;
+}
+
 .metadata-list dt {
   font-size: 0.8rem;
   font-weight: 500;
diff --git a/webapp/src/components/datablocks/CycleBlock.vue b/webapp/src/components/datablocks/CycleBlock.vue
index 8dde12744..ca689d589 100644
--- a/webapp/src/components/datablocks/CycleBlock.vue
+++ b/webapp/src/components/datablocks/CycleBlock.vue
@@ -1,213 +1,217 @@
 <template>
   <DataBlockBase :item_id="item_id" :block_id="block_id">
-    <div class="form-row mb-2">
-      <div class="btn-group" role="group" aria-label="File selection mode">
-        <button
-          type="button"
-          class="btn btn-outline-secondary"
-          :class="{ active: mode === FILE_MODE.SINGLE }"
-          @click="mode = FILE_MODE.SINGLE"
-        >
-          Single File
-        </button>
-        <button
-          type="button"
-          class="btn btn-outline-secondary"
-          :class="{ active: mode === FILE_MODE.MULTI }"
-          @click="mode = FILE_MODE.MULTI"
-        >
-          Multi File Stitch
-        </button>
+    <template #controls>
+      <div class="form-row mb-2">
+        <div class="btn-group" role="group" aria-label="File selection mode">
+          <button
+            type="button"
+            class="btn btn-outline-secondary"
+            :class="{ active: mode === FILE_MODE.SINGLE }"
+            @click="mode = FILE_MODE.SINGLE"
+          >
+            Single File
+          </button>
+          <button
+            type="button"
+            class="btn btn-outline-secondary"
+            :class="{ active: mode === FILE_MODE.MULTI }"
+            @click="mode = FILE_MODE.MULTI"
+          >
+            Multi File Stitch
+          </button>
+        </div>
       </div>
-    </div>
-    <div class="form-row mb-2">
-      <component
-        :is="mode === FILE_MODE.MULTI ? 'FileMultiSelect' : 'FileSelectDropdown'"
-        v-model="fileModel"
+      <div class="form-row mb-2">
+        <component
+          :is="mode === FILE_MODE.MULTI ? 'FileMultiSelect' : 'FileSelectDropdown'"
+          v-model="fileModel"
+          :item_id="item_id"
+          :block_id="block_id"
+          :extensions="blockInfo.attributes.accepted_file_extensions"
+          :update-block-on-change="false"
+          @update:modelValue="onFileSelectionChange"
+        />
+      </div>
+      <CollapsibleComparisonFileSelect
+        v-model="pending_comparison_file_ids"
         :item_id="item_id"
         :block_id="block_id"
         :extensions="blockInfo.attributes.accepted_file_extensions"
-        :update-block-on-change="false"
-        @update:modelValue="onFileSelectionChange"
+        :exclude-file-ids="file_ids"
+        :initially-expanded="pending_comparison_file_ids.length > 0"
+        :show-apply-button="false"
       />
-    </div>
-    <CollapsibleComparisonFileSelect
-      v-model="pending_comparison_file_ids"
-      :item_id="item_id"
-      :block_id="block_id"
-      :extensions="blockInfo.attributes.accepted_file_extensions"
-      :exclude-file-ids="file_ids"
-      :initially-expanded="pending_comparison_file_ids.length > 0"
-      :show-apply-button="false"
-    />
-    <div class="form-row mt-2 mb-3">
-      <button
-        class="btn btn-primary btn-sm"
-        :disabled="!hasPendingChanges"
-        @click="applyAllSelections"
-      >
-        Apply Changes
-      </button>
-      <a v-if="bdf_url" :href="api_url + bdf_url" class="btn btn-secondary btn-sm ml-2" download
-        >Export CSV (BDF)</a
-      >
-    </div>
-    <div>
-      <div class="form-row">
-        <div class="input-group form-inline">
-          <label class="mr-2"><b>Cycles to plot:</b></label>
-          <input
-            id="cycles-input"
-            v-model="cyclesString"
-            type="text"
-            class="form-control"
-            placeholder="e.g., 1-5, 7, 9-10. Starts at 1."
-            :class="{ 'is-invalid': cycle_num_error }"
-            @keydown.enter="
-              parseCycleString();
-              updateBlock();
-            "
-            @blur="
-              parseCycleString();
-              updateBlock();
-            "
-          />
-          <span id="list-of-cycles" class="pl-3 pt-2">Showing cycles: {{ parsedCycles }}</span>
-          <StyledTooltip anchor-class="info-anchor" :delay="300" pinnable>
-            <template #anchor>
-              <font-awesome-icon
-                :icon="['fas', 'info-circle']"
-                class="info-icon"
-                role="button"
-                tabindex="0"
-                aria-label="Toggle description of cycle selection"
-              />
-            </template>
-            <template #content>
-              Specify which cycles to plot. Use commas to separate individual cycles and hyphens for
-              ranges. Leave empty or type 'all' to plot all cycles.
-            </template>
-          </StyledTooltip>
-        </div>
-
-        <div v-if="cycle_num_error" class="alert alert-danger mt-2 mx-auto">
-          {{ cycle_num_error }}
-        </div>
+      <div class="form-row mt-2 mb-3">
+        <button
+          class="btn btn-primary btn-sm"
+          :disabled="!hasPendingChanges"
+          @click="applyAllSelections"
+        >
+          Apply Changes
+        </button>
+        <a v-if="bdf_url" :href="api_url + bdf_url" class="btn btn-secondary btn-sm ml-2" download
+          >Export CSV (BDF)</a
+        >
       </div>
-
-      <div class="form-row mt-2">
-        <div class="input-group form-inline">
-          <label class="mr-2"><b>Mode:</b></label>
-          <div class="btn-group">
-            <div
-              class="btn btn-default"
-              :class="{ active: derivative_mode == 'final capacity' }"
-              @click="
-                derivative_mode = derivative_mode == 'final capacity' ? null : 'final capacity';
+      <div>
+        <div class="form-row">
+          <div class="input-group form-inline">
+            <label class="mr-2"><b>Cycles to plot:</b></label>
+            <input
+              id="cycles-input"
+              v-model="cyclesString"
+              type="text"
+              class="form-control"
+              placeholder="e.g., 1-5, 7, 9-10. Starts at 1."
+              :class="{ 'is-invalid': cycle_num_error }"
+              @keydown.enter="
+                parseCycleString();
                 updateBlock();
               "
-            >
-              Cycle Summary
-            </div>
-            <div
-              class="btn btn-default"
-              :class="{ active: derivative_mode == 'dQ/dV' }"
-              @click="
-                derivative_mode = derivative_mode == 'dQ/dV' ? null : 'dQ/dV';
+              @blur="
+                parseCycleString();
                 updateBlock();
               "
-            >
-              d<i>Q</i>/d<i>V</i>
-            </div>
-            <div
-              class="btn btn-default"
-              :class="{ active: derivative_mode == 'dV/dQ' }"
-              @click="
-                derivative_mode = derivative_mode == 'dV/dQ' ? null : 'dV/dQ';
-                updateBlock();
-              "
-            >
-              d<i>V</i>/d<i>Q</i>
-            </div>
+            />
+            <span id="list-of-cycles" class="pl-3 pt-2">Showing cycles: {{ parsedCycles }}</span>
+            <StyledTooltip anchor-class="info-anchor" :delay="300" pinnable>
+              <template #anchor>
+                <font-awesome-icon
+                  :icon="['fas', 'info-circle']"
+                  class="info-icon"
+                  role="button"
+                  tabindex="0"
+                  aria-label="Toggle description of cycle selection"
+                />
+              </template>
+              <template #content>
+                Specify which cycles to plot. Use commas to separate individual cycles and hyphens
+                for ranges. Leave empty or type 'all' to plot all cycles.
+              </template>
+            </StyledTooltip>
           </div>
-        </div>
-      </div>
 
-      <div
-        v-if="derivative_mode == 'dQ/dV' || derivative_mode == 'dV/dQ'"
-        v-show="derivative_mode"
-        class="row"
-      >
-        <div class="col-md slider" style="max-width: 250px">
-          <input
-            id="s_spline"
-            v-model="s_spline"
-            type="range"
-            class="form-control-range"
-            name="s_spline"
-            min="1"
-            max="10"
-            step="0.2"
-            @change="isReplotButtonDisplayed = true"
-          />
-          <label for="s_spline"> <span>Spline fit:</span> {{ -s_spline }} </label>
-          <StyledTooltip anchor-class="info-anchor" :delay="300" pinnable>
-            <template #anchor>
-              <font-awesome-icon
-                :icon="['fas', 'info-circle']"
-                class="info-icon"
-                role="button"
-                tabindex="0"
-                aria-label="Toggle description of spline fit"
-              />
-            </template>
-            <template #content>
-              Smoothing parameter that determines how close the spline fits to the real data. Larger
-              values result in a smoother fit with decreased detail.
-            </template>
-          </StyledTooltip>
+          <div v-if="cycle_num_error" class="alert alert-danger mt-2 mx-auto">
+            {{ cycle_num_error }}
+          </div>
         </div>
-        <div class="col-md slider" style="max-width: 250px">
-          <input
-            id="win_size_1"
-            v-model="win_size_1"
-            type="range"
-            class="form-control-range"
-            name="win_size_1"
-            min="501"
-            max="1501"
-            @change="isReplotButtonDisplayed = true"
-          />
-          <label for="win_size_1"> <span>Window Size 1:</span> {{ win_size_1 }} </label>
-          <StyledTooltip anchor-class="info-anchor" :delay="300" pinnable>
-            <template #anchor>
-              <font-awesome-icon
-                :icon="['fas', 'info-circle']"
-                class="info-icon"
-                role="button"
-                tabindex="0"
-                aria-label="Toggle description of window size"
-              />
-            </template>
-            <template #content>
-              Window size for the Savitzky-Golay filter to apply to the derivatives.
-            </template>
-          </StyledTooltip>
+
+        <div class="form-row mt-2">
+          <div class="input-group form-inline">
+            <label class="mr-2"><b>Mode:</b></label>
+            <div class="btn-group">
+              <div
+                class="btn btn-default"
+                :class="{ active: derivative_mode == 'final capacity' }"
+                @click="
+                  derivative_mode = derivative_mode == 'final capacity' ? null : 'final capacity';
+                  updateBlock();
+                "
+              >
+                Cycle Summary
+              </div>
+              <div
+                class="btn btn-default"
+                :class="{ active: derivative_mode == 'dQ/dV' }"
+                @click="
+                  derivative_mode = derivative_mode == 'dQ/dV' ? null : 'dQ/dV';
+                  updateBlock();
+                "
+              >
+                d<i>Q</i>/d<i>V</i>
+              </div>
+              <div
+                class="btn btn-default"
+                :class="{ active: derivative_mode == 'dV/dQ' }"
+                @click="
+                  derivative_mode = derivative_mode == 'dV/dQ' ? null : 'dV/dQ';
+                  updateBlock();
+                "
+              >
+                d<i>V</i>/d<i>Q</i>
+              </div>
+            </div>
+          </div>
         </div>
-        <button v-show="isReplotButtonDisplayed" class="btn btn-default my-4" @click="updateBlock">
-          Recalculate
-        </button>
-      </div>
 
-      <div class="row mt-2">
         <div
-          class="col mx-auto"
-          :class="{ 'limited-width': bokehPlotLimitedWidth, blurry: isUpdating }"
+          v-if="derivative_mode == 'dQ/dV' || derivative_mode == 'dV/dQ'"
+          v-show="derivative_mode"
+          class="row"
         >
-          <BokehPlot v-if="bokehPlotData" :bokeh-plot-data="bokehPlotData" />
+          <div class="col-md slider" style="max-width: 250px">
+            <input
+              id="s_spline"
+              v-model="s_spline"
+              type="range"
+              class="form-control-range"
+              name="s_spline"
+              min="1"
+              max="10"
+              step="0.2"
+              @change="isReplotButtonDisplayed = true"
+            />
+            <label for="s_spline"> <span>Spline fit:</span> {{ -s_spline }} </label>
+            <StyledTooltip anchor-class="info-anchor" :delay="300" pinnable>
+              <template #anchor>
+                <font-awesome-icon
+                  :icon="['fas', 'info-circle']"
+                  class="info-icon"
+                  role="button"
+                  tabindex="0"
+                  aria-label="Toggle description of spline fit"
+                />
+              </template>
+              <template #content>
+                Smoothing parameter that determines how close the spline fits to the real data.
+                Larger values result in a smoother fit with decreased detail.
+              </template>
+            </StyledTooltip>
+          </div>
+          <div class="col-md slider" style="max-width: 250px">
+            <input
+              id="win_size_1"
+              v-model="win_size_1"
+              type="range"
+              class="form-control-range"
+              name="win_size_1"
+              min="501"
+              max="1501"
+              @change="isReplotButtonDisplayed = true"
+            />
+            <label for="win_size_1"> <span>Window Size 1:</span> {{ win_size_1 }} </label>
+            <StyledTooltip anchor-class="info-anchor" :delay="300" pinnable>
+              <template #anchor>
+                <font-awesome-icon
+                  :icon="['fas', 'info-circle']"
+                  class="info-icon"
+                  role="button"
+                  tabindex="0"
+                  aria-label="Toggle description of window size"
+                />
+              </template>
+              <template #content>
+                Window size for the Savitzky-Golay filter to apply to the derivatives.
+              </template>
+            </StyledTooltip>
+          </div>
+          <button
+            v-show="isReplotButtonDisplayed"
+            class="btn btn-default my-4"
+            @click="updateBlock"
+          >
+            Recalculate
+          </button>
         </div>
       </div>
-    </div>
+    </template>
+
+    <!-- Rendered in the plot slot so that any metadata/computed results sit alongside it -->
+    <template #plot>
+      <div :class="{ 'limited-width': bokehPlotLimitedWidth, blurry: isUpdating }">
+        <BokehPlot v-if="bokehPlotData" :bokeh-plot-data="bokehPlotData" />
+      </div>
+    </template>
   </DataBlockBase>
 </template>
 
diff --git a/webapp/src/components/datablocks/DataBlockBase.vue b/webapp/src/components/datablocks/DataBlockBase.vue
index 009eb8c95..fb50f9896 100644
--- a/webapp/src/components/datablocks/DataBlockBase.vue
+++ b/webapp/src/components/datablocks/DataBlockBase.vue
@@ -150,7 +150,7 @@
       </div>
       <slot name="controls"></slot>
 
-      <div v-if="hasMetadata" class="mt-2 mb-2">
+      <div v-if="hasMetadata || hasComputed" class="mt-2 mb-2">
         <span
           class="metadata-toggle d-inline-flex align-items-center"
           role="button"
@@ -169,10 +169,10 @@
         </span>
       </div>
 
-      <div v-if="$slots.plot || hasMetadata" class="row mt-2">
+      <div v-if="$slots.plot || hasMetadata || hasComputed" class="row mt-2">
         <div
           :class="
-            hasMetadata && metadataShown
+            (hasMetadata || hasComputed) && metadataShown
               ? 'col-xl-8 col-lg-8 col-md-12'
               : 'col-xl-9 col-lg-10 col-md-11 mx-auto'
           "
@@ -180,9 +180,12 @@
           <slot name="plot"></slot>
         </div>
 
-        <div v-if="hasMetadata && metadataShown" class="col-xl-4 col-lg-4 col-md-12">
-          <slot name="metadata" :metadata="block.metadata">
-            <MetadataViewer :metadata="block.metadata" />
+        <div
+          v-if="(hasMetadata || hasComputed) && metadataShown"
+          class="col-xl-4 col-lg-4 col-md-12"
+        >
+          <slot name="metadata" :metadata="block.metadata" :computed-data="block.computed">
+            <MetadataViewer :metadata="block.metadata" :computed-data="block.computed" />
           </slot>
         </div>
       </div>
@@ -248,6 +251,9 @@ export default {
     hasMetadata() {
       this.notifyLayoutChange();
     },
+    hasComputed() {
+      this.notifyLayoutChange();
+    },
   },
   computed: {
     block() {
@@ -288,6 +294,9 @@ export default {
     hasMetadata() {
       return this.block?.metadata && Object.keys(this.block.metadata).length > 0;
     },
+    hasComputed() {
+      return this.block?.computed && Object.keys(this.block.computed).length > 0;
+    },
   },
   mounted() {
     // this is to help toggleExpandBlock() work properly. Resets contentMaxHeight to "none"