[ML] store expandable panels state in the URL

elastic · Nov 30, 2020 · f78230a · f78230a
1 parent dec6511
commit f78230a
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 13 deletions.
diff --git a/x-pack/plugins/ml/common/types/ml_url_generator.ts b/x-pack/plugins/ml/common/types/ml_url_generator.ts
@@ -205,10 +205,13 @@ export type FilterEditUrlState = MLPageState<
  }
 >;
 
+export type ExpandablePanels = 'analysis' | 'evaluation' | 'feature_importance' | 'results';
+
 export type ExplorationPageUrlState = {
  queryText: string;
  queryLanguage: SearchQueryLanguage;
-} & Pick<ListingPageUrlState, 'pageIndex' | 'pageSize'>;
+} & Pick<ListingPageUrlState, 'pageIndex' | 'pageSize'> &
+ { [key in ExpandablePanels]: boolean };
 
 /**
  * Union type of ML URL state based on page

diff --git a/...tics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx b/...tics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx
@@ -286,6 +286,7 @@ export const EvaluatePanel: FC<EvaluatePanelProps> = ({ jobConfig, jobStatus, se
  return (
  <>
  <ExpandableSection
+ urlStateKey={'evaluation'}
  dataTestId="ClassificationEvaluation"
  title={
  <FormattedMessage

diff --git a/...nalytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx b/...nalytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
@@ -6,7 +6,7 @@
 
 import './expandable_section.scss';
 
-import React, { useState, FC, ReactNode } from 'react';
+import React, { FC, ReactNode, useCallback } from 'react';
 
 import {
  EuiBadge,
@@ -17,6 +17,11 @@ import {
  EuiPanel,
  EuiText,
 } from '@elastic/eui';
+import {
+ getDefaultExplorationPageUrlState,
+ useExplorationUrlState,
+} from '../../hooks/use_exploration_url_state';
+import { ExpandablePanels } from '../../../../../../../common/types/ml_url_generator';
 
 interface HeaderItem {
  // id is used as the React key and to construct a data-test-subj
@@ -39,25 +44,30 @@ export interface ExpandableSectionProps {
  isExpanded?: boolean;
  dataTestId: string;
  title: ReactNode;
+ urlStateKey: ExpandablePanels;
 }
 
 export const ExpandableSection: FC<ExpandableSectionProps> = ({
  headerItems,
- // For now we don't have a need for complete external control
- // and just want to pass in a default value. If we wanted
- // full external control we'd also need to add a onToggleExpanded()
- // callback.
- isExpanded: isExpandedDefault = true,
  content,
+ isExpanded: isExpandedDefault,
  contentPadding = false,
  dataTestId,
  title,
  docsLink,
+ urlStateKey,
 }) => {
- const [isExpanded, setIsExpanded] = useState(isExpandedDefault);
- const toggleExpanded = () => {
- setIsExpanded(!isExpanded);
- };
+ const [pageUrlState, setPageUrlState] = useExplorationUrlState();
+
+ const isExpanded =
+ isExpandedDefault !== undefined &&
+ pageUrlState[urlStateKey] === getDefaultExplorationPageUrlState()[urlStateKey]
+ ? isExpandedDefault
+ : pageUrlState[urlStateKey];
+
+ const toggleExpanded = useCallback(() => {
+ setPageUrlState({ [urlStateKey]: !isExpanded });
+ }, [isExpanded, setPageUrlState, urlStateKey]);
 
  return (
  <EuiPanel paddingSize="none" data-test-subj={`mlDFExpandableSection-${dataTestId}`}>

diff --git a/...ages/analytics_exploration/components/expandable_section/expandable_section_analytics.tsx b/...ages/analytics_exploration/components/expandable_section/expandable_section_analytics.tsx
@@ -132,7 +132,7 @@ export const ExpandableSectionAnalytics: FC<ExpandableSectionAnalyticsProps> = (
  dataTestId="analysis"
  content={analyticsSectionContent}
  headerItems={analyticsSectionHeaderItems}
- isExpanded={false}
+ urlStateKey={'analysis'}
  title={
  <FormattedMessage
  id="xpack.ml.dataframe.analytics.exploration.analysisSectionTitle"

diff --git a/.../pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx b/.../pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx
@@ -153,6 +153,7 @@ export const ExpandableSectionResults: FC<ExpandableSectionResultsProps> = ({
  return (
  <>
  <ExpandableSection
+ urlStateKey={'results'}
  dataTestId="results"
  content={resultsSectionContent}
  headerItems={resultsSectionHeaderItems}

diff --git a/...nalytics/pages/analytics_exploration/components/regression_exploration/evaluate_panel.tsx b/...nalytics/pages/analytics_exploration/components/regression_exploration/evaluate_panel.tsx
@@ -222,6 +222,7 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
  return (
  <>
  <ExpandableSection
+ urlStateKey={'evaluation'}
  dataTestId="RegressionEvaluation"
  title={
  <FormattedMessage

diff --git a/...cs_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx b/...cs_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx
@@ -237,11 +237,11 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
  }
  }
  }
- return undefined;
  }, [totalFeatureImportance, jobConfig]);
  return (
  <>
  <ExpandableSection
+ urlStateKey={'feature_importance'}
  isExpanded={noDataCallOut === undefined}
  dataTestId="FeatureImportanceSummary"
  title={

diff --git a/...ation/data_frame_analytics/pages/analytics_exploration/hooks/use_exploration_url_state.ts b/...ation/data_frame_analytics/pages/analytics_exploration/hooks/use_exploration_url_state.ts
@@ -15,6 +15,10 @@ export function getDefaultExplorationPageUrlState(): ExplorationPageUrlState {
  queryLanguage: SEARCH_QUERY_LANGUAGE.KUERY,
  pageIndex: 0,
  pageSize: 25,
+ analysis: false,
+ evaluation: true,
+ feature_importance: true,
+ results: true,
  };
 }