Skip to content

Commit

Permalink
Add wrapAll to paragarph output on CodeBlocks
Browse files Browse the repository at this point in the history 
Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
  • Loading branch information
@pjfitzgibbons
pjfitzgibbons committed Nov 10, 2023
1 parent 80f112a commit 1f2a247
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 165 deletions.
2 changes: 1 addition & 1 deletion ...tebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<ParaOutput /> spec renders markdown outputs 1`] = `
<div
class="euiText euiText--medium markdown-output-text"
class="euiText euiText--medium wrapAll markdown-output-text"
>
<div
class="markdown-body "
Expand Down
2 changes: 1 addition & 1 deletion ...otebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ exports[`<Paragraphs /> spec renders the component 1`] = `
style="opacity: 1; padding: 15px;"
>
<div
class="euiText euiText--medium markdown-output-text"
class="euiText euiText--medium wrapAll markdown-output-text"
>
<div
class="markdown-body "
Expand Down
255 changes: 138 additions & 117 deletions public/components/notebooks/components/paragraph_components/para_output.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ import { EuiCodeBlock, EuiSpacer, EuiText } from '@elastic/eui';
import MarkdownRender from '@nteract/markdown';
import { Media } from '@nteract/outputs';
import moment from 'moment';
import React, { useState } from 'react';
import { set } from '@elastic/safer-lodash-set';
import { VisualizationContainer } from '../../../../components/custom_panels/panel_modules/visualization_container';
import PPLService from '../../../../services/requests/ppl';
import React, { useState } from 'react';
import { CoreStart } from '../../../../../../../src/core/public';
import {
DashboardContainerInput,
Expand All @@ -19,26 +20,32 @@ import { ParaType } from '../../../../../common/types/notebooks';
import { uiSettingsService } from '../../../../../common/utils';
import { QueryDataGridMemo } from './para_query_grid';

/*
* "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: {
http: CoreStart['http'];
pplService: PPLService;
para: ParaType;
const OutputBody = ({
key,
typeOut,
val,
inp,
visInput,
setVisInput,
DashboardContainerByValueRenderer,
}: {
key: string;
typeOut: string;
val: string;
inp: 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');

const createQueryColumns = (jsonColumns: any[]) => {
let index = 0;
let datagridColumns = [];
const datagridColumns = [];
for (index = 0; index < jsonColumns.length; ++index) {
const datagridColumnObject = {
id: jsonColumns[index].name,
Expand All @@ -54,7 +61,7 @@ export const ParaOutput = (props: {
let index = 0;
let schemaIndex = 0;
for (index = 0; index < queryObject.datarows.length; ++index) {
let datarowValue = {};
const datarowValue = {};
for (schemaIndex = 0; schemaIndex < queryObject.schema.length; ++schemaIndex) {
const columnName = queryObject.schema[schemaIndex].name;
if (typeof queryObject.datarows[index][schemaIndex] === 'object') {
Expand All @@ -70,120 +77,134 @@ export const ParaOutput = (props: {
return data;
};

const outputBody = (key: string, 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');

if (typeOut !== undefined) {
switch (typeOut) {
case 'QUERY':
const inputQuery = para.inp.substring(4, para.inp.length);
const queryObject = JSON.parse(val);
if (queryObject.hasOwnProperty('error')) {
return <EuiCodeBlock key={key}>{val}</EuiCodeBlock>;
} else {
const columns = createQueryColumns(queryObject.schema);
const data = getQueryOutputData(queryObject);
const [visibleColumns, setVisibleColumns] = useState(() => columns.map(({ id }) => id));
return (
<div>
<EuiText key={'query-input-key'}>
<b>{inputQuery}</b>
</EuiText>
<EuiSpacer />
<QueryDataGridMemo
key={key}
rowCount={queryObject.datarows.length}
queryColumns={columns}
visibleColumns={visibleColumns}
setVisibleColumns={setVisibleColumns}
dataValues={data}
/>
</div>
);
}
case 'MARKDOWN':
return (
<EuiText key={key} className="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;
if (typeOut !== undefined) {
switch (typeOut) {
case 'QUERY':
const inputQuery = inp.substring(4, inp.length);
const queryObject = JSON.parse(val);
if (queryObject.hasOwnProperty('error')) {
return <EuiCodeBlock key={key}>{val}</EuiCodeBlock>;
} else {
const columns = createQueryColumns(queryObject.schema);
const data = getQueryOutputData(queryObject);
return (
<>
<EuiText size="s" style={{ marginLeft: 9 }}>
{`${from} - ${to}`}
<div>
<EuiText key={'query-input-key'}>
<b>{inputQuery}</b>
</EuiText>
<DashboardContainerByValueRenderer
<EuiSpacer />
<QueryDataGridMemo
key={key}
input={visInput}
onInputUpdated={setVisInput}
rowCount={queryObject.datarows.length}
queryColumns={columns}
dataValues={data}
/>
</>
);
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>
</>
</div>
);
case 'HTML':
return (
<EuiText key={key}>
{/* eslint-disable-next-line react/jsx-pascal-case */}
<Media.HTML data={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 'TABLE':
return <pre key={key}>{val}</pre>;
case 'IMG':
return <img alt="" src={'data:image/gif;base64,' + val} key={key} />;
default:
return <pre key={key}>{val}</pre>;
}
} else {
console.log('output not supported', typeOut);
return <pre />;
<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}
contextMenuId="notebook"
/>
</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: {
http: CoreStart['http'];
pplService: PPLService;
para: ParaType;
visInput: DashboardContainerInput;
setVisInput: (input: DashboardContainerInput) => void;
DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
}) => {
const { para, DashboardContainerByValueRenderer, visInput, setVisInput } = props;

return !para.isOutputHidden ? (
<>
{para.typeOut.map((typeOut: string, tIdx: number) => {
return outputBody(para.uniqueId + '_paraOutputBody', typeOut, para.out[tIdx]);
return (
<OutputBody
key={para.uniqueId + '_paraOutputBody_' + tIdx}
typeOut={typeOut}
val={para.out[tIdx]}
inp={para.inp}
visInput={visInput}
setVisInput={setVisInput}
DashboardContainerByValueRenderer={DashboardContainerByValueRenderer}
/>
);
})}
</>
) : null;
Expand Down
Loading

0 comments on commit 1f2a247

Please sign in to comment.