@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
81 lines • 3.91 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useEffect, useRef } from 'react';
import { useRandomId } from '@awsui/component-toolkit/internal';
import { ComponentMetrics, PerformanceMetrics } from '../../analytics';
import { useFunnel } from '../../analytics/hooks/use-funnel';
import { useDebounceCallback } from '../use-debounce-callback';
import { useDOMAttribute } from '../use-dom-attribute';
import { useEffectOnUpdate } from '../use-effect-on-update';
/*
If the last user interaction is more than this time ago, it is not considered
to be the cause of the current loading state.
*/
const USER_ACTION_TIME_LIMIT = 1000;
export function useTableInteractionMetrics({ elementRef, items, itemCount, instanceIdentifier, getComponentIdentifier, getComponentConfiguration, loading = false, interactionMetadata, }) {
const taskInteractionId = useRandomId();
const tableInteractionAttributes = useDOMAttribute(elementRef, 'data-analytics-task-interaction-id', taskInteractionId);
const { isInFunnel } = useFunnel();
const lastUserAction = useRef(null);
const capturedUserAction = useRef(null);
const loadingStartTime = useRef(null);
const metadata = useRef({ itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata });
metadata.current = { itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata };
useEffect(() => {
if (isInFunnel) {
return;
}
ComponentMetrics.componentMounted({
taskInteractionId,
componentName: 'table',
componentConfiguration: metadata.current.getComponentConfiguration(),
});
}, [taskInteractionId, isInFunnel]);
useEffect(() => {
if (loading) {
loadingStartTime.current = performance.now();
if (lastUserAction.current && lastUserAction.current.time > performance.now() - USER_ACTION_TIME_LIMIT) {
capturedUserAction.current = lastUserAction.current.name;
}
else {
capturedUserAction.current = null;
}
}
}, [loading]);
useEffectOnUpdate(() => {
var _a;
if (!loading && loadingStartTime.current !== null) {
const loadingDuration = performance.now() - loadingStartTime.current;
loadingStartTime.current = null;
PerformanceMetrics.tableInteraction({
userAction: (_a = capturedUserAction.current) !== null && _a !== void 0 ? _a : '',
interactionTime: Math.round(loadingDuration),
interactionMetadata: metadata.current.interactionMetadata(),
componentIdentifier: metadata.current.getComponentIdentifier(),
instanceIdentifier,
noOfResourcesInTable: metadata.current.itemCount,
});
}
}, [instanceIdentifier, loading, taskInteractionId, isInFunnel]);
const debouncedUpdated = useDebounceCallback(() => {
var _a, _b;
ComponentMetrics.componentUpdated({
taskInteractionId,
componentName: 'table',
actionType: (_b = (_a = lastUserAction.current) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
componentConfiguration: metadata.current.getComponentConfiguration(),
});
});
useEffectOnUpdate(() => {
if (isInFunnel || loading) {
return;
}
debouncedUpdated();
// Note: items used as a dependency here to trigger updates as a side effect
}, [taskInteractionId, isInFunnel, loading, items, debouncedUpdated]);
return {
tableInteractionAttributes,
setLastUserAction: (name) => void (lastUserAction.current = { name, time: performance.now() }),
};
}
//# sourceMappingURL=index.js.map