mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[8.9] ESRE landing page: close open accordion if another one is opened (#160065)
## Summary
This PR adds auto-collapse functionality for accordions within a
section; if an accordion is expanded, it gets collapsed automatically
upon expanding another one.
### Checklist
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
This commit is contained in:
Adam Demjen
GitHub
parent
8a04cdee62
commit
0f80a93a8f
3 changed files with 184 additions and 154 deletions
|
|
@ -24,6 +24,8 @@ export interface EsreGuideAccordionProps {
|
|||
title: string;
|
||||
description: string;
|
||||
initialIsOpen?: boolean;
|
||||
onToggle: (id: string | undefined) => void;
|
||||
currentExpandedId: string | undefined;
|
||||
}
|
||||
|
||||
export const EsreGuideAccordion: React.FC<EsreGuideAccordionProps> = ({
|
||||
|
|
@ -32,6 +34,8 @@ export const EsreGuideAccordion: React.FC<EsreGuideAccordionProps> = ({
|
|||
title,
|
||||
description,
|
||||
initialIsOpen = false,
|
||||
onToggle,
|
||||
currentExpandedId,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
|
|
@ -39,6 +43,8 @@ export const EsreGuideAccordion: React.FC<EsreGuideAccordionProps> = ({
|
|||
<EuiAccordion
|
||||
id={id}
|
||||
initialIsOpen={initialIsOpen}
|
||||
onToggle={(isOpen: boolean) => onToggle(isOpen ? id : undefined)}
|
||||
forceState={id === currentExpandedId ? 'open' : 'closed'}
|
||||
buttonContent={
|
||||
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
@ -18,71 +18,82 @@ import { EsreGuideAccordion } from './esre_guide_accordion';
|
|||
import { LinearCombinationPanel } from './linear_combination_panel';
|
||||
import { RrfRankingPanel } from './rrf_ranking_panel';
|
||||
|
||||
export const RankAggregationSection: React.FC = () => (
|
||||
<EuiFlexGroup alignItems="center">
|
||||
<EuiFlexItem grow={4}>
|
||||
<EuiFlexGroup direction="column" gutterSize="s" justifyContent="flexStart">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.esre.rankAggregationSection.title"
|
||||
defaultMessage="Use a rank aggregation method"
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.esre.rankAggregationSection.description"
|
||||
defaultMessage="Optional methods for fusing or combining different rankings to achieve better overall ranking performance."
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={6}>
|
||||
<EuiFlexGroup direction="column">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="rrfRankingAccordion"
|
||||
data-telemetry-id="entSearch-esre-rankAggregation-rrfRankingAccordion"
|
||||
icon={rrfRankingIllustration}
|
||||
title={i18n.translate('xpack.enterpriseSearch.esre.rrfRankingAccordion.title', {
|
||||
defaultMessage: 'RRF hybrid ranking',
|
||||
})}
|
||||
description={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.rrfRankingAccordion.description',
|
||||
{
|
||||
defaultMessage: 'Intelligently combines rankings without configuration',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<RrfRankingPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="linearCombinationAccordion"
|
||||
data-telemetry-id="entSearch-esre-rankAggregation-linearCombinationAccordion"
|
||||
icon={linearCombinationIllustration}
|
||||
title={i18n.translate('xpack.enterpriseSearch.esre.linearCombinationAccordion.title', {
|
||||
defaultMessage: 'Linear combination',
|
||||
})}
|
||||
description={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.linearCombinationAccordion.description',
|
||||
{
|
||||
defaultMessage: 'Weighted results from multiple rankings',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<LinearCombinationPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
export const RankAggregationSection: React.FC = () => {
|
||||
const [currentExpandedId, setCurrentExpandedId] = useState<string | undefined>(undefined);
|
||||
|
||||
return (
|
||||
<EuiFlexGroup alignItems="center">
|
||||
<EuiFlexItem grow={4}>
|
||||
<EuiFlexGroup direction="column" gutterSize="s" justifyContent="flexStart">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.esre.rankAggregationSection.title"
|
||||
defaultMessage="Use a rank aggregation method"
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.esre.rankAggregationSection.description"
|
||||
defaultMessage="Optional methods for fusing or combining different rankings to achieve better overall ranking performance."
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={6}>
|
||||
<EuiFlexGroup direction="column">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="rrfRankingAccordion"
|
||||
data-telemetry-id="entSearch-esre-rankAggregation-rrfRankingAccordion"
|
||||
icon={rrfRankingIllustration}
|
||||
title={i18n.translate('xpack.enterpriseSearch.esre.rrfRankingAccordion.title', {
|
||||
defaultMessage: 'RRF hybrid ranking',
|
||||
})}
|
||||
description={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.rrfRankingAccordion.description',
|
||||
{
|
||||
defaultMessage: 'Intelligently combines rankings without configuration',
|
||||
}
|
||||
)}
|
||||
currentExpandedId={currentExpandedId}
|
||||
onToggle={setCurrentExpandedId}
|
||||
>
|
||||
<RrfRankingPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="linearCombinationAccordion"
|
||||
data-telemetry-id="entSearch-esre-rankAggregation-linearCombinationAccordion"
|
||||
icon={linearCombinationIllustration}
|
||||
title={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.linearCombinationAccordion.title',
|
||||
{
|
||||
defaultMessage: 'Linear combination',
|
||||
}
|
||||
)}
|
||||
description={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.linearCombinationAccordion.description',
|
||||
{
|
||||
defaultMessage: 'Weighted results from multiple rankings',
|
||||
}
|
||||
)}
|
||||
currentExpandedId={currentExpandedId}
|
||||
onToggle={setCurrentExpandedId}
|
||||
>
|
||||
<LinearCombinationPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
@ -20,87 +20,100 @@ import { EsreGuideAccordion } from './esre_guide_accordion';
|
|||
import { NlpEnrichmentPanel } from './nlp_enrichment_panel';
|
||||
import { VectorSearchPanel } from './vector_search_panel';
|
||||
|
||||
export const SemanticSearchSection: React.FC = () => (
|
||||
<EuiFlexGroup alignItems="center">
|
||||
<EuiFlexItem grow={4}>
|
||||
<EuiFlexGroup direction="column" gutterSize="s" justifyContent="flexStart">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.esre.semanticSearch.title"
|
||||
defaultMessage="Set up semantic search"
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.esre.semanticSearch.description"
|
||||
defaultMessage="ESRE combines your choice of these information retrieval tools."
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={6}>
|
||||
<EuiFlexGroup direction="column">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="elserAccordion"
|
||||
data-telemetry-id="entSearch-esre-semanticSearch-elserAccordion"
|
||||
initialIsOpen
|
||||
icon={elserIllustration}
|
||||
title={i18n.translate('xpack.enterpriseSearch.esre.elserAccordion.title', {
|
||||
defaultMessage: 'Elastic Learned Sparse Encoder',
|
||||
})}
|
||||
description={i18n.translate('xpack.enterpriseSearch.esre.elserAccordion.description', {
|
||||
defaultMessage: 'Instant semantic search capabilities',
|
||||
})}
|
||||
>
|
||||
<ElserPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="vectorSearchAccordion"
|
||||
data-telemetry-id="entSearch-esre-semanticSearch-vectorSearchAccordion"
|
||||
icon={vectorSearchIllustration}
|
||||
title={i18n.translate('xpack.enterpriseSearch.esre.vectorSearchAccordion.title', {
|
||||
defaultMessage: 'Vector Search',
|
||||
})}
|
||||
description={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.vectorSearchAccordion.description',
|
||||
{
|
||||
defaultMessage: 'Powerful similarity searches for unstructured data',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<VectorSearchPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="nlpEnrichmentAccordion"
|
||||
data-telemetry-id="entSearch-esre-semanticSearch-nlpEnrichmentAccordion"
|
||||
icon={nlpEnrichmentIllustration}
|
||||
title={i18n.translate('xpack.enterpriseSearch.esre.nlpEnrichmentAccordion.title', {
|
||||
defaultMessage: 'NLP Enrichment',
|
||||
})}
|
||||
description={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.nlpEnrichmentAccordion.description',
|
||||
{
|
||||
defaultMessage: 'Insightful data enrichment with trained ML models',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<NlpEnrichmentPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
export const SemanticSearchSection: React.FC = () => {
|
||||
const [currentExpandedId, setCurrentExpandedId] = useState<string | undefined>('elserAccordion');
|
||||
|
||||
return (
|
||||
<EuiFlexGroup alignItems="center">
|
||||
<EuiFlexItem grow={4}>
|
||||
<EuiFlexGroup direction="column" gutterSize="s" justifyContent="flexStart">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.esre.semanticSearch.title"
|
||||
defaultMessage="Set up semantic search"
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.enterpriseSearch.esre.semanticSearch.description"
|
||||
defaultMessage="ESRE combines your choice of these information retrieval tools."
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={6}>
|
||||
<EuiFlexGroup direction="column">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="elserAccordion"
|
||||
data-telemetry-id="entSearch-esre-semanticSearch-elserAccordion"
|
||||
initialIsOpen
|
||||
icon={elserIllustration}
|
||||
title={i18n.translate('xpack.enterpriseSearch.esre.elserAccordion.title', {
|
||||
defaultMessage: 'Elastic Learned Sparse Encoder',
|
||||
})}
|
||||
description={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.elserAccordion.description',
|
||||
{
|
||||
defaultMessage: 'Instant semantic search capabilities',
|
||||
}
|
||||
)}
|
||||
currentExpandedId={currentExpandedId}
|
||||
onToggle={setCurrentExpandedId}
|
||||
>
|
||||
<ElserPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="vectorSearchAccordion"
|
||||
data-telemetry-id="entSearch-esre-semanticSearch-vectorSearchAccordion"
|
||||
icon={vectorSearchIllustration}
|
||||
title={i18n.translate('xpack.enterpriseSearch.esre.vectorSearchAccordion.title', {
|
||||
defaultMessage: 'Vector Search',
|
||||
})}
|
||||
description={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.vectorSearchAccordion.description',
|
||||
{
|
||||
defaultMessage: 'Powerful similarity searches for unstructured data',
|
||||
}
|
||||
)}
|
||||
currentExpandedId={currentExpandedId}
|
||||
onToggle={setCurrentExpandedId}
|
||||
>
|
||||
<VectorSearchPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EsreGuideAccordion
|
||||
id="nlpEnrichmentAccordion"
|
||||
data-telemetry-id="entSearch-esre-semanticSearch-nlpEnrichmentAccordion"
|
||||
icon={nlpEnrichmentIllustration}
|
||||
title={i18n.translate('xpack.enterpriseSearch.esre.nlpEnrichmentAccordion.title', {
|
||||
defaultMessage: 'NLP Enrichment',
|
||||
})}
|
||||
description={i18n.translate(
|
||||
'xpack.enterpriseSearch.esre.nlpEnrichmentAccordion.description',
|
||||
{
|
||||
defaultMessage: 'Insightful data enrichment with trained ML models',
|
||||
}
|
||||
)}
|
||||
currentExpandedId={currentExpandedId}
|
||||
onToggle={setCurrentExpandedId}
|
||||
>
|
||||
<NlpEnrichmentPanel />
|
||||
</EsreGuideAccordion>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue