Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add wrapAll to paragarph output on CodeBlocks #1238

Merged
merged 2 commits into from
Nov 13, 2023
Merged

Add wrapAll to paragarph output on CodeBlocks #1238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f2a247
Add wrapAll to paragarph output on CodeBlocks
pjfitzgibbons Nov 10, 2023
3be019e
Add Wrap css
pjfitzgibbons Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...tebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading