diff --git a/public/components/notebooks/components/paragraph_components/para_output.tsx b/public/components/notebooks/components/paragraph_components/para_output.tsx
index 0d83a4efea..9927d94cce 100644
--- a/public/components/notebooks/components/paragraph_components/para_output.tsx
+++ b/public/components/notebooks/components/paragraph_components/para_output.tsx
@@ -9,8 +9,6 @@ import { Media } from '@nteract/outputs';
 import moment from 'moment';
 import React, { useState } from 'react';
 import { VisualizationContainer } from '../../../../components/custom_panels/panel_modules/visualization_container';
-import PPLService from '../../../../services/requests/ppl';
-import { CoreStart } from '../../../../../../../src/core/public';
 import {
   DashboardContainerInput,
   DashboardStart,
@@ -18,8 +16,11 @@ import {
 import { ParaType } from '../../../../../common/types/notebooks';
 import { uiSettingsService } from '../../../../../common/utils';
 import { QueryDataGridMemo } from './para_query_grid';
+import { coreRefs } from '../../../../framework/core_refs';
 
-const QueryOutput = ({ typeOut, val }: { typeOut: string; val: string }) => {
+const { http, pplService } = coreRefs;
+
+const QueryOutput = ({ typeOut, val, para }: { typeOut: string; val: string; para: ParaType }) => {
   const createQueryColumns = (jsonColumns: any[]) => {
     let index = 0;
     const datagridColumns = [];
@@ -81,86 +82,115 @@ const QueryOutput = ({ typeOut, val }: { typeOut: string; val: string }) => {
     }
   };
 
-  const OutputBody = ({ typeOut, val }: { typeOut: string; val: string }) => {
-    /* Returns a component to render paragraph outputs using the para.typeOut property
-     * Currently supports HTML, TABLE, IMG
-     * TODO: add table rendering
-     */
-    const dateFormat = uiSettingsService.get('dateFormat');
+const OutputBody = ({
+  para,
+  typeOut,
+  val,
+  visInput,
+  setVisInput,
+  DashboardContainerByValueRenderer,
+}: {
+  para: ParaType;
+  typeOut: string;
+  val: string;
+  visInput: DashboardContainerInput;
+  setVisInput: (input: DashboardContainerInput) => void;
+  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
+}) => {
+  /* Returns a component to render paragraph outputs using the para.typeOut property
+   * Currently supports HTML, TABLE, IMG
+   * TODO: add table rendering
+   */
+  const dateFormat = uiSettingsService.get('dateFormat');
 
-    if (typeOut !== undefined) {
-      switch (typeOut) {
-        case 'QUERY':
-          return <QueryOutput typeOut={typeOut} val={val} />;
-        case 'MARKDOWN':
-          return (
-            <EuiText className="wrapAll markdown-output-text">
-              <MarkdownRender source={val} />
+  if (typeOut !== undefined) {
+    switch (typeOut) {
+      case 'QUERY':
+        return <QueryOutput para={para} typeOut={typeOut} val={val} />;
+      case 'MARKDOWN':
+        return (
+          <EuiText className="wrapAll markdown-output-text">
+            <MarkdownRender source={val} />
+          </EuiText>
+        );
+      case 'VISUALIZATION':
+        let from = moment(visInput?.timeRange?.from).format(dateFormat);
+        let to = moment(visInput?.timeRange?.to).format(dateFormat);
+        from = from === 'Invalid date' ? visInput.timeRange.from : from;
+        to = to === 'Invalid date' ? visInput.timeRange.to : to;
+        return (
+          <>
+            <EuiText size="s" style={{ marginLeft: 9 }}>
+              {`${from} - ${to}`}
             </EuiText>
-          );
-        case 'VISUALIZATION':
-          let from = moment(visInput?.timeRange?.from).format(dateFormat);
-          let to = moment(visInput?.timeRange?.to).format(dateFormat);
-          from = from === 'Invalid date' ? visInput.timeRange.from : from;
-          to = to === 'Invalid date' ? visInput.timeRange.to : to;
-          return (
-            <>
-              <EuiText size="s" style={{ marginLeft: 9 }}>
-                {`${from} - ${to}`}
-              </EuiText>
-              <DashboardContainerByValueRenderer input={visInput} onInputUpdated={setVisInput} />
-            </>
-          );
-        case 'OBSERVABILITY_VISUALIZATION':
-          let fromObs = moment(visInput?.timeRange?.from).format(dateFormat);
-          let toObs = moment(visInput?.timeRange?.to).format(dateFormat);
-          fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs;
-          toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs;
-          const onEditClick = (savedVisualizationId: string) => {
-            window.location.assign(`observability-logs#/explorer/${savedVisualizationId}`);
-          };
-          return (
-            <>
-              <EuiText size="s" style={{ marginLeft: 9 }}>
-                {`${fromObs} - ${toObs}`}
-              </EuiText>
-              <div style={{ height: '300px', width: '100%' }}>
-                <VisualizationContainer
-                  http={props.http}
-                  editMode={false}
-                  visualizationId={''}
-                  onEditClick={onEditClick}
-                  savedVisualizationId={para.visSavedObjId}
-                  pplService={props.pplService}
-                  fromTime={para.visStartTime}
-                  toTime={para.visEndTime}
-                  onRefresh={false}
-                  pplFilterValue={''}
-                  usedInNotebooks={true}
-                />
-              </div>
-            </>
-          );
-        case 'HTML':
-          return (
-            <EuiText>
-              {/* eslint-disable-next-line react/jsx-pascal-case */}
-              <Media.HTML data={val} />
+            <DashboardContainerByValueRenderer input={visInput} onInputUpdated={setVisInput} />
+          </>
+        );
+      case 'OBSERVABILITY_VISUALIZATION':
+        let fromObs = moment(visInput?.timeRange?.from).format(dateFormat);
+        let toObs = moment(visInput?.timeRange?.to).format(dateFormat);
+        fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs;
+        toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs;
+        const onEditClick = (savedVisualizationId: string) => {
+          window.location.assign(`observability-logs#/explorer/${savedVisualizationId}`);
+        };
+        return (
+          <>
+            <EuiText size="s" style={{ marginLeft: 9 }}>
+              {`${fromObs} - ${toObs}`}
             </EuiText>
-          );
-        case 'TABLE':
-          return <pre>{val}</pre>;
-        case 'IMG':
-          return <img alt="" src={'data:image/gif;base64,' + val} />;
-        default:
-          return <pre>{val}</pre>;
-      }
-    } else {
-      console.log('output not supported', typeOut);
-      return <pre />;
+            <div style={{ height: '300px', width: '100%' }}>
+              <VisualizationContainer
+                http={http}
+                editMode={false}
+                visualizationId={''}
+                onEditClick={onEditClick}
+                savedVisualizationId={para.visSavedObjId}
+                pplService={pplService}
+                fromTime={para.visStartTime}
+                toTime={para.visEndTime}
+                onRefresh={false}
+                pplFilterValue={''}
+                usedInNotebooks={true}
+              />
+            </div>
+          </>
+        );
+      case 'HTML':
+        return (
+          <EuiText>
+            {/* eslint-disable-next-line react/jsx-pascal-case */}
+            <Media.HTML data={val} />
+          </EuiText>
+        );
+      case 'TABLE':
+        return <pre>{val}</pre>;
+      case 'IMG':
+        return <img alt="" src={'data:image/gif;base64,' + val} />;
+      default:
+        return <pre>{val}</pre>;
     }
-  };
+  } else {
+    console.log('output not supported', typeOut);
+    return <pre />;
+  }
+};
 
+/*
+ * "ParaOutput" component is used by notebook to populate paragraph outputs for an open notebook.
+ *
+ * Props taken in as params are:
+ * para - parsed paragraph from notebook
+ *
+ * Outputs component of nteract used as a container for notebook UI.
+ * https://components.nteract.io/#outputs
+ */
+export const ParaOutput = (props: {
+  para: ParaType;
+  visInput: DashboardContainerInput;
+  setVisInput: (input: DashboardContainerInput) => void;
+  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
+}) => {
   const { para, DashboardContainerByValueRenderer, visInput, setVisInput } = props;
 
   return !para.isOutputHidden ? (
@@ -168,9 +198,13 @@ const QueryOutput = ({ typeOut, val }: { typeOut: string; val: string }) => {
       {para.typeOut.map((typeOut: string, tIdx: number) => {
         return (
           <OutputBody
+            para={para}
             key={para.uniqueId + '_paraOutputBody_' + tIdx}
             typeOut={typeOut}
             val={para.out[tIdx]}
+            visInput={visInput}
+            setVisInput={setVisInput}
+            DashboardContainerByValueRenderer={DashboardContainerByValueRenderer}
           />
         );
       })}