jsdoc

x-pack/packages/ml/field_stats_flyout/eui_combo_box_with_field_stats.tsx

@@ -25,9 +25,25 @@ export const optionCss = css`
   }
 `;
 
-export const EuiComboBoxWithFieldStats: FC<
-  EuiComboBoxProps<string | number | string[] | undefined>
-> = ({ options, ...restProps }) => {
+/**
+ * Props for the EuiComboBoxWithFieldStats component.
+ */
+export type EuiComboBoxWithFieldStatsProps = EuiComboBoxProps<
+  string | number | string[] | undefined
+>;
+
+/**
+ * React component that wraps the EuiComboBox component and adds field statistics functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <EuiComboBoxWithFieldStats options={options} />
+ * ```
+ * @param {EuiComboBoxWithFieldStatsProps} props - The component props.
+ */
+export const EuiComboBoxWithFieldStats: FC<EuiComboBoxWithFieldStatsProps> = (props) => {
+  const { options, ...restProps } = props;
   const { renderOption } = useFieldStatsTrigger();
   const comboBoxOptions: EuiComboBoxOptionOption[] = useMemo(
     () =>

x-pack/packages/ml/field_stats_flyout/field_stats_content.tsx

@@ -22,12 +22,23 @@ import { useFieldStatsFlyoutContext } from './use_field_stats_flyout_context';
 
 const DEFAULT_COLOR = euiPaletteColorBlind()[0];
 
-export const FieldStatsContent: FC<{
+/**
+ * Represents the props for the FieldStatsFlyout component.
+ */
+export interface FieldStatsFlyoutProps {
   dataView: DataView;
   fieldStatsServices: FieldStatsServices;
   timeRangeMs?: TimeRangeMs;
   dslQuery?: FieldStatsProps['dslQuery'];
-}> = ({ dataView: selectedDataView, fieldStatsServices, timeRangeMs, dslQuery }) => {
+}
+
+/**
+ * Renders the content for the field statistics flyout.
+ * @param props - The props for the FieldStatsContent component.
+ * @returns The rendered FieldStatsContent component.
+ */
+export const FieldStatsContent: FC<FieldStatsFlyoutProps> = (props) => {
+  const { dataView: selectedDataView, fieldStatsServices, timeRangeMs, dslQuery } = props;
   const { fieldName } = useFieldStatsFlyoutContext();
 
   // Format timestamp to ISO formatted date strings

x-pack/packages/ml/field_stats_flyout/field_stats_flyout.tsx

@@ -29,12 +29,40 @@ import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
 import { useFieldStatsFlyoutContext } from './use_field_stats_flyout_context';
 import { FieldStatsContent } from './field_stats_content';
 
-export const FieldStatsFlyout: FC<{
+/**
+ * Props for the FieldStatsFlyout component.
+ *
+ * @typedef {Object} FieldStatsFlyoutProps
+ * @property dataView - The data view object.
+ * @property fieldStatsServices - Services required for field statistics.
+ * @property [timeRangeMs] - Optional time range in milliseconds.
+ * @property [dslQuery] - Optional DSL query for filtering field statistics.
+ */
+export interface FieldStatsFlyoutProps {
   dataView: DataView;
   fieldStatsServices: FieldStatsServices;
   timeRangeMs?: TimeRangeMs;
   dslQuery?: FieldStatsProps['dslQuery'];
-}> = ({ dataView, fieldStatsServices, timeRangeMs, dslQuery }) => {
+}
+
+/**
+ * Renders a flyout component for displaying field statistics.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FieldStatsFlyout
+ *   dataView={dataView}
+ *   fieldStatsServices={fieldStatsServices}
+ *   timeRangeMs={timeRangeMs}
+ *   dslQuery={dslQuery}
+ * />
+ * ```
+ *
+ * @param {Object} props - The component props.
+ */
+export const FieldStatsFlyout: FC<FieldStatsFlyoutProps> = (props) => {
+  const { dataView, fieldStatsServices, timeRangeMs, dslQuery } = props;
   const { setIsFlyoutVisible, isFlyoutVisible, fieldName } = useFieldStatsFlyoutContext();
 
   const closeFlyout = useCallback(() => setIsFlyoutVisible(false), []); // eslint-disable-line react-hooks/exhaustive-deps

x-pack/packages/ml/field_stats_flyout/field_stats_flyout_provider.tsx

@@ -32,28 +32,58 @@ function useDataSearch() {
   const { data } = useKibana<Services>().services;
 
   if (!data) {
-    throw new Error('Kibana data service not available');
+    throw new Error('Kibana data service not available.');
   }
 
   return data.search;
 }
 
-export const FieldStatsFlyoutProvider: FC<
-  PropsWithChildren<{
-    dataView: DataView;
-    fieldStatsServices: FieldStatsServices;
-    timeRangeMs?: TimeRangeMs;
-    dslQuery?: FieldStatsProps['dslQuery'];
-    disablePopulatedFields?: boolean;
-  }>
-> = ({
-  dataView,
-  fieldStatsServices,
-  timeRangeMs,
-  dslQuery,
-  disablePopulatedFields = false,
-  children,
-}) => {
+/**
+ * Props for the FieldStatsFlyoutProvider component.
+ *
+ * @typedef {Object} FieldStatsFlyoutProviderProps
+ * @property dataView - The data view object.
+ * @property fieldStatsServices - Services required for field statistics.
+ * @property [timeRangeMs] - Optional time range in milliseconds.
+ * @property [dslQuery] - Optional DSL query for filtering field statistics.
+ * @property [disablePopulatedFields] - Optional flag to disable populated fields.
+ */
+export type FieldStatsFlyoutProviderProps = PropsWithChildren<{
+  dataView: DataView;
+  fieldStatsServices: FieldStatsServices;
+  timeRangeMs?: TimeRangeMs;
+  dslQuery?: FieldStatsProps['dslQuery'];
+  disablePopulatedFields?: boolean;
+}>;
+
+/**
+ * Provides field statistics in a flyout component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FieldStatsFlyoutProvider
+ *   dataView={dataView}
+ *   fieldStatsServices={fieldStatsServices}
+ *   timeRangeMs={timeRangeMs}
+ *   dslQuery={dslQuery}
+ *   disablePopulatedFields={disablePopulatedFields}
+ * >
+ *   {children}
+ * </FieldStatsFlyoutProvider>
+ * ```
+ *
+ * @param {FieldStatsFlyoutProviderProps} props - The component props.
+ */
+export const FieldStatsFlyoutProvider: FC<FieldStatsFlyoutProviderProps> = (props) => {
+  const {
+    dataView,
+    fieldStatsServices,
+    timeRangeMs,
+    dslQuery,
+    disablePopulatedFields = false,
+    children,
+  } = props;
   const search = useDataSearch();
   const [isFieldStatsFlyoutVisible, setFieldStatsIsFlyoutVisible] = useState(false);
   const [fieldName, setFieldName] = useState<string | undefined>();

x-pack/packages/ml/field_stats_flyout/field_stats_info_button.tsx

@@ -7,12 +7,13 @@
 
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import React, { type FC } from 'react';
 import { FieldIcon } from '@kbn/react-field';
 import { type Field } from '@kbn/ml-anomaly-utils';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme';
-import { getKbnFieldIconType } from './get_field_icon_types';
+
+import { getKbnFieldIconType } from './get_kbn_field_icon_types';
 
 function useThemeVars() {
   const { theme } = useKibana().services;
@@ -24,23 +25,42 @@ function useThemeVars() {
   return useCurrentEuiThemeVars(theme);
 }
 
+/**
+ * Represents a field used for statistics.
+ */
 export type FieldForStats = Pick<Field, 'id' | 'type'>;
-export const FieldStatsInfoButton = ({
-  field,
-  label,
-  onButtonClick,
-  disabled,
-  isEmpty = false,
-  hideTrigger = false,
-}: {
+
+/**
+ * Represents the props for the FieldStatsInfoButton component.
+ */
+export interface FieldStatsInfoButtonProps {
   field: FieldForStats;
   label: string;
-  searchValue?: string;
+  onButtonClick?: (field: FieldForStats) => void;
   disabled?: boolean;
   isEmpty?: boolean;
-  onButtonClick?: (field: FieldForStats) => void;
   hideTrigger?: boolean;
-}) => {
+}
+
+/**
+ * Renders a button component for field statistics information.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FieldStatsInfoButton
+ *   field={field}
+ *   label={label}
+ *   onButtonClick={handleButtonClick}
+ *   disabled={false}
+ *   isEmpty={true}
+ *   hideTrigger={false}
+ * />
+ * ```
+ * @param {FieldStatsInfoButtonProps} props - The props for the FieldStatsInfoButton component.
+ */
+export const FieldStatsInfoButton: FC<FieldStatsInfoButtonProps> = (props) => {
+  const { field, label, onButtonClick, disabled, isEmpty, hideTrigger } = props;
   const themeVars = useThemeVars();
   const emptyFieldMessage = isEmpty
     ? ' ' +

x-pack/packages/ml/field_stats_flyout/get_field_icon_types.ts → x-pack/packages/ml/field_stats_flyout/get_kbn_field_icon_types.ts

@@ -8,6 +8,12 @@
 import { ES_FIELD_TYPES } from '@kbn/field-types';
 import type { FieldIconProps } from '@kbn/react-field';
 
+/**
+ * Returns the Kibana field icon type based on the provided field type.
+ *
+ * @param fieldType - The type of the field for which the icon type is needed.
+ * @returns The icon type corresponding to the provided field type.
+ */
 export function getKbnFieldIconType(type: string): FieldIconProps['type'] {
   switch (type) {
     case ES_FIELD_TYPES.FLOAT:

x-pack/packages/ml/field_stats_flyout/index.ts

@@ -6,12 +6,22 @@
  */
 
 export { FieldStatsFlyout } from './field_stats_flyout';
-export { FieldStatsContent } from './field_stats_content';
-export { FieldStatsFlyoutProvider } from './field_stats_flyout_provider';
+export { FieldStatsContent, type FieldStatsFlyoutProps } from './field_stats_content';
+export {
+  FieldStatsFlyoutProvider,
+  type FieldStatsFlyoutProviderProps,
+} from './field_stats_flyout_provider';
 export {
   MLFieldStatsFlyoutContext,
   useFieldStatsFlyoutContext,
 } from './use_field_stats_flyout_context';
-export { FieldStatsInfoButton, type FieldForStats } from './field_stats_info_button';
+export {
+  FieldStatsInfoButton,
+  type FieldForStats,
+  type FieldStatsInfoButtonProps,
+} from './field_stats_info_button';
 export { useFieldStatsTrigger } from './use_field_stats_trigger';
-export { EuiComboBoxWithFieldStats } from './eui_combo_box_with_field_stats';
+export {
+  EuiComboBoxWithFieldStats,
+  type EuiComboBoxWithFieldStatsProps,
+} from './eui_combo_box_with_field_stats';

x-pack/packages/ml/field_stats_flyout/use_field_stats_flyout_context.ts

@@ -7,6 +7,10 @@
 
 import { createContext, useContext } from 'react';
 import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
+
+/**
+ * Represents the properties for the MLJobWizardFieldStatsFlyout component.
+ */
 interface MLJobWizardFieldStatsFlyoutProps {
   isFlyoutVisible: boolean;
   setIsFlyoutVisible: (v: boolean) => void;
@@ -18,6 +22,10 @@ interface MLJobWizardFieldStatsFlyoutProps {
   timeRangeMs?: TimeRangeMs;
   populatedFields?: Set<string>;
 }
+
+/**
+ * Context for the ML Field Stats Flyout.
+ */
 export const MLFieldStatsFlyoutContext = createContext<MLJobWizardFieldStatsFlyoutProps>({
   isFlyoutVisible: false,
   setIsFlyoutVisible: () => {},
@@ -28,6 +36,10 @@ export const MLFieldStatsFlyoutContext = createContext<MLJobWizardFieldStatsFlyo
   populatedFields: undefined,
 });
 
+/**
+ * Retrieves the context for the field stats flyout.
+ * @returns The field stats flyout context.
+ */
 export function useFieldStatsFlyoutContext() {
   return useContext(MLFieldStatsFlyoutContext);
 }

x-pack/packages/ml/field_stats_flyout/use_field_stats_trigger.tsx

@@ -13,10 +13,23 @@ import { optionCss } from './eui_combo_box_with_field_stats';
 import { useFieldStatsFlyoutContext } from '.';
 import type { FieldForStats } from './field_stats_info_button';
 import { FieldStatsInfoButton } from './field_stats_info_button';
+
 interface Option extends EuiComboBoxOptionOption<string> {
   field: Field;
 }
 
+/**
+ * Custom hook for managing field statistics trigger functionality.
+ *
+ * @returns An object containing the following properties and functions:
+ *   - `renderOption`: A callback function for rendering options in a combo box.
+ *   - `setIsFlyoutVisible`: A function for setting the visibility of the flyout.
+ *   - `setFieldName`: A function for setting the field name.
+ *   - `handleFieldStatsButtonClick`: A callback function for handling field stats button click.
+ *   - `closeFlyout`: A callback function for closing the flyout.
+ *   - `optionCss`: CSS styles for the options in the combo box.
+ *   - `populatedFields`: A set of populated fields.
+ */
 export const useFieldStatsTrigger = () => {
   const { setIsFlyoutVisible, setFieldName, populatedFields } = useFieldStatsFlyoutContext();