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

[Lens] Custom Formula Docs Search Design Update #13

Merged
merged 2 commits into from
May 26, 2021
Merged

[Lens] Custom Formula Docs Search Design Update #13

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
1ade3f3
fix form styles to match designs
MichaelMarcialis May 25, 2021
a8f4ec8
fix text styles; revert to Markdown for control
MichaelMarcialis May 25, 2021
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
16 changes: 10 additions & 6 deletions ...ns/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,19 +108,23 @@
}

.lnsFormula__docsSidebar {
height: 100%;
background: $euiColorLightestShade;
}

.lnsFormula__docsSidebarInner {
min-height: 0;

& > * + * {
border-top: $euiBorderThin;
}
}

.lnsFormula__docsSearch {
border: none;
border-bottom: $euiBorderThin;
box-shadow: none;
border-radius: 0;
padding: $euiSizeS;
}

.lnsFormula__docsNav {
@include euiYScroll;
background: $euiColorLightestShade;
}

.lnsFormula__docsNavGroup {
Expand Down
186 changes: 85 additions & 101 deletions ...ens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ import {
EuiText,
EuiListGroupItem,
EuiListGroup,
EuiMarkdownFormat,
EuiTitle,
EuiButtonIcon,
EuiFieldSearch,
EuiHighlight,
} from '@elastic/eui';
import { Markdown } from '../../../../../../../../../src/plugins/kibana_react/public';
import { IndexPattern } from '../../../../types';
import { tinymathFunctions } from '../util';
import { getPossibleFunctions } from './math_completion';
Expand Down Expand Up @@ -56,7 +56,7 @@ function FormulaHelp({

const helpGroups: Array<{
label: string;
description?: JSX.Element;
description?: string;
items: Array<{ label: string; description?: JSX.Element }>;
}> = [];

Expand All @@ -71,14 +71,10 @@ function FormulaHelp({
label: i18n.translate('xpack.lens.formulaDocumentation.elasticsearchSection', {
defaultMessage: 'Elasticsearch',
}),
description: (
<EuiText size="s">
{i18n.translate('xpack.lens.formulaDocumentation.elasticsearchSectionDescription', {
defaultMessage:
'These functions will be executed on the raw documents for each row of the resulting table, aggregating all documents matching the break down dimensions into a single value.',
})}
</EuiText>
),
description: i18n.translate('xpack.lens.formulaDocumentation.elasticsearchSectionDescription', {
defaultMessage:
'These functions will be executed on the raw documents for each row of the resulting table, aggregating all documents matching the break down dimensions into a single value.',
}),
items: [],
});

Expand All @@ -97,15 +93,12 @@ function FormulaHelp({
label: key,
description: (
<>
<EuiTitle size="s">
<h3>
{key}({operationDefinitionMap[key].documentation?.signature})
</h3>
</EuiTitle>
<h3>
{key}({operationDefinitionMap[key].documentation?.signature})
</h3>

{operationDefinitionMap[key].documentation?.description ? (
<EuiMarkdownFormat>
{operationDefinitionMap[key].documentation!.description}
</EuiMarkdownFormat>
<Markdown markdown={operationDefinitionMap[key].documentation!.description} />
) : null}
</>
),
Expand All @@ -116,13 +109,12 @@ function FormulaHelp({
label: i18n.translate('xpack.lens.formulaDocumentation.columnCalculationSection', {
defaultMessage: 'Column-wise calculation',
}),
description: (
<EuiText size="s">
{i18n.translate('xpack.lens.formulaDocumentation.columnCalculationSectionDescription', {
defaultMessage:
'These functions will be executed for reach row of the resulting table, using data from cells from other rows as well as the current value.',
})}
</EuiText>
description: i18n.translate(
'xpack.lens.formulaDocumentation.columnCalculationSectionDescription',
{
defaultMessage:
'These functions will be executed for reach row of the resulting table, using data from cells from other rows as well as the current value.',
}
),
items: [],
});
Expand All @@ -140,15 +132,12 @@ function FormulaHelp({
label: key,
description: (
<>
<EuiTitle size="s">
<h3>
{key}({operationDefinitionMap[key].documentation?.signature})
</h3>
</EuiTitle>
<h3>
{key}({operationDefinitionMap[key].documentation?.signature})
</h3>

{operationDefinitionMap[key].documentation?.description ? (
<EuiMarkdownFormat>
{operationDefinitionMap[key].documentation!.description}
</EuiMarkdownFormat>
<Markdown markdown={operationDefinitionMap[key].documentation!.description} />
) : null}
</>
),
Expand All @@ -163,14 +152,10 @@ function FormulaHelp({
label: i18n.translate('xpack.lens.formulaDocumentation.mathSection', {
defaultMessage: 'Math',
}),
description: (
<EuiText size="s">
{i18n.translate('xpack.lens.formulaDocumentation.mathSectionDescription', {
defaultMessage:
'These functions will be executed for reach row of the resulting table using single values from the same row calculated using other functions.',
})}
</EuiText>
),
description: i18n.translate('xpack.lens.formulaDocumentation.mathSectionDescription', {
defaultMessage:
'These functions will be executed for reach row of the resulting table using single values from the same row calculated using other functions.',
}),
items: [],
});

Expand All @@ -194,10 +179,9 @@ function FormulaHelp({
label,
description: (
<>
<EuiTitle size="s">
<h3>{getFunctionSignatureLabel(label, operationDefinitionMap)}</h3>
</EuiTitle>
<EuiMarkdownFormat>{`${description}${examples}`}</EuiMarkdownFormat>
<h3>{getFunctionSignatureLabel(label, operationDefinitionMap)}</h3>

<Markdown markdown={`${description}${examples}`} />
</>
),
};
Expand Down Expand Up @@ -238,16 +222,14 @@ function FormulaHelp({
responsive={false}
alignItems="stretch"
>
<EuiFlexItem grow={1}>
<EuiFlexItem className="lnsFormula__docsSidebar" grow={1}>
<EuiFlexGroup
className="lnsFormula__docsSidebarInner"
direction="column"
gutterSize="none"
responsive={false}
className="lnsFormula__docsSidebar"
>
<EuiFlexItem grow={false}>
<EuiFlexItem className="lnsFormula__docsSearch" grow={false}>
<EuiFieldSearch
className="lnsFormula__docsSearch"
value={searchText}
onChange={(e) => {
setSearchText(e.target.value);
Expand All @@ -257,7 +239,8 @@ function FormulaHelp({
})}
/>
</EuiFlexItem>
<EuiFlexItem className="lnsFormula__docsNav" grow={true}>

<EuiFlexItem className="lnsFormula__docsNav">
{helpGroups.map((helpGroup, index) => {
return (
<nav className="lnsFormula__docsNavGroup" key={helpGroup.label}>
Expand Down Expand Up @@ -303,16 +286,18 @@ function FormulaHelp({
</EuiFlexItem>

<EuiFlexItem className="lnsFormula__docsText" grow={2}>
<section
ref={(el) => {
if (el) {
scrollTargets.current[helpGroups[0].label] = el;
}
}}
>
<EuiMarkdownFormat>
{i18n.translate('xpack.lens.formulaDocumentation', {
defaultMessage: `
<EuiText size="s">
<section
className="lnsFormula__docsTextIntro"
ref={(el) => {
if (el) {
scrollTargets.current[helpGroups[0].label] = el;
}
}}
>
<Markdown
markdown={i18n.translate('xpack.lens.formulaDocumentation', {
defaultMessage: `
## How it works

Lens formulas let you do math using a combination of Elasticsearch aggregations and
Expand Down Expand Up @@ -345,47 +330,46 @@ Math functions can take positional arguments, like pow(count(), 3) is the same a

Use the symbols +, -, /, and * to perform basic math.
`,
description:
'Text is in markdown. Do not translate function names or field names like sum(bytes)',
})}
</EuiMarkdownFormat>
</section>

{helpGroups.slice(1).map((helpGroup, index) => {
return (
<section
className="lnsFormula__docsTextGroup"
key={helpGroup.label}
ref={(el) => {
if (el) {
scrollTargets.current[helpGroup.label] = el;
}
}}
>
<EuiTitle size="xxs">
<h2>{helpGroup.label}</h2>
</EuiTitle>

{helpGroup.description}

{helpGroups[index + 1].items.map((helpItem) => {
return (
<article
className="lnsFormula__docsTextItem"
key={helpItem.label}
ref={(el) => {
if (el) {
scrollTargets.current[helpItem.label] = el;
}
}}
>
{helpItem.description}
</article>
);
description:
'Text is in markdown. Do not translate function names or field names like sum(bytes)',
})}
</section>
);
})}
/>
</section>

{helpGroups.slice(1).map((helpGroup, index) => {
return (
<section
className="lnsFormula__docsTextGroup"
key={helpGroup.label}
ref={(el) => {
if (el) {
scrollTargets.current[helpGroup.label] = el;
}
}}
>
<h2>{helpGroup.label}</h2>

<p>{helpGroup.description}</p>

{helpGroups[index + 1].items.map((helpItem) => {
return (
<article
className="lnsFormula__docsTextItem"
key={helpItem.label}
ref={(el) => {
if (el) {
scrollTargets.current[helpItem.label] = el;
}
}}
>
{helpItem.description}
</article>
);
})}
</section>
);
})}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</>
Expand Down