+
+
+
+
+
+ {Object.values(routes).map((route, index) => {
+ const { component: Component, path, isExact, title } = route;
+ return (
+
+
+
+
+
+
+ );
+ })}
+
+
+
+
+
+ Select Line:
+
+
+ Select Area:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {props.title}
+
+ {props.children && (
+
+
+ {props.children}
+
+ )}
+
+ {attachedTags.map((tag: ITagInfo) => (
+
+
+ ))}
+
+ );
+ }
+
+ return (
+
+
+
+ {inlineAttachedTagsList ? 'Click to edit tags' : 'No attached tags'}
+
+ );
+ }, [attachedTags, inlineAttachedTagsList]);
+
+ const renderAddTagsButton = React.useCallback(() => {
+ return (
+
+ );
+ }, [addTagButtonSize]);
+
+ return (
+
+ {inlineAttachedTagsList && renderTagsBadges()}
+ {!inlineAttachedTagsList && renderAddTagsButton()}
+
+ )}
+ component={
+
+
+ {errorMessage && (
+
+ Filter runs, e.g. run.learning_rate {'>'} 0.0001 and
+ run.batch_size == 32
+
+ ))}
+
+
+ )}
+
+
+
+ Error:
+
+ {errorMessage}
+
+
+
+
+ Aim Query Language is pythonic and fairly easy to get used to. If
+ you are having issues, please refer to the{' '}
+
+ docs
+ {' '}
+ for detailed usage guide and more examples.
+
+
+
+
+
+
+ X AXIS ALIGNMENT:
+
+
+
+
+ SET AXES RANGE:
+
+
+
+
+ X-axis
+
+
+
+
+ Y-axis
+
+
+
+
+ Select Axes Scale:
+
+
+
+
+
+
+
+ {loaderComponent || loaderRender()}
+
+
+
+
+ Loading...
+
+ {controlsCount ? (
+
+ {[...Array(controlsCount)].map((i, index) => (
+
+ ) : null}
+
+
+
+
+ {props.panelResizing ? (
+
+
+
+
+
+ )}
+
+
+
+
+ 0 &&
+ !props.zoom?.active &&
+ !!props.tooltip?.display
+ }
+ forceOpen={!!props.focusedState?.active}
+ chartType={props.chartType}
+ tooltipContent={props?.tooltip?.content || {}}
+ tooltipAppearance={props?.tooltip?.appearance}
+ focusedState={props.focusedState}
+ alignmentConfig={props.alignmentConfig}
+ selectOptions={props.selectOptions}
+ onChangeTooltip={props.onChangeTooltip}
+ />
+
+
+
+
+
+
+
+ {props.controls}
+
+
+
+
+ Y:
+
+
+ {isSystemMetric(name) ? formatSystemMetricName(name) : name}
+
+
+ {contextToString(context)}
+
+
+ {focusedState?.yValue}
+
+
+
+
+ X:
+
+ {getKeyByAlignment(alignmentConfig)}
+ {alignmentConfig?.type ===
+ AlignmentOptionsEnum.CUSTOM_METRIC && (
+
+ {contextToString(context)}
+
+ )}
+
+ {formatValueByAlignment({
+ xAxisTickValue: (focusedState?.xValue as number) ?? null,
+ type: alignmentConfig?.type,
+ })}
+
+
+
+
+
+
+
+ {isSystemMetric(metricName)
+ ? formatSystemMetricName(metricName)
+ : metricName ?? '--'}
+ {' '}
+ {context || null}
+
+
+ Value: {focusedState?.yValue}
+
+
+ {caption}
+
+
+ {images_name}
+
+ {contextToString(context)}
+
+
+
+ Step: {step}
+
+ Index: {index}
+
+
+
+
+
+ Y:
+
+
+ {focusedState?.yValue}
+
+
+
+
+ X:
+
+
+ {focusedState?.xValue}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ return null;
+ }
+
+ function renderTags(): React.ReactNode {
+ return focusedState?.active && run?.hash ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Run Details
+
+
+ Experiment Detail
+
+
+
+
+
+
+
+
+
+
+ {renderPopoverHeader()}
+ {isPopoverPinned && renderTags()}
+
+ {!_.isEmpty(selectedProps) || !_.isEmpty(groupConfig) ? (
+
+ {_.isEmpty(selectedProps) ? null : (
+
+
+ )}
+ {_.isEmpty(groupConfig) ? null : (
+
+
+ )}
+ {!isPopoverPinned && renderTags()}
+
+ ) : null}
+
+
+
+
+
+ Selected Fields
+
+ {Object.keys(selectedProps).map((paramKey) => (
+
+
+ {`${getValueByField(selectOptions, paramKey)}: `}
+
+
+ {formatValue(selectedProps[paramKey])}
+
+
+ ))}
+
+
+
+
+
+ ),
+ )}
+
+
+ Group Config
+
+ {Object.keys(groupConfig).map((groupConfigKey: string) =>
+ _.isEmpty(groupConfig[groupConfigKey]) ? null : (
+
+ {groupConfigKey}
+
+ {Object.keys(groupConfig[groupConfigKey]).map(
+ (item) => {
+ let val = isSystemMetric(
+ groupConfig[groupConfigKey][item],
+ )
+ ? formatSystemMetricName(
+ groupConfig[groupConfigKey][item],
+ )
+ : groupConfig[groupConfigKey][item];
+ return (
+
+ {`${item}: `}
+ {formatValue(val)}
+
+ );
+ },
+ )}
+
+
+
+
+
+
+
+
+ {code}
+
+
+
+ - Get early access to upcoming Aim features
+
+
+ - Meet other Aim users
+
+
+ - Discuss all-things MLOps and ML Research
+
+
+
+
+
+
+
+ }
+ >
+ {props.children}
+
+
+ Activity
+
+ {isLoading && _.isEmpty(data) ? (
+
+ ) : null;
+}
+
+export default React.memo(ContributionsFeed);
diff --git a/src/src/components/ContributionsFeed/FeedItem/FeedItem.d.ts b/src/src/components/ContributionsFeed/FeedItem/FeedItem.d.ts
new file mode 100644
index 00000000..a6e88082
--- /dev/null
+++ b/src/src/components/ContributionsFeed/FeedItem/FeedItem.d.ts
@@ -0,0 +1,49 @@
+export interface IFeedItemProps {
+ date: string;
+ data: Array
+
+ ) : (
+ <>
+ {Object.keys(data).map((key) => (
+
+
+ {key.split('_').join(' ')}
+
+ {Object.keys(data[key]).map((item: string) => (
+
+ ))}
+
+ {fetchedCount < totalRunsCount - archivedRunsCount! ? (
+
+ ) : null}
+
+ )}
+
+
+ );
+}
+
+export default React.memo(FeedItem);
diff --git a/src/src/components/ContributionsFeed/FeedItem/index.ts b/src/src/components/ContributionsFeed/FeedItem/index.ts
new file mode 100644
index 00000000..893e8270
--- /dev/null
+++ b/src/src/components/ContributionsFeed/FeedItem/index.ts
@@ -0,0 +1,4 @@
+import FeedItem from './FeedItem';
+
+export * from './FeedItem.d';
+export default FeedItem;
diff --git a/src/src/components/ContributionsFeed/index.ts b/src/src/components/ContributionsFeed/index.ts
new file mode 100644
index 00000000..f45894f4
--- /dev/null
+++ b/src/src/components/ContributionsFeed/index.ts
@@ -0,0 +1,5 @@
+import ContributionsFeed from './ContributionsFeed';
+
+export * from './ContributionsFeed.d';
+
+export default ContributionsFeed;
diff --git a/src/src/components/ControlPopover/ControlPopover.scss b/src/src/components/ControlPopover/ControlPopover.scss
new file mode 100644
index 00000000..0c3235fc
--- /dev/null
+++ b/src/src/components/ControlPopover/ControlPopover.scss
@@ -0,0 +1,55 @@
+@use 'src/styles/abstracts' as *;
+
+.ControlPopover {
+ box-shadow: 0 0.25rem 0.375rem rgba(144, 175, 218, 0.2);
+ border: $border-main;
+}
+
+.ControlPopover__container {
+ .MuiListItem-button {
+ color: $text-color;
+ font-size: 0.875rem;
+ padding: 0.5rem;
+ border-radius: $border-radius-sm;
+ &:hover {
+ background-color: $cuddle-20;
+ }
+ }
+ &-small {
+ .MuiListItem-button {
+ height: 28px;
+ }
+ }
+ &-medium {
+ .MuiListItem-button {
+ height: 32px;
+ }
+ }
+ &-large {
+ .MuiListItem-button {
+ height: 36px;
+ }
+ }
+ .MuiListItem-root.Mui-selected {
+ background-color: transparent;
+ color: $primary-color;
+ &:hover {
+ background-color: $cuddle-20;
+ }
+ &::after {
+ content: '✓';
+ position: absolute;
+ right: 0.5rem;
+ }
+ }
+
+ .subtitle {
+ text-transform: uppercase;
+ }
+}
+
+.ControlPopover__title {
+ padding: 0.5rem 1rem;
+ border-bottom: $border-main;
+ background: $primary-color-5;
+}
diff --git a/src/src/components/ControlPopover/ControlPopover.tsx b/src/src/components/ControlPopover/ControlPopover.tsx
new file mode 100644
index 00000000..75986a33
--- /dev/null
+++ b/src/src/components/ControlPopover/ControlPopover.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { Popover } from '@material-ui/core';
+
+import { Text } from 'components/kit';
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import IControlPopoverProps from 'types/components/ControlPopover/ControlPopover';
+
+import stopPropagation from 'utils/stopPropagation';
+
+import './ControlPopover.scss';
+
+function ControlPopover({
+ component,
+ title,
+ titleClassName = '',
+ anchor,
+ anchorOrigin = {
+ vertical: 'top',
+ horizontal: 'left',
+ },
+ transformOrigin = {
+ vertical: 'top',
+ horizontal: 'right',
+ },
+ open = true,
+ size = 'small',
+}: IControlPopoverProps): React.FunctionComponentElement
+
+ {props.date.split('_').join(' ')}
+
+
+
+ {props.data.map((item) => (
+
+
+
+ ))}
+
+
+ {item.date}
+
+
+ Started a run:
+
+
+
+
+
+
+
+ /
+
+
+
+
+
+ {item.name}
+
+
+
+ {title && (
+
+
+
+
+
+ {title}
+
+
+ )}
+
+ {typeof component === 'function'
+ ? component({ handleClose, opened: open && !!anchorEl })
+ : component}
+
+
+
+
+ {!groups && props.multiSelect && Array.isArray(props.data) && (
+
+
+ )}
+ {(groups || leftPane.length > 0) && (
+
+
+
+ }
+ checkedIcon={
+ props.data.length ===
+ Object.keys(props.selectedRows).length ? (
+
+
+
+ {leftPane.map((col, index) => (
+
+
+ props.setExcludedFields?.([
+ ...(props.excludedFields || []),
+ col.key,
+ ])
+ }
+ multiSelect={props.multiSelect}
+ paneFirstColumn={index === 0}
+ paneLastColumn={index === leftPane.length - 1}
+ rowHeightMode={props.rowHeightMode}
+ moveColumn={(dir) =>
+ moveColumn(col.key, 'left', index, dir)
+ }
+ sortable={
+ col.sortableKey &&
+ props.sortFields.findIndex(
+ (f) => f[0] === col.sortableKey,
+ ) === -1
+ }
+ onRowHover={props.onRowHover}
+ onRowClick={props.onRowClick}
+ columnOptions={col.columnOptions}
+ selectedRows={props.selectedRows}
+ onRowSelect={props.onRowSelect}
+ listWindow={props.listWindow}
+ />
+
+ ))}
+
+ )}
+
+ {middlePaneWindow?.map((col) => {
+ let index = col.colIndex;
+ return (
+
+
+ props.setExcludedFields?.([
+ ...(props.excludedFields || []),
+ col.key,
+ ])
+ }
+ paneFirstColumn={index === 0}
+ paneLastColumn={index === middlePane.length - 1}
+ moveColumn={(dir) =>
+ moveColumn(col.key, 'middle', index, dir)
+ }
+ sortable={
+ col.sortableKey &&
+ props.sortFields.findIndex(
+ (f) => f[0] === col.sortableKey,
+ ) === -1
+ }
+ rowHeightMode={props.rowHeightMode}
+ onRowHover={props.onRowHover}
+ onRowClick={props.onRowClick}
+ columnOptions={col.columnOptions}
+ selectedRows={props.selectedRows}
+ setColWidth={(width) =>
+ setColWidths((cW) => {
+ return cW?.[index] === width
+ ? cW
+ : { ...cW, [index]: width };
+ })
+ }
+ colLeft={colLefts[index] ?? null}
+ listWindow={props.listWindow}
+ />
+
+ );
+ })}
+
+ {rightPane.length > 0 && (
+
+ {rightPane.map((col, index) => (
+
+
+ props.setExcludedFields?.([
+ ...(props.excludedFields || []),
+ col.key,
+ ])
+ }
+ paneFirstColumn={index === 0}
+ paneLastColumn={index === rightPane.length - 1}
+ moveColumn={(dir) =>
+ moveColumn(col.key, 'right', index, dir)
+ }
+ sortable={
+ col.sortableKey &&
+ props.sortFields.findIndex(
+ (f) => f[0] === col.sortableKey,
+ ) === -1
+ }
+ onRowHover={props.onRowHover}
+ onRowClick={props.onRowClick}
+ columnOptions={col.columnOptions}
+ selectedRows={props.selectedRows}
+ listWindow={props.listWindow}
+ />
+
+ ))}
+
+ )}
+
+ {isConfigColumn || placeholder ? (
+ <>{multiSelect && item}
+ ) : (
+
+
+ {typeof item === 'object' && item?.hasOwnProperty('component')
+ ?
+ )}
+
+ {topHeader && (
+
+ {col.key === 'selection' ? (
+
+
+ }
+ checkedIcon={
+
+ onRowHover(item) : undefined
+ }
+ onRowClick={
+ onRowClick ? () => onRowClick(item) : undefined
+ }
+ setColumnWidth={fixColumnWidth}
+ />
+ )}
+ | |
+ )
+ );
+ })}
+
+
+ {showTopHeaderContent && col.topHeader && (
+
+ {col.topHeader}
+
+ )}
+
+ )}
+
+ {multiSelect && col.key === '#' && (
+ }
+ className='Table__column__selectCheckbox'
+ checkedIcon={
+ dataLength === Object.keys(selectedRows)?.length ? (
+
+
+ {firstColumn ? headerMeta : null}
+ {col.content}
+
+ {!noColumnActions &&
+ col.key !== 'actions' &&
+ col.key !== '#' &&
+ col.key !== 'selection' && (
+ <>
+ (
+
+
+ )}
+ component={
+
+ {groups
+ ? Object.keys(data).map((groupKey) => {
+ let top =
+ ROW_CELL_SIZE_CONFIG[rowHeightMode]?.groupMargin ??
+ ROW_CELL_SIZE_CONFIG[RowHeightSize.md].groupMargin;
+ let height = rowHeightMode;
+ for (let key in data) {
+ if (key === groupKey) {
+ if (expanded[key]) {
+ height += data[key].items.length * rowHeightMode;
+ }
+ break;
+ }
+ top +=
+ (ROW_CELL_SIZE_CONFIG[rowHeightMode]?.groupMargin ??
+ ROW_CELL_SIZE_CONFIG[RowHeightSize.md].groupMargin) +
+ rowHeightMode +
+ 1;
+ if (expanded[key]) {
+ top += data[key].items.length * rowHeightMode;
+ }
+ }
+ const isVisible =
+ (top >= listWindow.top - rowHeightMode * 20 &&
+ top <=
+ listWindow.top + listWindow.height + rowHeightMode * 20) ||
+ (top < listWindow.top - rowHeightMode * 20 &&
+ top + height >= listWindow.top);
+
+ if (isVisible && firstVisibleGroupTop === null) {
+ firstVisibleGroupTop = top;
+ } else {
+ top = null;
+ }
+ const groupColor = data[groupKey].data.meta.color;
+
+ return (
+ isVisible && (
+
+
+
+
+ {!_.isEmpty(colorScaleRange) &&
+ onToggleColumnsColorScales && (
+
+ )}
+ {columnOptions && (
+ <>
+ {columnOptions?.map((option) => (
+
+ ))}
+
+ }
+ />
+
+
+ )}
+
+ {col.key === '#' ? (
+ expand(groupKey),
+ },
+ }
+ : {
+ content: data[groupKey].data[col.key],
+ props: {
+ onClick: (e) => expand(groupKey),
+ },
+ }
+ }
+ className={classNames(
+ 'Table__group__header__cell expandable',
+ {
+ expanded: expanded[groupKey],
+ },
+ )}
+ setColumnWidth={fixColumnWidth}
+ />
+ )}
+ {expanded[groupKey] && (
+ <>
+ {data[groupKey]?.items?.map((item, i) => {
+ let absoluteTop =
+ (ROW_CELL_SIZE_CONFIG[rowHeightMode]?.groupMargin ??
+ ROW_CELL_SIZE_CONFIG[RowHeightSize.md]
+ .groupMargin) + rowHeightMode;
+ let top = 0;
+ for (let key in data) {
+ if (key === groupKey) {
+ break;
+ }
+ absoluteTop +=
+ (ROW_CELL_SIZE_CONFIG[rowHeightMode]
+ ?.groupMargin ??
+ ROW_CELL_SIZE_CONFIG[RowHeightSize.md]
+ .groupMargin) + rowHeightMode;
+ if (expanded[key]) {
+ absoluteTop +=
+ data[key].items.length * rowHeightMode;
+ }
+ }
+ absoluteTop += i * rowHeightMode;
+ top = i * rowHeightMode;
+ const isVisible =
+ absoluteTop >=
+ listWindow.top - rowHeightMode * 20 &&
+ absoluteTop <=
+ listWindow.top +
+ listWindow.height +
+ rowHeightMode * 20;
+ if (isVisible && firstVisibleCellTop === null) {
+ firstVisibleCellTop = absoluteTop;
+ }
+
+ return (
+ isVisible && (
+
+
+
+ }
+ checkedIcon={
+
+ |
+ )
+ );
+ })}
+
+ )}
+ |
+ )
+ );
+ })
+ : data.map((item) => {
+ const top = item.index * rowHeightMode;
+ const isVisible =
+ top >= listWindow.top - rowHeightMode * 20 &&
+ top <= listWindow.top + listWindow.height + rowHeightMode * 20;
+ if (isVisible && firstVisibleCellTop === null) {
+ firstVisibleCellTop = top;
+ }
+
+ return (
+ isVisible && (
+
+
+ ) : col.key === 'actions' ? (
+
+
+ ) : (
+ expand(groupKey)}>
+
+ {multiSelect && (
+ }
+ className='Table__column__selectCheckbox configCheckbox'
+ checkedIcon={
+ data.length === groupSelectedRows?.length ? (
+
+ (
+ 1 ? 's' : ''
+ } in the group, grouped by ${configData.map(
+ (item) => ` ${item.name}`,
+ )}`}
+ >
+
+ )}
+ component={
+
+ {config.chartIndex}
+
+
+ )}
+ {config.dasharray !== null && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {(expanded[groupKey] ||
+ groupKeys.some((key) => !!expanded[key])) && (
+
+ )}
+ {(!expanded[groupKey] ||
+ groupKeys.some((key) => !expanded[key])) && (
+
+ )}
+
+ )}
+ />
+ {
+ evt.stopPropagation();
+ setOpened(!opened);
+ }}
+ >
+ {typeof props.target === 'function'
+ ? props.target(opened)
+ : props.target}
+
+ {opened &&
+ ReactDOM.createPortal(
+ evt.stopPropagation()}
+ onBlur={(evt) => {
+ const currentTarget = evt.currentTarget;
+ if (opened) {
+ window.setTimeout(() => {
+ if (!currentTarget.contains(document.activeElement)) {
+ setOpened(false);
+ }
+ }, 200);
+ }
+ }}
+ >
+ {typeof props.content === 'function'
+ ? props.content(opened, setOpened)
+ : props.content}
+
,
+ portalRef.current,
+ )}
+
+ `${items[value]}`}
+ value={depth}
+ onChange={(e, value) => onChange(value as number, index)}
+ step={null}
+ marks={sliderMarks}
+ min={0}
+ max={maxDepthValue}
+ prevIconNode={
+
+ }
+ nextIconNode={
+
+ }
+ />
+
+ Something went wrong.
; + } + + static getDerivedStateFromError(error: Error): IErrorBoundaryState { + return { error }; + } + + componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { + // Log error to reporting servie + } + + render(): React.ReactNode { + if (this.state.error) { + return
+
+
+
+ );
+};
+
+export default ExperimentNameBox;
diff --git a/src/src/components/ExperimentNameBox/index.ts b/src/src/components/ExperimentNameBox/index.ts
new file mode 100644
index 00000000..312bdb15
--- /dev/null
+++ b/src/src/components/ExperimentNameBox/index.ts
@@ -0,0 +1,5 @@
+import ExperimentNameBox from './ExperimentNameBox';
+
+export * from './ExperimentNameBox.d';
+
+export default ExperimentNameBox;
diff --git a/src/src/components/ExportPreview/ExportPreview.d.ts b/src/src/components/ExportPreview/ExportPreview.d.ts
new file mode 100644
index 00000000..a39845d6
--- /dev/null
+++ b/src/src/components/ExportPreview/ExportPreview.d.ts
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export interface IExportPreviewProps {
+ openModal: boolean;
+ onToggleExportPreview: () => void;
+ withDynamicDimensions?: boolean;
+ explorerPage?: 'metrics' | 'scatters';
+ children?: React.ReactNode;
+ appendElement?: React.ReactNode;
+}
+
+export interface IPreviewBounds {
+ max: {
+ width: number;
+ height: number;
+ };
+ min: {
+ width: number;
+ height: number;
+ };
+}
diff --git a/src/src/components/ExportPreview/ExportPreview.scss b/src/src/components/ExportPreview/ExportPreview.scss
new file mode 100644
index 00000000..0c3d742e
--- /dev/null
+++ b/src/src/components/ExportPreview/ExportPreview.scss
@@ -0,0 +1,126 @@
+@use 'src/styles/abstracts' as *;
+
+.ExportPreview {
+ .ChartGrid, .ChartLegends {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ border: none;
+ outline: none;
+ }
+ .ChartLegends {
+ &__container {
+ overflow: visible;
+ }
+ }
+ &__modal {
+ & > .Modal {
+ overflow: hidden;
+ & > .Modal__content {
+ overflow: hidden;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ margin-top: 1rem;
+ }
+ }
+ & .Modal__header {
+ justify-content: center;
+ }
+ }
+ &__container {
+ width: 80vw;
+ height: 62vh;
+ overflow: auto;
+ margin: toRem(1px);
+ border-radius: $border-radius-sm;
+ box-shadow: 0 0 0 toRem(1px) $cuddle;
+ display: flex;
+ &__grid {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ &__appendElement {
+ height: 100%;
+ width: 100%;
+ }
+ }
+ &__controls {
+ display: flex;
+ align-items: center;
+ margin-top: $space-xs;
+ flex-direction: column;
+ @include mq(xl) {
+ flex-direction: row;
+ }
+ &__dimension {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ white-space: nowrap;
+ width: 100%;
+ margin-top: $space-unit;
+ &__width {
+ margin-right: $space-sm;
+ display: flex;
+ align-items: center;
+ flex: 1;
+ &__slider {
+ width: 100%;
+ margin: 0 $space-sm 0 $space-xs;
+ }
+ &__input {
+ & > .MuiInputBase-root {
+ font-size: 0.75rem;
+ }
+ }
+ .InputWrapper {
+ width: toRem(85px);
+ min-width: toRem(85px);
+ }
+ }
+ &__height {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ &__slider {
+ width: 100%;
+ margin: 0 $space-sm 0 $space-xs;
+ }
+ &__input {
+ & > .MuiInputBase-root {
+ font-size: 0.75rem;
+ }
+ }
+ .InputWrapper {
+ width: toRem(85px);
+ min-width: toRem(85px);
+ }
+ }
+ }
+ &__additional {
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+ margin-top: $space-unit;
+ @include mq(xl) {
+ margin-left: $space-sm;
+ }
+ &__formatDropdown {
+ width: toRem(97px);
+ display: inline-block;
+ }
+ &__nameInput{
+ display: inline-block;
+ margin-right: $space-xs;
+ & .MuiTextField-root {
+ width: toRem(224px);
+ }
+ }
+ }
+ }
+}
diff --git a/src/src/components/ExportPreview/ExportPreview.tsx b/src/src/components/ExportPreview/ExportPreview.tsx
new file mode 100644
index 00000000..2f6abaeb
--- /dev/null
+++ b/src/src/components/ExportPreview/ExportPreview.tsx
@@ -0,0 +1,429 @@
+import React from 'react';
+import moment from 'moment';
+
+import { Dropdown, InputWrapper, Modal, Slider, Text } from 'components/kit';
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
+import { DATE_EXPORTING_FORMAT } from 'config/dates/dates';
+
+import * as analytics from 'services/analytics';
+
+import { downloadLink, getSVGString, imgSource2Image } from 'utils/helper';
+
+import { FORMAT_ENUM, PREVIEW_BOUNDS, PREVIEW_MODAL_DIMENSION } from './config';
+
+import { IExportPreviewProps } from '.';
+
+import './ExportPreview.scss';
+
+function ExportPreview({
+ openModal,
+ onToggleExportPreview,
+ withDynamicDimensions = false,
+ explorerPage = 'metrics',
+ children,
+ appendElement = null,
+}: IExportPreviewProps): React.FunctionComponentElement
+
+ {experimentName}
+
+
+
+
+
+
+ {!!appendElement && (
+
+ {children}
+
+
+ {appendElement}
+
+ )}
+
+ {withDynamicDimensions && (
+
+
+
+ )}
+
+ Chart Width
+ ,
+ v: number | number[],
+ ) => {
+ onDimensionChange('width', v as number);
+ }}
+ />
+ {
+ onDimensionChange('width', value, metadata);
+ setIsImageWidthValid(metadata.isValid);
+ }}
+ validationPatterns={validationPatterns(
+ PREVIEW_BOUNDS.min.width,
+ PREVIEW_BOUNDS.max.width,
+ )}
+ />
+
+
+ Single Chart Height
+ ,
+ v: number | number[],
+ ) => {
+ onDimensionChange('height', v as number);
+ }}
+ />
+ {
+ onDimensionChange('height', value, metadata);
+ setIsImageHeightValid(metadata.isValid);
+ }}
+ validationPatterns={validationPatterns(
+ PREVIEW_BOUNDS.min.height,
+ PREVIEW_BOUNDS.max.height,
+ )}
+ />
+
+
+ {
+ setFileName(value);
+ }}
+ />
+ val && setFormat(val.value as FORMAT_ENUM)}
+ value={format}
+ options={formatOptions}
+ onMenuOpen={() => setOpenFormatDropdown(true)}
+ onMenuClose={() => setOpenFormatDropdown(false)}
+ open={openFormatDropdown}
+ />
+
+
+ {configData.map((item: any) => {
+ let value = isSystemMetric(item.value)
+ ? formatValue(formatSystemMetricName(item.value))
+ : formatValue(item.value);
+
+ return (
+
+
+
+ {item.name}:
+
+
+ {value}
+
+
+ );
+ })}
+
+
+
+
+ Group by
+
+
+
+ {groupingPopovers.map(
+ ({ title, inputLabel, groupName, AdvancedComponent }) => {
+ return (
+
+ ) => {
+ if (!isDisabled) {
+ onAnchorClick(e);
+ }
+ }}
+ className={classNames('GroupingItem', {
+ isDisabled: isDisabled,
+ })}
+ >
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ {inputLabel ?? `Select fields for grouping by ${groupName}`}
+
+ option.group}
+ getOptionLabel={(option) => option.label}
+ getOptionSelected={(option, value) =>
+ option.value === value.value
+ }
+ renderInput={(params: any) => (
+ {
+ setInputValue(e.target?.value);
+ },
+ }}
+ className='TextField__OutLined__Small'
+ variant='outlined'
+ placeholder='Select fields'
+ />
+ )}
+ renderTags={(value, getTagProps) => (
+
+ {/* //TODO: reverse mode
+
+ {value.map((selected, i) => (
+
+ )}
+ renderOption={(option, { selected }) => (
+
+
+ {option.label}
+
+
+ )}
+ />
+
+
+ select grouping mode
+
+
*/}
+ {advancedComponent && (
+
+ {/* //ToDo reverse mode
+
+
+ Advanced options
+
+
+ */}
+ {advancedComponent}
+ {/*
+ */}
+
+
+ {+endDate < +indexToDate(index) ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+ );
+}
+
+export default HeatMap;
diff --git a/src/src/components/HeatMap/HeatMapStyle.scss b/src/src/components/HeatMap/HeatMapStyle.scss
new file mode 100644
index 00000000..5d506f7d
--- /dev/null
+++ b/src/src/components/HeatMap/HeatMapStyle.scss
@@ -0,0 +1,103 @@
+@use 'src/styles/abstracts' as *;
+
+.CalendarHeatmap__map {
+ display: grid;
+ grid-template-columns: 1em 1fr;
+ grid-template-rows: 20px 1fr;
+}
+
+.CalendarHeatmap__map__axis {
+ color: var(--grey-light);
+
+ &.CalendarHeatmap__map__axis--x {
+ font-size: 12px;
+ font-weight: $font-500;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+
+ &.CalendarHeatmap__map__axis--y {
+ font-size: 9px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ position: sticky;
+ left: 0;
+ background-color: $white;
+ }
+}
+
+.CalendarHeatmap__map__grid {
+ display: grid;
+ grid-auto-flow: column;
+ user-select: none;
+}
+
+.CalendarHeatmap__cell__wrapper {
+ width: 100%;
+ height: 100%;
+
+ .Tooltip__container {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.CalendarHeatmap__cell {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ border-radius: 3px;
+ transition: box-shadow 50ms ease;
+ cursor: pointer;
+
+ &.CalendarHeatmap__cell--dummy {
+ opacity: 0;
+ pointer-events: none;
+ user-select: none;
+ cursor: auto;
+ }
+
+ &.CalendarHeatmap__cell--scale-0 {
+ background: $pico-10;
+ cursor: default;
+ }
+
+ &.CalendarHeatmap__cell--scale-1 {
+ background: #abcaf6;
+ }
+
+ &.CalendarHeatmap__cell--scale-2 {
+ background: #77a8ef;
+ }
+
+ &.CalendarHeatmap__cell--scale-3 {
+ background: #3578e6;
+ }
+
+ &.CalendarHeatmap__cell--scale-4 {
+ background: #225ae0;
+ }
+}
+
+.CalendarHeatmap__cell__info {
+ margin-top: 1em;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ .CalendarHeatmap__cell {
+ cursor: default;
+ &__wrapper {
+ margin-right: 0.25em;
+ }
+ }
+ span {
+ line-height: 12px;
+ margin-right: 0.75em;
+ &:last-child {
+ margin-left: 0.5em;
+ }
+ }
+}
diff --git a/src/src/components/HighPlot/HighPlot.scss b/src/src/components/HighPlot/HighPlot.scss
new file mode 100644
index 00000000..e24907af
--- /dev/null
+++ b/src/src/components/HighPlot/HighPlot.scss
@@ -0,0 +1,148 @@
+@use 'src/styles/abstracts' as *;
+
+.HighPlot__container {
+ background-color: white;
+ height: 100%;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+ user-select: none;
+ min-width: toRem(150px);
+ min-height: toRem(150px);
+ .Axes {
+ .tick text {
+ display: none;
+ }
+ .yAxisLabel {
+ text-align: right;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .xAxisLabel__container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &.left {
+ justify-content: flex-start;
+ }
+ &.right {
+ justify-content: flex-end;
+ }
+
+ .xAxisLabel {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: $text-sm;
+ }
+
+ &::before {
+ content: '';
+ display: inline-block;
+ flex-shrink: 0;
+ width: 6px;
+ height: 6px;
+ background-color: #2bc784;
+ border-radius: $border-radius-circle;
+ margin: 4px 5px 4px 0;
+ }
+
+ &__metric {
+ &::before {
+ background-color: #1473e6;
+ }
+ }
+ }
+ .axisBrush {
+ .handle {
+ fill: $cuddle-110;
+ }
+ .selection {
+ fill: $pico-50;
+ stroke: none;
+ }
+ }
+ }
+ &.backgroundRect {
+ cursor: crosshair;
+ }
+ &.zoomMode rect {
+ cursor: zoom-in;
+ }
+ .HoverCircle {
+ cursor: pointer;
+ opacity: 1;
+ stroke-width: 3;
+ fill: white;
+ border-radius: 50%;
+ paint-order: stroke;
+ /* on click */
+ &.focus {
+ stroke-width: 4;
+ clip-path: unset;
+ &__shadow {
+ stroke-width: 12;
+ }
+ }
+ /* on hover */
+ &.active {
+ stroke-width: 5;
+ }
+ }
+ .Attributes {
+ &.highlight > .HoverCircle:not(.active):not(.focus) {
+ opacity: 0.5;
+ }
+ }
+ .ChartMouseValue {
+ position: absolute;
+ box-sizing: border-box;
+ padding: $space-xxs $space-xs;
+ background-color: $primary-bg;
+ border: 1px solid $primary-light;
+ color: $primary-dark;
+ font-size: 10px;
+ font-weight: $font-400;
+ white-space: nowrap;
+ }
+ .ChartMouseValueXAxis {
+ transform: translateX(-50%);
+ border-radius: 0 0 6px 6px;
+ border-top: none;
+ overflow: hidden;
+ }
+ .ChartMouseValueYAxis {
+ transform: translateY(-50%);
+ border-radius: 6px 0 0 6px;
+ border-right: none;
+ overflow: hidden;
+ box-shadow: inset -8px 0 5px -6px #3b5896; /* var(--primary);*/
+ }
+ .Lines {
+ overflow: hidden;
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+ &.optimizeRendering {
+ shape-rendering: optimizeSpeed;
+ }
+ }
+ &.highlight > .Line:not(.active):not(.highlighted) {
+ stroke-width: 1.5;
+ opacity: 0.2;
+ }
+ }
+ .Line {
+ stroke-width: 1.5;
+ opacity: 0.3;
+ &.active {
+ opacity: 1;
+ stroke-width: 3;
+ }
+ &.highlighted {
+ opacity: 1;
+ stroke-width: 2;
+ }
+ }
+}
diff --git a/src/src/components/HighPlot/HighPlot.tsx b/src/src/components/HighPlot/HighPlot.tsx
new file mode 100644
index 00000000..7f5f5dd5
--- /dev/null
+++ b/src/src/components/HighPlot/HighPlot.tsx
@@ -0,0 +1,275 @@
+import React from 'react';
+import _ from 'lodash-es';
+import { useResizeObserver } from 'hooks';
+
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import { RENDER_LINES_OPTIMIZED_LIMIT } from 'config/charts';
+
+import { IFocusedState } from 'types/services/models/metrics/metricsAppModel';
+import { IHighPlotProps } from 'types/components/HighPlot/HighPlot';
+
+import {
+ clearArea,
+ drawParallelAxes,
+ drawParallelLines,
+ drawParallelHoverAttributes,
+ drawParallelAxesBrush,
+ drawParallelColorIndicator,
+ drawArea,
+} from 'utils/d3';
+
+import './HighPlot.scss';
+
+const HighPlot = React.forwardRef(function HighPlot(
+ props: IHighPlotProps,
+ ref,
+): React.FunctionComponentElement
+
+
+
+ {orderedMonths.slice(0, 10).map((m, i) => (
+
+
+ {m}
+
+ ))}
+
+ {weekDays.map((d, i) => (
+
+
+ {d}
+
+ ))}
+
+ {[...Array(diffDays).keys()].map((index) => renderCell(index))}
+
+
+
+ Less
+
+ {cellScales.map((scale) => (
+
+ More
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default React.memo(Illustration);
diff --git a/src/src/components/Illustration/config.tsx b/src/src/components/Illustration/config.tsx
new file mode 100644
index 00000000..dbda5bd6
--- /dev/null
+++ b/src/src/components/Illustration/config.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { ReactComponent as EmptyBookmarks } from 'assets/illustrations/emptyBookmarks.svg';
+import { ReactComponent as EmptySearch } from 'assets/illustrations/emptySearch.svg';
+import { ReactComponent as ExploreData } from 'assets/illustrations/exploreData.svg';
+import { ReactComponent as WrongSearch } from 'assets/illustrations/wrongSearch.svg';
+
+import { DOCUMENTATIONS } from 'config/references';
+
+import { PipelineStatusEnum } from 'modules/core/engine/types';
+
+import { IllustrationType } from '.';
+
+const ILLUSTRATION_TYPES: Record
+ {showImage ? (
+
+ {content}
+
+
+
+ {image || ILLUSTRATION_LIST[type]}
+
+ ) : null}
+ + Look up + + search docs + + to learn more. + + ); + const Failed = 'Incorrect Query'; + const Insufficient_Resources = "You don't have any tracked data"; + const Empty = 'No Results'; + const Empty_Bookmarks = "You don't have any saved bookmark"; + + const CONTENT = { + [ILLUSTRATION_TYPES.Never_Executed]: Never_Executed, + [ILLUSTRATION_TYPES.Failed]: Failed, + [ILLUSTRATION_TYPES.Insufficient_Resources]: Insufficient_Resources, + [ILLUSTRATION_TYPES.Empty]: Empty, + [ILLUSTRATION_TYPES.Empty_Bookmarks]: Empty_Bookmarks, + }; + return CONTENT[type] || null; +} + +export { ILLUSTRATION_TYPES, ILLUSTRATION_LIST, getDefaultIllustrationContent }; diff --git a/src/src/components/Illustration/index.ts b/src/src/components/Illustration/index.ts new file mode 100644 index 00000000..5ce4f37c --- /dev/null +++ b/src/src/components/Illustration/index.ts @@ -0,0 +1,6 @@ +import Illustration from './Illustration'; + +export * from './Illustration.d'; +export * from './config'; + +export default Illustration; diff --git a/src/src/components/IllustrationBlock/IllustrationBlock.scss b/src/src/components/IllustrationBlock/IllustrationBlock.scss new file mode 100644 index 00000000..c51c982e --- /dev/null +++ b/src/src/components/IllustrationBlock/IllustrationBlock.scss @@ -0,0 +1,105 @@ +@use 'src/styles/abstracts' as *; + +.IllustrationBlock { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + overflow: auto; + flex-direction: column; + + &__container { + height: fit-content; + overflow: hidden; + padding-bottom: 6 * $space-unit; + } + &__title { + font-size: $text-xl; + text-align: center; + .qlAnchor { + color: $primary-color; + text-decoration: none; + margin: 0 $space-xxxs; + &:hover { + text-decoration: underline; + } + } + } + &__hidden { + display: none; + } + &__content { + font-size: $text-xl; + text-align: center; + } + &__small { + &__title { + font-weight: $font-500; + font-size: $text-md; + } + &__content { + font-weight: $font-500; + font-size: $text-md; + } + &__img { + padding: $space-xs; + img { + width: toRem(50px); + height: toRem(57px); + margin: 0 auto; + display: block; + } + } + } + &__medium { + &__title { + font-weight: $font-500; + font-size: $text-md; + } + &__content { + font-weight: $font-500; + font-size: $text-md; + } + &__img { + padding: $space-sm; + img { + width: toRem(120px); + margin: 0 auto; + display: block; + } + } + } + &__large { + &__title { + font-weight: $font-500; + font-size: $text-lg; + } + &__content { + font-weight: $font-500; + font-size: $text-lg; + } + &__img { + padding: $space-sm; + img { + width: 14.5rem; + margin: 0 auto; + display: block; + } + } + } + &__xLarge { + &__title { + font-weight: $font-500; + margin-bottom: 1rem; + } + &__img { + padding: $space-unit; + img { + width: 19.5rem; + margin: 0 auto; + display: block; + } + } + } +} diff --git a/src/src/components/IllustrationBlock/IllustrationBlock.tsx b/src/src/components/IllustrationBlock/IllustrationBlock.tsx new file mode 100644 index 00000000..fe10847e --- /dev/null +++ b/src/src/components/IllustrationBlock/IllustrationBlock.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import classNames from 'classnames'; + +import { Text } from 'components/kit'; + +import { + IllustrationsEnum, + Illustration_Title_Config, + Illustration_Content_Config, + Illustrations_List, +} from 'config/illustrationConfig/illustrationConfig'; + +import { IIllustrationBlockProps } from 'types/components/IllustrationBlock/IllustrationBlock'; + +import './IllustrationBlock.scss'; + +function IllustrationBlock({ + title, + content, + image, + page = 'metrics', + type = IllustrationsEnum.ExploreData, + className = '', + size = 'small', + showImage = true, +}: IIllustrationBlockProps): React.FunctionComponentElement
+
+ {content}
+
+ ) : (
+ Illustration_Content_Config[page][type]
+ )}
+
+ );
+}
+
+export default React.memo(IllustrationBlock);
diff --git a/src/src/components/ImageFullViewPopover/ImageFullViewPopover.tsx b/src/src/components/ImageFullViewPopover/ImageFullViewPopover.tsx
new file mode 100644
index 00000000..cbdb4b90
--- /dev/null
+++ b/src/src/components/ImageFullViewPopover/ImageFullViewPopover.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+import PopoverContent from 'components/ChartPanel/PopoverContent/PopoverContent';
+import { Button, Icon } from 'components/kit';
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import blobsURIModel from 'services/models/media/blobsURIModel';
+
+import { ChartTypeEnum } from 'utils/d3';
+
+import { IImageFullViewPopoverProps } from './types.d';
+
+import './styles.scss';
+
+function ImageFullViewPopover({
+ imageRendering,
+ imageData,
+ tooltipContent,
+ handleClose,
+ selectOptions,
+ onRunsTagsChange,
+}: IImageFullViewPopoverProps): React.FunctionComponentElement
+ {showImage ? (
+
+ {title || Illustration_Title_Config[page][type]}
+
+
+
+ {content ? (
+
+ {image || (
+ 
+ )}
+
+ ) : null}
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Align Images by:
+
+
+
+ setOpen(true)}
+ onMenuClose={() => setOpen(false)}
+ open={open}
+ withPortal
+ />
+
+
+
+
+
+ Scale (Relative to window size):
+
+
+ {`${sizeValue}%`}
+
+
+
+ {IMAGES_SLIDER_PROPS.min}%
+ `${val}`}
+ value={sizeValue}
+ disabled={isOriginalAlignment}
+ onChange={onSizeValueChange as any}
+ step={IMAGES_SLIDER_PROPS.step}
+ max={IMAGES_SLIDER_PROPS.max}
+ min={IMAGES_SLIDER_PROPS.min}
+ />
+ {IMAGES_SLIDER_PROPS.max}%
+
+
+
+ Image Rendering
+
+
+
+
+
+
+
+ Live Update:
+
+ {
+ props.onLiveUpdateConfigChange({ enabled: !props.enabled });
+ }}
+ size='small'
+ color='primary'
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {blobData ? (
+ 
+ ) : (
+
+ {data.caption}
+
+
+
+
+
+ )}
+ -
+ {MediaBoxMemoized}
+
+
+ Release to resize
+
+
+ ) : (
+ <>
+
+ {!_.isEmpty(data) ? (
+
+
+ )}
+
+
+
+
+ )}
+ {controls && (
+
+
+ )}
+
+ ) : (
+
+
+
+
+ {tooltipType && (
+
+ {controls}
+
+ -
+ {MediaGroupedList}
+
+ {path.slice(2).map((key: string, i: number) => (
+
+
+
+ ))}
+
+ 2 ? 'withDash' : ''}`}
+ >
+ {path.length > 1 && (
+
+ (
+
+
+
+
+ {pathKey}
+
+ =
+
+ {currentValue}
+
+
+
+ {renderStacking && (
+
+ )}
+ {renderStacking && (
+
+
+
+ )}
+
+
+
+
+ {title}
+
+
+
+
+
+
+ onChange(e, 'name')}
+ error={!!(touched.name && errors.name)}
+ helperText={touched.name && errors.name}
+ label='Name'
+ />
+
+
+ onChange(e, 'description')}
+ error={!!(touched.description && errors.description)}
+ helperText={touched.description && errors.description}
+ />
+
+
+
+
+
+ ) : null}
+
+ {data.map(({ id, severity, messages }) => (
+
+ handleClose(+id)}
+ variant='outlined'
+ severity={severity}
+ iconMapping={{
+ success:
+
+ ))}
+
+
+
+ + {severity} +
+ {messages.map((message: string, i: number) => { + return message ? ( ++ {message} +
+ ) : null; + })} +
+
+ ) : null;
+}
+
+export default React.memo(ProgressBar);
diff --git a/src/src/components/ProjectWrapper/ProjectWrapper.tsx b/src/src/components/ProjectWrapper/ProjectWrapper.tsx
new file mode 100644
index 00000000..19493f1e
--- /dev/null
+++ b/src/src/components/ProjectWrapper/ProjectWrapper.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import projectsModel from 'services/models/projects/projectsModel';
+
+const projectDataRequestRef = projectsModel.getProjectsData();
+projectDataRequestRef.call();
+const pinnedSequencesRequestRef = projectsModel.getPinnedSequences();
+pinnedSequencesRequestRef.call();
+
+function ProjectWrapper() {
+ React.useEffect(() => {
+ return () => {
+ projectDataRequestRef.abort();
+ pinnedSequencesRequestRef.abort();
+ };
+ }, []);
+
+ return null;
+}
+
+export default ProjectWrapper;
diff --git a/src/src/components/RangePanel/RangePanel.d.ts b/src/src/components/RangePanel/RangePanel.d.ts
new file mode 100644
index 00000000..68640a25
--- /dev/null
+++ b/src/src/components/RangePanel/RangePanel.d.ts
@@ -0,0 +1,33 @@
+import { IValidationMetadata, IValidationPatterns } from 'components/kit/Input';
+
+export interface IRangeSliderWithInputItem {
+ sliderName: string;
+ inputName: string;
+ sliderTitle: string;
+ inputTitle: string;
+ sliderTitleTooltip: string;
+ inputTitleTooltip: string;
+ /**
+ * min, max values
+ */
+ rangeEndpoints: [number, number];
+ selectedRangeValue: [number, number];
+ inputValue: number;
+ sliderType: 'single' | 'range'; // This type is same as SliderWithInput component sliderType prop type.
+ inputValidationPatterns?: IValidationPatterns;
+ infoPropertyName?: string;
+}
+
+export type RangeSliderData = IRangeSliderWithInputItem[];
+
+export interface IRangeSliderPanelProps {
+ items?: RangeSliderData;
+ onApply: () => void;
+ onInputChange: (
+ name: string,
+ value: number,
+ metadata?: IValidationMetadata,
+ ) => void;
+ onRangeSliderChange: (name: string, newValue: number[] | number) => void;
+ applyButtonDisabled: boolean;
+}
diff --git a/src/src/components/RangePanel/RangePanel.scss b/src/src/components/RangePanel/RangePanel.scss
new file mode 100644
index 00000000..42857658
--- /dev/null
+++ b/src/src/components/RangePanel/RangePanel.scss
@@ -0,0 +1,50 @@
+@use 'src/styles/abstracts' as *;
+
+.RangePanel {
+ display: flex;
+ align-items: center;
+ height: 3rem;
+ width: 100%;
+ justify-content: center;
+ background: $white;
+ border-top: $border-main;
+ border-bottom-right-radius: toRem(6px);
+ .RangePanelContainer {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ width: 100%;
+ max-width: 85rem;
+ padding: 0 2.125rem;
+ justify-content: center;
+ .ApplyButtonContainer {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ .ApplyButton {
+ height: 1.5rem !important;
+ width: 5.125rem;
+ }
+ }
+
+ .VerticalDivider {
+ width: 0.0625rem;
+ height: 1.5rem;
+ background: $primary-color-10;
+ margin-right: 2.75rem;
+ margin-left: 2.75rem;
+ }
+ .InfoMassageBox {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ i {
+ margin-right: $space-sm;
+ }
+ .InfoMessageBoldText {
+ margin: 0 toRem(3px);
+ }
+ }
+ }
+}
diff --git a/src/src/components/RangePanel/RangePanel.tsx b/src/src/components/RangePanel/RangePanel.tsx
new file mode 100644
index 00000000..206f4e79
--- /dev/null
+++ b/src/src/components/RangePanel/RangePanel.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import _ from 'lodash-es';
+
+import SliderWithInput from 'components/SliderWithInput';
+import { Button, Icon, Text } from 'components/kit';
+import { IValidationMetadata } from 'components/kit/Input';
+
+import { IRangeSliderPanelProps } from './RangePanel.d';
+
+import './RangePanel.scss';
+
+function RangePanel({
+ onApply,
+ applyButtonDisabled,
+ onRangeSliderChange,
+ onInputChange,
+ items,
+}: IRangeSliderPanelProps) {
+ return (
+
+ );
+}
+
+RangePanel.displayName = 'RangePanel';
+
+export default React.memo
+
+ {title}
+
+
+
+
+
+ {trackedRuns !== 0 && (
+
+
+ {checked} of {trackedRuns} checked
+
+
+ {matched} matched run(s)
+
+
+ )}
+
+ {hide
+ ? null
+ : resizing && resizingFallback
+ ? resizingFallback
+ : childrenElement}
+
+ );
+});
+
+ResizableElement.displayName = 'ResizableElement';
+
+export default ResizableElement;
diff --git a/src/src/components/ResizeElement/ResizeElement.d.ts b/src/src/components/ResizeElement/ResizeElement.d.ts
new file mode 100644
index 00000000..cbd0dc0b
--- /dev/null
+++ b/src/src/components/ResizeElement/ResizeElement.d.ts
@@ -0,0 +1,31 @@
+import React from 'react';
+import { HeightProperty, WidthProperty } from 'csstype';
+
+import { ResizableSideEnum } from './';
+
+export interface ResizeElementProps {
+ id?: string;
+ children: React.ReactNode;
+ side?: ResizableSideEnum;
+ gutterSize?: number;
+ snapOffset?: number;
+ useLocalStorage?: boolean;
+ initialSizes: {
+ width?: WidthProperty
+
+ {children}
+
+
+ {resizeButtons.map(({ icon, mode }) => (
+
+ ))}
+
+
+ {resizeMode === ResizeModeEnum.Hide ? (
+
+
+
+ Release to resize
+
+
+ );
+}
+
+export default React.memo(ResizingFallback);
diff --git a/src/src/components/ResizingFallback/index.ts b/src/src/components/ResizingFallback/index.ts
new file mode 100644
index 00000000..9086fe25
--- /dev/null
+++ b/src/src/components/ResizingFallback/index.ts
@@ -0,0 +1,3 @@
+import ResizingFallback from './ResizingFallback';
+
+export default ResizingFallback;
diff --git a/src/src/components/RouteLeavingGuard/RouteLeavingGuard.d.ts b/src/src/components/RouteLeavingGuard/RouteLeavingGuard.d.ts
new file mode 100644
index 00000000..cf96252e
--- /dev/null
+++ b/src/src/components/RouteLeavingGuard/RouteLeavingGuard.d.ts
@@ -0,0 +1,5 @@
+export interface IRouteLeavingGuardProps {
+ when: boolean;
+ message?: string;
+ confirmBtnText?: string;
+}
diff --git a/src/src/components/RouteLeavingGuard/RouteLeavingGuard.tsx b/src/src/components/RouteLeavingGuard/RouteLeavingGuard.tsx
new file mode 100644
index 00000000..ed8d3894
--- /dev/null
+++ b/src/src/components/RouteLeavingGuard/RouteLeavingGuard.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { Prompt, useHistory } from 'react-router-dom';
+
+import ConfirmModal from 'components/ConfirmModal/ConfirmModal';
+import { Icon } from 'components/kit';
+
+import { IRouteLeavingGuardProps } from './RouteLeavingGuard.d';
+
+function RouteLeavingGuard({
+ when,
+ message = 'Changes you made may not be saved.',
+ confirmBtnText = 'Leave',
+}: IRouteLeavingGuardProps) {
+ const [openModal, setOpenModal] = React.useState
+
+
+
+
+
+ setSearchValue('')}
+ onInputChange={(value) => setSearchValue(value)}
+ isDisabled={_.isEmpty(sortedTags)}
+ isValidInput={true}
+ />
+
+
+ {filteredTagsList.map((tag: ITagInfoWithSelectedProperty) => {
+ return (
+
+ ) : (
+
+ tag.selected ? onAttachedTagDelete(e) : onAttachedTagAdd(e)
+ }
+ >
+ {tag.selected && (
+
+ );
+ })}
+
+
+ {tag.description}
+
+ ) : null}
+
+
+
+
+ {tag.name}
+
+
+ {tag.description ? (
+
+
+ No Tags Found
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ -
+
-
+
+
+ -
+
+ + {displayName} + +
+
+ {Object.values(routes).map((route: IRoute, index: number) => {
+ const { showInSidebar, path, displayName, icon } = route;
+ return (
+ showInSidebar && (
+ getPathFromStorage(path)}
+ exact={true}
+ isActive={(m, location) =>
+ location.pathname.split('/')[1] === path.split('/')[1]
+ }
+ activeClassName='Sidebar__NavLink--active'
+ className='Sidebar__NavLink'
+ >
+
+ )
+ );
+ })}
+
+
+
+
+
+ trackEvent(ANALYTICS_EVENT_KEYS.sidebar.discord)
+ }
+ >
+
+
+
+ trackEvent(ANALYTICS_EVENT_KEYS.sidebar.docs)}
+ >
+
+ v{AIM_VERSION}
+
+
+
+
+ {
+ onCountChange(value);
+ }}
+ getAriaValueText={(value) => `${value}`}
+ aria-labelledby='track-false-slider'
+ track={false}
+ min={selectedRangeValue[0]}
+ max={selectedRangeValue[1]}
+ valueLabelDisplay='auto'
+ />
+ ) : (
+ onRangeChange(value)) as any}
+ min={min}
+ max={max}
+ valueLabelDisplay='auto'
+ getAriaValueText={(value) => `${value}`}
+ onKeyPress={(e) => {
+ if (e.which === 13) {
+ onSearch();
+ }
+ }}
+ />
+ )}
+
+
+ {sliderTitleTooltip ? (
+
+
+ {sliderTitle}:
+
+
+ ) : (
+
+ {sliderTitle}:
+
+ )}
+ {`${selectedRangeValue[0]} - ${selectedRangeValue[1]}`}
+
+ {sliderType === 'single' ? (
+
+ {
+ onCountChange(value, metadata);
+ }}
+ validationPatterns={inputValidationPatterns ?? []}
+ />
+
+
+
+
+
+ Chart Smoothing
+
+
+
+ `${val}s`}
+ value={factor}
+ onChange={handleFactorChange}
+ onChangeCommitted={handleSmoothingData}
+ marks={sliderProps.marks}
+ step={sliderProps.step}
+ max={sliderProps.max}
+ min={sliderProps.min}
+ />
+
+
+
+
+
+
+
+ Curve Interpolation method
+
+
+
+ {hide
+ ? null
+ : resizing && resizingFallback
+ ? resizingFallback
+ : childrenElement}
+
+ );
+});
+
+SplitPaneItem.displayName = 'SplitPaneItem';
+
+export default SplitPaneItem;
diff --git a/src/src/components/SplitPane/context.ts b/src/src/components/SplitPane/context.ts
new file mode 100644
index 00000000..3e28b619
--- /dev/null
+++ b/src/src/components/SplitPane/context.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const SplitPaneContext = React.createContext({
+ resizing: false,
+});
+
+export default SplitPaneContext;
diff --git a/src/src/components/SplitPane/index.ts b/src/src/components/SplitPane/index.ts
new file mode 100644
index 00000000..302ff852
--- /dev/null
+++ b/src/src/components/SplitPane/index.ts
@@ -0,0 +1,10 @@
+import SplitPane from './SplitPane';
+import SplitPaneItem from './SplitPaneItem';
+import SplitPaneContext from './context';
+
+export * from './SplitPane.d';
+export * from './SplitPaneItem.d';
+
+export { SplitPaneItem, SplitPaneContext };
+
+export default SplitPane;
diff --git a/src/src/components/StatisticsBar/StatisticsBar.d.ts b/src/src/components/StatisticsBar/StatisticsBar.d.ts
new file mode 100644
index 00000000..a55fbea7
--- /dev/null
+++ b/src/src/components/StatisticsBar/StatisticsBar.d.ts
@@ -0,0 +1,20 @@
+type StatisticsBarItem = {
+ percent: number;
+ color: string;
+ label?: string;
+ highlighted?: boolean;
+};
+
+export interface IStatisticsBarProps {
+ data: Array
+ {Object.values(data).map(
+ ({ percent, color, label = '', highlighted }, i) =>
+ percent ? (
+
+ {
+ return (
+
+
+ );
+}
+
+StatusLabel.displayName = 'StatusLabel';
+
+export default React.memo(StatusLabel);
diff --git a/src/src/components/StatusLabel/index.ts b/src/src/components/StatusLabel/index.ts
new file mode 100644
index 00000000..acaf136f
--- /dev/null
+++ b/src/src/components/StatusLabel/index.ts
@@ -0,0 +1,6 @@
+import StatusLabel from './StatusLabel';
+
+export * from './types.d';
+export * from './StatusLabel';
+
+export default StatusLabel;
diff --git a/src/src/components/StatusLabel/styles.scss b/src/src/components/StatusLabel/styles.scss
new file mode 100644
index 00000000..e60b4341
--- /dev/null
+++ b/src/src/components/StatusLabel/styles.scss
@@ -0,0 +1,48 @@
+@use 'src/styles/abstracts' as *;
+
+.StatusLabel {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 1.25rem;
+ padding: 0.25rem 0.5rem 0.25rem 1.375rem;
+ border-radius: $border-radius-sm;
+ position: relative;
+ &.success {
+ background: $success-color-10;
+ .title {
+ color: $success-color-100;
+ }
+ &::before {
+ background: $success-color-100;
+ }
+ &.disabled {
+ &::before {
+ background: $success-color-50;
+ }
+ }
+ }
+ &.alert {
+ background: $pico-5;
+ .title {
+ color: $pico-50;
+ }
+ &::before {
+ background: $pico-50;
+ }
+ &.disabled {
+ &::before {
+ background: $pico-30;
+ }
+ }
+ }
+ &::before {
+ content: '';
+ width: 6px;
+ height: 6px;
+ position: absolute;
+ top: 7px;
+ left: 7px;
+ border-radius: $border-radius-circle;
+ }
+}
diff --git a/src/src/components/StatusLabel/types.d.ts b/src/src/components/StatusLabel/types.d.ts
new file mode 100644
index 00000000..937055e1
--- /dev/null
+++ b/src/src/components/StatusLabel/types.d.ts
@@ -0,0 +1,6 @@
+export interface IStatusLabelProps {
+ title?: string;
+ className?: string;
+ status?: 'success' | 'alert' | 'warning' | 'error';
+ disabled?: boolean;
+}
diff --git a/src/src/components/StepsDensityPopover/StepsDensityPopover.tsx b/src/src/components/StepsDensityPopover/StepsDensityPopover.tsx
new file mode 100644
index 00000000..23a1aea8
--- /dev/null
+++ b/src/src/components/StepsDensityPopover/StepsDensityPopover.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Box, Slider } from '@material-ui/core';
+
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+const marks = [
+ { value: 10, label: '10' },
+ { value: 100, label: '100' },
+ { value: 200, label: '200' },
+ { value: 300, label: '300' },
+ { value: 400, label: '400' },
+ { value: 500, label: '500' },
+];
+function StepsDensityPopover(): React.FunctionComponentElement {
+ return (
+
+
+ Number Of Steps:
+
+
+
+
+ );
+}
+
+export default React.memo(StepsDensityPopover);
diff --git a/src/src/components/TabPanel/TabPanel.tsx b/src/src/components/TabPanel/TabPanel.tsx
new file mode 100644
index 00000000..38d693ad
--- /dev/null
+++ b/src/src/components/TabPanel/TabPanel.tsx
@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+
+import { Box } from '@material-ui/core';
+
+import ErrorBoundary from 'components/ErrorBoundary';
+
+import { ITabPanelProps } from 'types/components/TabPanel/TabPanel';
+
+function TabPanel({
+ children,
+ value,
+ index,
+ className,
+}: ITabPanelProps): React.FunctionComponentElement {
+ return (
+
+
+ );
+}
+
+export default memo(TabPanel);
diff --git a/src/src/components/Table/ArchiveModal.tsx b/src/src/components/Table/ArchiveModal.tsx
new file mode 100644
index 00000000..bd90d11f
--- /dev/null
+++ b/src/src/components/Table/ArchiveModal.tsx
@@ -0,0 +1,276 @@
+import React from 'react';
+import _ from 'lodash-es';
+import moment from 'moment';
+import classNames from 'classnames';
+
+import { Tooltip } from '@material-ui/core';
+
+import { Button, Icon, Modal, Text } from 'components/kit';
+import DataList from 'components/kit/DataList';
+
+import { DATE_WITH_SECONDS } from 'config/dates/dates';
+
+import { processDurationTime } from 'utils/processDurationTime';
+
+function ArchiveModal({
+ opened,
+ onClose,
+ selectedRows = {},
+ archiveMode,
+ onRowSelect,
+ archiveRuns,
+}: {
+ opened: boolean;
+ onClose: () => void;
+ selectedRows: { [key: string]: any };
+ archiveMode: boolean;
+ onRowSelect: ({
+ actionType,
+ data,
+ }: {
+ actionType: 'single' | 'selectAll' | 'removeAll';
+ data?: any;
+ }) => {
+ [key: string]: any;
+ };
+ archiveRuns: (
+ ids: string[],
+ archived: boolean,
+ ) => {
+ call: () => Promise;
+ abort: () => void;
+ };
+}): React.FunctionComponentElement {
+ const tableRef = React.useRef({});
+ const disabledTableRef = React.useRef({});
+ const archivedText = archiveMode ? 'archive' : 'unarchive';
+
+ const tableColumns = [
+ {
+ dataKey: 'experiment',
+ key: 'experiment',
+ title: 'Experiment',
+ width: 0,
+ flexGrow: 1,
+ cellRenderer: function cellRenderer({ cellData, rowIndex }: any) {
+ return (
+
+
+ );
+ },
+ },
+ {
+ dataKey: 'date',
+ key: 'date',
+ title: 'Date',
+ width: 275,
+ cellRenderer: function cellRenderer({ cellData }: any) {
+ return (
+
+
+ );
+ },
+ },
+ {
+ dataKey: 'name',
+ key: 'name',
+ title: 'Name',
+ width: 0,
+ flexGrow: 1,
+ cellRenderer: function cellRenderer({ cellData, rowData }: any) {
+ return (
+
+
+ ) : (
+ <>
+ );
+}
+
+export default React.memo(ArchiveModal);
diff --git a/src/src/components/Table/AutoResizer.tsx b/src/src/components/Table/AutoResizer.tsx
new file mode 100644
index 00000000..2f817e05
--- /dev/null
+++ b/src/src/components/Table/AutoResizer.tsx
@@ -0,0 +1,46 @@
+// @ts-nocheck
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+/**
+ * Decorator component that automatically adjusts the width and height of a single child
+ */
+const AutoResizer = ({ className, width, height, children, onResize }) => {
+ const disableWidth = typeof width === 'number';
+ const disableHeight = typeof height === 'number';
+
+ if (disableWidth && disableHeight) {
+ return (
+
+
+ {(size) =>
+ children({
+ width: disableWidth ? width : size.width,
+ height: disableHeight ? height : size.height,
+ })
+ }
+
+
+ );
+};
+
+export default AutoResizer;
diff --git a/src/src/components/Table/BaseTable.scss b/src/src/components/Table/BaseTable.scss
new file mode 100644
index 00000000..a137a50a
--- /dev/null
+++ b/src/src/components/Table/BaseTable.scss
@@ -0,0 +1,329 @@
+@use 'src/styles/abstracts' as *;
+$table-prefix: BaseTable !default;
+
+@mixin table-edge-padding($padding-left: null, $padding-right: null) {
+ .#{$table-prefix} {
+ &__header-cell,
+ &__row-cell {
+ @if $padding-left != null {
+ &:first-child {
+ padding-left: $padding-left;
+ }
+ }
+
+ @if $padding-right != null {
+ &:last-child {
+ padding-right: $padding-right;
+ }
+ }
+ }
+ }
+}
+
+@mixin fill-layout($top: 0, $bottom: 0) {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: $top;
+ bottom: $bottom;
+ overflow: hidden;
+}
+
+.#{$table-prefix} {
+ $table-font-size: 13px !default;
+ $table-padding-left: 15px !default;
+ $table-padding-right: 15px !default;
+ $column-padding: 7.5px !default;
+
+ $background-color: #ffffff !default;
+ $box-shadow-color: #eeeeee !default;
+ $box-shadow-offset: 2px !default;
+ $box-shadow-blur: 4px !default;
+ $border: 1px solid #eeeeee !default;
+ $header-background-color: #f8f8f8 !default;
+ $header-font-weight: $font-600 !default;
+ $row-hovered-background-color: #e2f2ff !default;
+ $header-cell-hovered-background-color: #f3f3f3 !default;
+ $sort-indicator-hovered-color: #888888 !default;
+ $column-resizer-color: #5bb4ff !default;
+
+ $show-frozen-rows-shadow: false !default;
+ $show-frozen-columns-shadow: true !default;
+
+ box-shadow: 0 $box-shadow-offset $box-shadow-blur 0 $box-shadow-color;
+ background-color: $background-color;
+ position: relative;
+ box-sizing: border-box;
+ font-size: $table-font-size;
+
+ &--disabled {
+ opacity: 0.7;
+ pointer-events: none;
+ }
+
+ &--dynamic {
+ .#{$table-prefix}__row {
+ overflow: hidden;
+ align-items: stretch;
+ }
+ }
+
+ &:not(.#{$table-prefix}--dynamic),
+ .#{$table-prefix}__row--frozen {
+ .#{$table-prefix}__row-cell-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ @if ($show-frozen-rows-shadow) {
+ &--has-frozen-rows {
+ .#{$table-prefix}__header {
+ box-shadow: 0 $box-shadow-offset $box-shadow-blur 0 $box-shadow-color;
+ }
+ }
+ }
+
+ &__table {
+ background-color: $background-color;
+ position: absolute;
+ top: 0;
+ // put header after body and reverse the display order
+ // to prevent header's shadow being covered by body
+ display: flex;
+ flex-direction: column-reverse;
+
+ &-main {
+ @include table-edge-padding($table-padding-left, $table-padding-right);
+ outline: $border;
+ left: 0;
+
+ .#{$table-prefix}__header {
+ background-color: $header-background-color;
+ color: #1c2852;
+ }
+ }
+
+ &-frozen-left,
+ &-frozen-right {
+ .#{$table-prefix}__header,
+ .#{$table-prefix}__body {
+ overflow: hidden !important;
+ }
+ }
+
+ &-frozen-left {
+ @include table-edge-padding($table-padding-left, null);
+ @if ($show-frozen-columns-shadow) {
+ box-shadow: $box-shadow-offset 0 $box-shadow-blur 0 $box-shadow-color;
+ }
+ top: 0;
+ left: 0;
+
+ .#{$table-prefix}__header-row,
+ .#{$table-prefix}__row {
+ padding-right: 0 !important;
+ }
+
+ .#{$table-prefix}__body {
+ overflow-y: auto !important;
+ }
+ }
+
+ &-frozen-right {
+ @include table-edge-padding(null, $table-padding-right);
+ @if ($show-frozen-columns-shadow) {
+ box-shadow: -$box-shadow-offset 0 $box-shadow-blur 0 $box-shadow-color;
+ }
+ top: 0;
+ right: 0;
+
+ .#{$table-prefix}__header-row,
+ .#{$table-prefix}__row {
+ padding-left: 0 !important;
+ }
+
+ .#{$table-prefix}__body {
+ overflow-y: auto !important;
+ }
+ }
+ }
+
+ &__header {
+ overflow: hidden !important;
+ }
+
+ .#{$table-prefix}__header,
+ .#{$table-prefix}__body {
+ outline: none;
+ }
+
+ &__header-row,
+ &__row {
+ display: flex;
+ align-items: center;
+ border-bottom: $border;
+ box-sizing: border-box;
+ }
+
+ &__header-row {
+ background-color: $header-background-color;
+ font-weight: $header-font-weight;
+ }
+
+ &__row {
+ background-color: $background-color;
+ cursor: pointer;
+
+ &--hovered {
+ background-color: $row-hovered-background-color;
+ }
+ }
+
+ &__row-expanded {
+ border-bottom: $border;
+ }
+
+ &__header-cell,
+ &__row-cell {
+ min-width: 0;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ padding: 0 $column-padding;
+ box-sizing: border-box;
+ border-right: $border;
+ white-space: nowrap;
+
+ &--align-center {
+ justify-content: center;
+ text-align: center;
+ }
+
+ &--align-right {
+ justify-content: flex-end;
+ text-align: right;
+ }
+ }
+
+ &__header-cell {
+ position: relative;
+ cursor: default;
+
+ &:hover {
+ .#{$table-prefix}__column-resizer {
+ visibility: visible;
+ opacity: 0.5;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+
+ .#{$table-prefix}__sort-indicator {
+ display: none;
+ }
+
+ &--sortable {
+ &:hover {
+ background-color: $header-cell-hovered-background-color;
+ cursor: pointer;
+ }
+
+ &:not(.#{$table-prefix}__header-cell--sorting):hover {
+ .#{$table-prefix}__sort-indicator {
+ display: block;
+ color: $sort-indicator-hovered-color;
+ }
+ }
+ }
+
+ &--sorting {
+ &,
+ &:hover {
+ .#{$table-prefix}__sort-indicator {
+ display: block;
+ }
+ }
+ }
+
+ &--resizing {
+ .#{$table-prefix}__column-resizer {
+ visibility: visible;
+ opacity: 1;
+ // workaround to prevent header being clicked when resizing stopped on header
+ &::after {
+ @include fill-layout();
+ content: '';
+ left: -9999px;
+ }
+ }
+ }
+
+ &-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: normal;
+ }
+ }
+
+ &__header-row--resizing {
+ .#{$table-prefix}__header-cell {
+ background-color: transparent;
+ cursor: col-resize;
+
+ &:not(.#{$table-prefix}__header-cell--sorting) {
+ .#{$table-prefix}__sort-indicator {
+ display: none;
+ }
+ }
+
+ &:not(.#{$table-prefix}__header-cell--resizing) {
+ .#{$table-prefix}__column-resizer {
+ visibility: hidden;
+ }
+ }
+ }
+ }
+
+ &__column-resizer {
+ width: 3px;
+ visibility: hidden;
+ background-color: $column-resizer-color;
+
+ &:hover {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+
+ &__footer {
+ @include fill-layout(null);
+ background-color: $background-color;
+ }
+
+ &__resizing-line {
+ cursor: col-resize;
+ position: absolute;
+ top: 0;
+ background-color: $column-resizer-color;
+ width: 3px;
+ transform: translateX(-100%);
+ }
+
+ &__empty-layer {
+ @include fill-layout();
+ background-color: $background-color;
+ }
+
+ &__overlay {
+ @include fill-layout();
+ pointer-events: none;
+
+ & > * {
+ pointer-events: auto;
+ }
+ }
+}
diff --git a/src/src/components/Table/BaseTable.tsx b/src/src/components/Table/BaseTable.tsx
new file mode 100644
index 00000000..3a7d548e
--- /dev/null
+++ b/src/src/components/Table/BaseTable.tsx
@@ -0,0 +1,1277 @@
+// @ts-nocheck
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+import memoize from 'memoize-one';
+import cn from 'classnames';
+
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import { getValue } from 'utils/helper';
+
+import GridTable from './GridTable';
+import TableHeaderRow from './TableHeaderRow';
+import TableRow from './TableRow';
+import TableHeaderCell from './TableHeaderCell';
+import TableCell from './TableCell';
+import Column, { Alignment, FrozenDirection } from './Column';
+import SortOrder from './SortOrder';
+import ExpandIcon from './ExpandIcon';
+import SortIndicator from './SortIndicator';
+import ColumnResizer from './ColumnResizer';
+import ColumnManager from './ColumnManager';
+import {
+ renderElement,
+ normalizeColumns,
+ getEstimatedTotalRowsHeight,
+ isObjectEqual,
+ callOrReturn,
+ hasChildren,
+ flattenOnKeys,
+ cloneArray,
+ throttle,
+ debounce,
+ noop,
+} from './utils';
+
+import './BaseTable.scss';
+
+const getColumns = memoize(
+ (columns, children) => columns || normalizeColumns(children),
+);
+
+const getContainerStyle = (width, maxWidth, height) => ({
+ width,
+ maxWidth,
+ height,
+ overflow: 'hidden',
+});
+
+const DEFAULT_COMPONENTS = {
+ TableCell,
+ TableHeaderCell,
+ ExpandIcon,
+ SortIndicator,
+};
+
+const RESIZE_THROTTLE_WAIT = 50;
+
+// used for memoization
+const EMPTY_ARRAY: void[] = [];
+
+/**
+ * React table component // TODO: change to function component
+ */
+class BaseTable extends React.PureComponent {
+ constructor(props) {
+ super(props);
+
+ const { columns, children, defaultExpandedRowKeys } = props;
+ this.state = {
+ scrollbarSize: 0,
+ hoveredRowKey: null,
+ activeRowKey: null,
+ resizingKey: null,
+ resizingWidth: 0,
+ expandedRowKeys: cloneArray(defaultExpandedRowKeys),
+ };
+ this.columnManager = new ColumnManager(
+ getColumns(columns, children),
+ props.fixed,
+ );
+
+ this._setContainerRef = this._setContainerRef.bind(this);
+ this._setMainTableRef = this._setMainTableRef.bind(this);
+ this._setLeftTableRef = this._setLeftTableRef.bind(this);
+ this._setRightTableRef = this._setRightTableRef.bind(this);
+
+ this.renderExpandIcon = this.renderExpandIcon.bind(this);
+ this.renderRow = this.renderRow.bind(this);
+ this.renderRowCell = this.renderRowCell.bind(this);
+ this.renderHeader = this.renderHeader.bind(this);
+ this.renderHeaderCell = this.renderHeaderCell.bind(this);
+
+ this._handleScroll = this._handleScroll.bind(this);
+ this._handleVerticalScroll = this._handleVerticalScroll.bind(this);
+ this._handleRowsRendered = this._handleRowsRendered.bind(this);
+ this._handleRowHover = this._handleRowHover.bind(this);
+ this._handleRowClick = this._handleRowClick.bind(this);
+ this._handleRowExpand = this._handleRowExpand.bind(this);
+ this._handleColumnResize = throttle(
+ this._handleColumnResize.bind(this),
+ RESIZE_THROTTLE_WAIT,
+ );
+ this._handleColumnResizeStart = this._handleColumnResizeStart.bind(this);
+ this._handleColumnResizeStop = this._handleColumnResizeStop.bind(this);
+ this._handleColumnSort = this._handleColumnSort.bind(this);
+ this._handleFrozenRowHeightChange =
+ this._handleFrozenRowHeightChange.bind(this);
+ this._handleRowHeightChange = this._handleRowHeightChange.bind(this);
+
+ this._getLeftTableContainerStyle = memoize(getContainerStyle);
+ this._getRightTableContainerStyle = memoize(getContainerStyle);
+ this._flattenOnKeys = memoize((tree, keys, dataKey) => {
+ this._depthMap = {};
+ return flattenOnKeys(tree, keys, this._depthMap, dataKey);
+ });
+ this._resetColumnManager = memoize(
+ (columns, fixed) => {
+ this.columnManager.reset(columns, fixed);
+
+ if (this.props.estimatedRowHeight && fixed) {
+ if (!this.columnManager.hasLeftFrozenColumns()) {
+ this._leftRowHeightMap = {};
+ }
+ if (!this.columnManager.hasRightFrozenColumns()) {
+ this._rightRowHeightMap = {};
+ }
+ }
+ },
+ (newArgs, lastArgs) =>
+ isObjectEqual(
+ newArgs,
+ lastArgs,
+ this.props.ignoreFunctionInColumnCompare,
+ ),
+ );
+
+ this._isResetting = false;
+ this._resetIndex = null;
+ this._rowHeightMap = {};
+ this._rowHeightMapBuffer = {};
+ this._mainRowHeightMap = {};
+ this._leftRowHeightMap = {};
+ this._rightRowHeightMap = {};
+ this._getEstimatedTotalRowsHeight = memoize(getEstimatedTotalRowsHeight);
+ this._getRowHeight = this._getRowHeight.bind(this);
+ this._updateRowHeights = debounce(() => {
+ this._isResetting = true;
+ this._rowHeightMap = {
+ ...this._rowHeightMap,
+ ...this._rowHeightMapBuffer,
+ };
+ this.resetAfterRowIndex(this._resetIndex, false);
+ this._rowHeightMapBuffer = {};
+ this._resetIndex = null;
+ this.forceUpdateTable();
+ this.forceUpdate();
+ this._isResetting = false;
+ }, 0);
+
+ this._scroll = { scrollLeft: 0, scrollTop: 0 };
+ this._scrollHeight = 0;
+ this._lastScannedRowIndex = -1;
+ this._hasDataChangedSinceEndReached = true;
+
+ this._data = props.data;
+ this._depthMap = {};
+
+ this._horizontalScrollbarSize = 0;
+ this._verticalScrollbarSize = 0;
+ this._scrollbarPresenceChanged = false;
+ }
+
+ /**
+ * Get the DOM node of the table
+ */
+ getDOMNode() {
+ return this.tableNode;
+ }
+
+ /**
+ * Get the column manager
+ */
+ getColumnManager() {
+ return this.columnManager;
+ }
+
+ /**
+ * Get internal `expandedRowKeys` state
+ */
+ getExpandedRowKeys() {
+ const { expandedRowKeys } = this.props;
+ return expandedRowKeys !== undefined
+ ? expandedRowKeys || EMPTY_ARRAY
+ : this.state.expandedRowKeys;
+ }
+
+ /**
+ * Get the expanded state, fallback to normal state if not expandable.
+ */
+ getExpandedState() {
+ return {
+ expandedData: this._data,
+ expandedRowKeys: this.getExpandedRowKeys(),
+ expandedDepthMap: this._depthMap,
+ };
+ }
+
+ /**
+ * Get the total height of all rows, including expanded rows.
+ */
+ getTotalRowsHeight() {
+ const { rowHeight, estimatedRowHeight } = this.props;
+
+ if (estimatedRowHeight) {
+ return this.table
+ ? this.table.getTotalRowsHeight()
+ : this._getEstimatedTotalRowsHeight(this._data, estimatedRowHeight);
+ }
+ return this._data.length * rowHeight;
+ }
+
+ /**
+ * Get the total width of all columns.
+ */
+ getTotalColumnsWidth() {
+ return this.columnManager.getColumnsWidth();
+ }
+
+ /**
+ * Forcefully re-render the inner Grid component.
+ *
+ * Calling `forceUpdate` on `Table` may not re-render the inner Grid since it uses `shallowCompare` as a performance optimization.
+ * Use this method if you want to manually trigger a re-render.
+ * This may be appropriate if the underlying row data has changed but the row sizes themselves have not.
+ */
+ forceUpdateTable() {
+ this.table && this.table.forceUpdateTable();
+ this.leftTable && this.leftTable.forceUpdateTable();
+ this.rightTable && this.rightTable.forceUpdateTable();
+ }
+
+ /**
+ * Reset cached offsets for positioning after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided)
+ *
+ * @param {number} rowIndex
+ * @param {boolean} shouldForceUpdate
+ */
+ resetAfterRowIndex(rowIndex = 0, shouldForceUpdate = true) {
+ if (!this.props.estimatedRowHeight) return;
+
+ this.table && this.table.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+ this.leftTable &&
+ this.leftTable.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+ this.rightTable &&
+ this.rightTable.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+ }
+
+ /**
+ * Reset row height cache, useful if `data` changed entirely, should be used only in dynamic mode(estimatedRowHeight is provided)
+ */
+ resetRowHeightCache() {
+ if (!this.props.estimatedRowHeight) return;
+
+ this._resetIndex = null;
+ this._rowHeightMapBuffer = {};
+ this._rowHeightMap = {};
+ this._mainRowHeightMap = {};
+ this._leftRowHeightMap = {};
+ this._rightRowHeightMap = {};
+ }
+
+ /**
+ * Scroll to the specified offset.
+ * Useful for animating position changes.
+ *
+ * @param {object} offset
+ */
+ scrollToPosition(offset) {
+ this._scroll = offset;
+
+ this.table && this.table.scrollToPosition(offset);
+ this.leftTable && this.leftTable.scrollToTop(offset.scrollTop);
+ this.rightTable && this.rightTable.scrollToTop(offset.scrollTop);
+ }
+
+ /**
+ * Scroll to the specified offset vertically.
+ *
+ * @param {number} scrollTop
+ */
+ scrollToTop(scrollTop) {
+ this._scroll.scrollTop = scrollTop;
+
+ this.table && this.table.scrollToPosition(this._scroll);
+ this.leftTable && this.leftTable.scrollToTop(scrollTop);
+ this.rightTable && this.rightTable.scrollToTop(scrollTop);
+ }
+
+ /**
+ * Scroll to the specified offset horizontally.
+ *
+ * @param {number} scrollLeft
+ */
+ scrollToLeft(scrollLeft) {
+ this._scroll.scrollLeft = scrollLeft;
+
+ this.table && this.table.scrollToPosition(this._scroll);
+ }
+
+ /**
+ * Scroll to the specified row.
+ * By default, the table will scroll as little as possible to ensure the row is visible.
+ * You can control the alignment of the row though by specifying an align property. Acceptable values are:
+ *
+ * - `auto` (default) - Scroll as little as possible to ensure the row is visible.
+ * - `smart` - Same as `auto` if it is less than one viewport away, or it's the same as`center`.
+ * - `center` - Center align the row within the table.
+ * - `end` - Align the row to the bottom side of the table.
+ * - `start` - Align the row to the top side of the table.
+ *
+ * @param {number} rowIndex
+ * @param {string} align
+ */
+ scrollToRow(rowIndex = 0, align = 'auto') {
+ this.table && this.table.scrollToRow(rowIndex, align);
+ this.leftTable && this.leftTable.scrollToRow(rowIndex, align);
+ this.rightTable && this.rightTable.scrollToRow(rowIndex, align);
+ }
+
+ scrollToRowByKey = (rowKey) => {
+ let rowIndex = 0;
+ for (let i = 0; i < this.props.data.length; i++) {
+ if (this.props.data[i].key === rowKey) {
+ rowIndex = i;
+ break;
+ }
+ }
+
+ this.scrollToRow(rowIndex, 'smart');
+ };
+
+ /**
+ * Set `expandedRowKeys` manually.
+ * This method is available only if `expandedRowKeys` is uncontrolled.
+ *
+ * @param {array} expandedRowKeys
+ */
+ setExpandedRowKeys(expandedRowKeys) {
+ // if `expandedRowKeys` is controlled
+ if (this.props.expandedRowKeys !== undefined) return;
+
+ this.setState({
+ expandedRowKeys: cloneArray(expandedRowKeys),
+ });
+ }
+
+ /**
+ * Set `hoveredRowKey` manually.
+ *
+ * @param {string} rowKey
+ */
+ setHoveredRow = (rowKey) => {
+ this.setState({ hoveredRowKey: rowKey });
+ };
+
+ /**
+ * Set `activeRowKey` manually.
+ *
+ * @param {string} rowKey
+ */
+ setActiveRow = (rowKey) => {
+ this.setState({ activeRowKey: rowKey });
+ };
+
+ renderExpandIcon({ rowData, rowIndex, depth, onExpand }) {
+ const { rowKey, expandColumnKey, expandIconProps } = this.props;
+ if (!expandColumnKey) return null;
+
+ const expandable = rowIndex >= 0 && hasChildren(rowData);
+ const expanded =
+ rowIndex >= 0 && this.getExpandedRowKeys().indexOf(rowData[rowKey]) >= 0;
+ const extraProps = callOrReturn(expandIconProps, {
+ rowData,
+ rowIndex,
+ depth,
+ expandable,
+ expanded,
+ });
+ const ExpandIcon = this._getComponent('ExpandIcon');
+
+ return (
+
+
+
+ );
+ }
+
+ const { className, dataKey, dataGetter, cellRenderer } = column;
+ const TableCell = this._getComponent('TableCell');
+
+ const cellData = dataGetter
+ ? dataGetter({ columns, column, columnIndex, rowData, rowIndex })
+ : getValue(rowData, dataKey);
+ const cellProps = {
+ isScrolling,
+ cellData,
+ columns,
+ column,
+ columnIndex,
+ rowData,
+ rowIndex,
+ container: this,
+ };
+ const cell = renderElement(
+ cellRenderer || (
+
+ {expandIcon}
+ {cell}
+
+ );
+ }
+
+ renderHeader({ columns, headerIndex, style }) {
+ const { headerClassName, headerRenderer } = this.props;
+
+ const headerClass = callOrReturn(headerClassName, { columns, headerIndex });
+ const extraProps = callOrReturn(this.props.headerProps, {
+ columns,
+ headerIndex,
+ });
+
+ const className = cn(this._prefixClass('header-row'), headerClass, {
+ [this._prefixClass('header-row--resizing')]: !!this.state.resizingKey,
+ [this._prefixClass('header-row--customized')]: headerRenderer,
+ });
+
+ const headerProps = {
+ ...extraProps,
+ role: 'row',
+ key: `header-${headerIndex}`,
+ className,
+ style,
+ columns,
+ headerIndex,
+ headerRenderer,
+ cellRenderer: this.renderHeaderCell,
+ expandColumnKey: this.props.expandColumnKey,
+ expandIcon: this._getComponent('ExpandIcon'),
+ };
+
+ return
+
+ {expandIcon}
+ {cell}
+ {column.sortable && (
+
+
+ );
+ }
+
+ renderMainTable() {
+ const {
+ width,
+ headerHeight,
+ rowHeight,
+ fixed,
+ estimatedRowHeight,
+ ...rest
+ } = this.props;
+ const height = this._getTableHeight();
+
+ let tableWidth = width - this._verticalScrollbarSize;
+ if (fixed) {
+ const columnsWidth = this.columnManager.getColumnsWidth();
+ // make sure `scrollLeft` is always integer to fix a sync bug when scrolling to end horizontally
+ tableWidth = Math.max(Math.round(columnsWidth), tableWidth);
+ }
+ return (
+
+
+ );
+ }
+
+ renderLeftTable() {
+ if (!this.columnManager.hasLeftFrozenColumns()) return null;
+
+ const { width, headerHeight, rowHeight, estimatedRowHeight, ...rest } =
+ this.props;
+
+ const containerHeight = this._getFrozenContainerHeight();
+ const offset = this._verticalScrollbarSize || 20;
+ const columnsWidth = this.columnManager.getLeftFrozenColumnsWidth();
+ return (
+
+
+ );
+ }
+
+ renderRightTable() {
+ if (!this.columnManager.hasRightFrozenColumns()) return null;
+
+ const { width, headerHeight, rowHeight, estimatedRowHeight, ...rest } =
+ this.props;
+
+ const containerHeight = this._getFrozenContainerHeight();
+ const columnsWidth = this.columnManager.getRightFrozenColumnsWidth();
+ const scrollbarWidth = this._verticalScrollbarSize;
+ return (
+
+
+ );
+ }
+
+ renderResizingLine() {
+ const { width, fixed } = this.props;
+ const { resizingKey } = this.state;
+ if (!fixed || !resizingKey) return null;
+
+ const columns = this.columnManager.getMainColumns();
+ const idx = columns.findIndex((column) => column.key === resizingKey);
+ const column = columns[idx];
+ const { width: columnWidth, frozen } = column;
+ const leftWidth = this.columnManager.recomputeColumnsWidth(
+ columns.slice(0, idx),
+ );
+
+ let left = leftWidth + columnWidth;
+ if (!frozen) {
+ left -= this._scroll.scrollLeft;
+ } else if (frozen === FrozenDirection.RIGHT) {
+ const rightWidth = this.columnManager.recomputeColumnsWidth(
+ columns.slice(idx + 1),
+ );
+ if (rightWidth + columnWidth > width - this._verticalScrollbarSize) {
+ left = columnWidth;
+ } else {
+ left = width - this._verticalScrollbarSize - rightWidth;
+ }
+ }
+ const style = {
+ left,
+ height: this._getTableHeight() - this._horizontalScrollbarSize,
+ };
+ return ;
+ }
+
+ renderFooter() {
+ const { footerHeight, footerRenderer } = this.props;
+ if (footerHeight === 0) return null;
+ return (
+
+
+
+ );
+ }
+
+ _setHandleRef(ref) {
+ this.handleRef = ref;
+ }
+
+ _handleClick(e) {
+ e.stopPropagation();
+ }
+
+ _handleMouseDown(e) {
+ dragEventFor = eventsFor.mouse;
+ this._handleDragStart(e);
+ }
+
+ _handleMouseUp(e) {
+ dragEventFor = eventsFor.mouse;
+ this._handleDragStop(e);
+ }
+
+ _handleTouchStart(e) {
+ dragEventFor = eventsFor.touch;
+ this._handleDragStart(e);
+ }
+
+ _handleTouchEnd(e) {
+ dragEventFor = eventsFor.touch;
+ this._handleDragStop(e);
+ }
+
+ _handleDragStart(e) {
+ if (typeof e.button === 'number' && e.button !== 0) return;
+
+ this.isDragging = true;
+ this.lastX = INVALID_VALUE;
+ this.width = this.props.column.width;
+ this.props.onResizeStart(this.props.column);
+
+ const { ownerDocument } = this.handleRef;
+ addUserSelectStyles(ownerDocument);
+ ownerDocument.addEventListener(dragEventFor.move, this._handleDrag);
+ ownerDocument.addEventListener(dragEventFor.stop, this._handleDragStop);
+ }
+
+ _handleDragStop(e) {
+ if (!this.isDragging) return;
+ this.isDragging = false;
+
+ this.props.onResizeStop(this.props.column);
+
+ const { ownerDocument } = this.handleRef;
+ removeUserSelectStyles(ownerDocument);
+ ownerDocument.removeEventListener(dragEventFor.move, this._handleDrag);
+ ownerDocument.removeEventListener(dragEventFor.stop, this._handleDragStop);
+ }
+
+ _handleDrag(e) {
+ let clientX = e.clientX;
+ if (e.type === eventsFor.touch.move) {
+ e.preventDefault();
+ if (e.targetTouches && e.targetTouches[0])
+ clientX = e.targetTouches[0].clientX;
+ }
+
+ const { offsetParent } = this.handleRef;
+ const offsetParentRect = offsetParent.getBoundingClientRect();
+ const x = clientX + offsetParent.scrollLeft - offsetParentRect.left;
+
+ if (this.lastX === INVALID_VALUE) {
+ this.lastX = x;
+ return;
+ }
+
+ const { column, minWidth: MIN_WIDTH } = this.props;
+ const { width, maxWidth, minWidth = MIN_WIDTH } = column;
+ const movedX = x - this.lastX;
+ if (!movedX) return;
+
+ this.width = this.width + movedX;
+ this.lastX = x;
+
+ let newWidth = this.width;
+ if (maxWidth && newWidth > maxWidth) {
+ newWidth = maxWidth;
+ } else if (newWidth < minWidth) {
+ newWidth = minWidth;
+ }
+
+ if (newWidth === width) return;
+ this.props.onResize(column, newWidth);
+ }
+}
+
+export default ColumnResizer;
diff --git a/src/src/components/Table/DeleteModal.tsx b/src/src/components/Table/DeleteModal.tsx
new file mode 100644
index 00000000..132c0933
--- /dev/null
+++ b/src/src/components/Table/DeleteModal.tsx
@@ -0,0 +1,273 @@
+import React from 'react';
+import _ from 'lodash-es';
+import moment from 'moment';
+import classNames from 'classnames';
+
+import { Tooltip } from '@material-ui/core';
+
+import { Button, Icon, Modal, Text } from 'components/kit';
+import DataList from 'components/kit/DataList';
+
+import { DATE_WITH_SECONDS } from 'config/dates/dates';
+
+import { processDurationTime } from 'utils/processDurationTime';
+
+function DeleteModal({
+ opened,
+ onClose,
+ selectedRows = {},
+ onRowSelect,
+ deleteRuns,
+}: {
+ opened: boolean;
+ onClose: () => void;
+ selectedRows: { [key: string]: any };
+ onRowSelect: ({
+ actionType,
+ data,
+ }: {
+ actionType: 'single' | 'selectAll' | 'removeAll';
+ data?: any;
+ }) => {
+ [key: string]: any;
+ };
+ deleteRuns: (ids: string[]) => {
+ call: () => Promise;
+ abort: () => void;
+ };
+}): React.FunctionComponentElement {
+ const tableRef = React.useRef({});
+ const disabledTableRef = React.useRef({});
+
+ const tableColumns = [
+ {
+ dataKey: 'experiment',
+ key: 'experiment',
+ title: 'Experiment',
+ width: 0,
+ flexGrow: 1,
+ cellRenderer: function cellRenderer({ cellData }: any) {
+ return (
+
+
+ );
+ },
+ },
+ {
+ dataKey: 'date',
+ key: 'date',
+ title: 'Date',
+ width: 275,
+ cellRenderer: function cellRenderer({ cellData }: any) {
+ return (
+
+
+ );
+ },
+ },
+ {
+ dataKey: 'name',
+ key: 'name',
+ title: 'Name',
+ width: 0,
+ flexGrow: 1,
+ cellRenderer: function cellRenderer({ cellData, rowData }: any) {
+ return (
+
+
+ ) : (
+ <>
+ );
+}
+
+export default React.memo(DeleteModal);
diff --git a/src/src/components/Table/ExpandIcon.tsx b/src/src/components/Table/ExpandIcon.tsx
new file mode 100644
index 00000000..55667e94
--- /dev/null
+++ b/src/src/components/Table/ExpandIcon.tsx
@@ -0,0 +1,62 @@
+// @ts-nocheck
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+import cn from 'classnames';
+
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+/**
+ * default ExpandIcon for BaseTable
+ */
+class ExpandIcon extends React.PureComponent {
+ constructor(props) {
+ super(props);
+
+ this._handleClick = this._handleClick.bind(this);
+ }
+
+ render() {
+ const { expandable, expanded, indentSize, depth, onExpand, ...rest } =
+ this.props;
+ if (!expandable && indentSize === 0) return null;
+
+ const cls = cn('BaseTable__expand-icon', {
+ 'BaseTable__expand-icon--expanded': expanded,
+ });
+ return (
+
+
+ );
+ }
+
+ _handleClick(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ const { onExpand, expanded } = this.props;
+ onExpand(!expanded);
+ }
+}
+
+export default ExpandIcon;
diff --git a/src/src/components/Table/GridTable.tsx b/src/src/components/Table/GridTable.tsx
new file mode 100644
index 00000000..14338bbf
--- /dev/null
+++ b/src/src/components/Table/GridTable.tsx
@@ -0,0 +1,213 @@
+// @ts-nocheck
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+import cn from 'classnames';
+import { FixedSizeGrid, VariableSizeGrid } from 'react-window';
+import memoize from 'memoize-one';
+
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import Header from './TableHeader';
+import { getEstimatedTotalRowsHeight } from './utils';
+
+/**
+ * A wrapper of the Grid for internal only
+ */
+class GridTable extends React.PureComponent {
+ constructor(props) {
+ super(props);
+
+ this._setHeaderRef = this._setHeaderRef.bind(this);
+ this._setBodyRef = this._setBodyRef.bind(this);
+ this._setInnerRef = this._setInnerRef.bind(this);
+ this._itemKey = this._itemKey.bind(this);
+ this._getBodyWidth = this._getBodyWidth.bind(this);
+ this._handleItemsRendered = this._handleItemsRendered.bind(this);
+ this._resetColumnWidthCache = memoize((bodyWidth) => {
+ if (!this.props.estimatedRowHeight) return;
+ this.bodyRef && this.bodyRef.resetAfterColumnIndex(0, false);
+ });
+ this._getEstimatedTotalRowsHeight = memoize(getEstimatedTotalRowsHeight);
+
+ this.renderRow = this.renderRow.bind(this);
+ }
+
+ resetAfterRowIndex(rowIndex = 0, shouldForceUpdate) {
+ if (!this.props.estimatedRowHeight) return;
+ this.bodyRef &&
+ this.bodyRef.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+ }
+
+ forceUpdateTable() {
+ this.headerRef && this.headerRef.forceUpdate();
+ this.bodyRef && this.bodyRef.forceUpdate();
+ }
+
+ scrollToPosition(args) {
+ this.headerRef && this.headerRef.scrollTo(args.scrollLeft);
+ this.bodyRef && this.bodyRef.scrollTo(args);
+ }
+
+ scrollToTop(scrollTop) {
+ this.bodyRef && this.bodyRef.scrollTo({ scrollTop });
+ }
+
+ scrollToLeft(scrollLeft) {
+ this.headerRef && this.headerRef.scrollTo(scrollLeft);
+ this.bodyRef && this.bodyRef.scrollToPosition({ scrollLeft });
+ }
+
+ scrollToRow(rowIndex = 0, align = 'auto') {
+ this.bodyRef && this.bodyRef.scrollToItem({ rowIndex, align });
+ }
+
+ getTotalRowsHeight() {
+ const { data, rowHeight, estimatedRowHeight } = this.props;
+
+ if (estimatedRowHeight) {
+ return (
+ (this.innerRef && this.innerRef.clientHeight) ||
+ this._getEstimatedTotalRowsHeight(data, estimatedRowHeight)
+ );
+ }
+ return data.length * rowHeight;
+ }
+
+ renderRow(args) {
+ const { data, columns, rowRenderer } = this.props;
+ const rowData = data[args.rowIndex];
+ return rowRenderer({ ...args, columns, rowData });
+ }
+
+ render() {
+ const {
+ containerStyle,
+ classPrefix,
+ className,
+ data,
+ frozenData,
+ width,
+ height,
+ rowHeight,
+ estimatedRowHeight,
+ getRowHeight,
+ headerWidth,
+ bodyWidth,
+ useIsScrolling,
+ onScroll,
+ hoveredRowKey,
+ overscanRowCount,
+ // omit from rest
+ style,
+ onScrollbarPresenceChange,
+ ...rest
+ } = this.props;
+ const headerHeight = this._getHeaderHeight();
+ const frozenRowCount = frozenData.length;
+ const frozenRowsHeight = rowHeight * frozenRowCount;
+ const cls = cn(`${classPrefix}__table`, className);
+ const containerProps = containerStyle ? { style: containerStyle } : null;
+ const Grid = estimatedRowHeight ? VariableSizeGrid : FixedSizeGrid;
+
+ this._resetColumnWidthCache(bodyWidth);
+ return (
+
+
+ );
+ }
+
+ _setHeaderRef(ref) {
+ this.headerRef = ref;
+ }
+
+ _setBodyRef(ref) {
+ this.bodyRef = ref;
+ }
+
+ _setInnerRef(ref) {
+ this.innerRef = ref;
+ }
+
+ _itemKey({ rowIndex }) {
+ const { data, rowKey } = this.props;
+ return data[rowIndex][rowKey];
+ }
+
+ _getHeaderHeight() {
+ const { headerHeight } = this.props;
+ if (Array.isArray(headerHeight)) {
+ return headerHeight.reduce((sum, height) => sum + height, 0);
+ }
+ return headerHeight;
+ }
+
+ _getBodyWidth() {
+ return this.props.bodyWidth;
+ }
+
+ _handleItemsRendered({
+ overscanRowStartIndex,
+ overscanRowStopIndex,
+ visibleRowStartIndex,
+ visibleRowStopIndex,
+ }) {
+ this.props.onRowsRendered({
+ overscanStartIndex: overscanRowStartIndex,
+ overscanStopIndex: overscanRowStopIndex,
+ startIndex: visibleRowStartIndex,
+ stopIndex: visibleRowStopIndex,
+ });
+ }
+}
+
+export default GridTable;
diff --git a/src/src/components/Table/GroupedColumnHeader.tsx b/src/src/components/Table/GroupedColumnHeader.tsx
new file mode 100644
index 00000000..d5567a9a
--- /dev/null
+++ b/src/src/components/Table/GroupedColumnHeader.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Tooltip } from '@material-ui/core';
+
+import { formatValue } from 'utils/formatValue';
+import { isSystemMetric } from 'utils/isSystemMetric';
+import { formatSystemMetricName } from 'utils/formatSystemMetricName';
+
+const TITLE_MAX_ROW_LENGTH = 5;
+function GroupedColumnHeader({
+ data,
+}: {
+ data: Array;
+}): React.FunctionComponentElement {
+ const Title: React.ReactNode = React.useMemo(() => {
+ const filteredData = data.filter((val) => val);
+ const isEllipsis: boolean = filteredData.length > TITLE_MAX_ROW_LENGTH;
+ return filteredData
+ .slice(0, isEllipsis ? TITLE_MAX_ROW_LENGTH : data.length)
+ .map((val: any, index) => {
+ const value = isSystemMetric(val)
+ ? formatSystemMetricName(val)
+ : formatValue(val);
+ return (
+
+
+ );
+}
+
+GroupedColumnHeader.displayName = 'GroupedColumnHeader';
+
+export default React.memo(GroupedColumnHeader);
diff --git a/src/src/components/Table/RunNameColumn.tsx b/src/src/components/Table/RunNameColumn.tsx
new file mode 100644
index 00000000..aca473a0
--- /dev/null
+++ b/src/src/components/Table/RunNameColumn.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link as RouteLink } from 'react-router-dom';
+import classNames from 'classnames';
+
+import { Link, Tooltip } from '@material-ui/core';
+
+import StatusLabel from 'components/StatusLabel';
+
+import { PathEnum } from 'config/enums/routesEnum';
+
+function RunNameColumn({
+ active,
+ runHash,
+ run,
+ hidden = false,
+}: {
+ active: boolean;
+ runHash: string;
+ run: string;
+ hidden?: boolean;
+}) {
+ return (
+ onSafeMouseOver(label)}
+ />
+
+ ) : null,
+ )}
+
+ );
+}
+
+StatisticsBar.displayName = 'StatisticsBar';
+
+export default React.memo(StatisticsBar);
diff --git a/src/src/components/StatisticsBar/index.ts b/src/src/components/StatisticsBar/index.ts
new file mode 100644
index 00000000..353e7bbd
--- /dev/null
+++ b/src/src/components/StatisticsBar/index.ts
@@ -0,0 +1,5 @@
+import StatisticsBar from './StatisticsBar';
+
+export * from './StatisticsBar.d';
+
+export default StatisticsBar;
diff --git a/src/src/components/StatisticsCard/StatisticsCard.d.ts b/src/src/components/StatisticsCard/StatisticsCard.d.ts
new file mode 100644
index 00000000..b9c7f069
--- /dev/null
+++ b/src/src/components/StatisticsCard/StatisticsCard.d.ts
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { IconName } from 'components/kit/Icon';
+
+export interface IStatisticsCardProps {
+ label: string;
+ count: number;
+ badge?: { value: string; style?: React.CSSProperties };
+ icon?: IconName;
+ iconBgColor?: string;
+ cardBgColor?: string;
+ onMouseOver?: (id: string, source: string) => void;
+ onMouseLeave?: () => void;
+ navLink?: string;
+ highlighted?: boolean;
+ outlined?: boolean;
+ isLoading?: boolean;
+}
diff --git a/src/src/components/StatisticsCard/StatisticsCard.scss b/src/src/components/StatisticsCard/StatisticsCard.scss
new file mode 100644
index 00000000..34ddbbc0
--- /dev/null
+++ b/src/src/components/StatisticsCard/StatisticsCard.scss
@@ -0,0 +1,55 @@
+@use 'src/styles/abstracts' as *;
+
+.StatisticsCard {
+ padding: $space-xs;
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-start;
+ border-radius: $border-radius-sm;
+ min-width: toRem(132px);
+ max-width: toRem(132px);
+ border: $border-transparent;
+ transition: all 0.18s ease-out;
+ position: relative;
+ &__iconWrapper {
+ width: 2rem;
+ min-width: 2rem;
+ height: 2rem;
+ border-radius: 50%;
+ margin-right: $space-xs;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
+ &__info {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ &__label,
+ &__count {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ color: $pico;
+ user-select: none;
+ }
+ &__label {
+ text-transform: capitalize;
+ }
+ }
+ &__badge {
+ position: absolute;
+ top: -$space-xs;
+ right: -$space-xxs;
+ text-align: center;
+ white-space: nowrap;
+ padding: $space-xxxxxs $space-xxxs;
+ border-radius: $border-radius-xss;
+ background-color: white;
+ box-shadow: 0 1px 2px 0 #00000029;
+ user-select: none;
+ }
+ &.highlighted {
+ cursor: pointer;
+ }
+}
diff --git a/src/src/components/StatisticsCard/StatisticsCard.tsx b/src/src/components/StatisticsCard/StatisticsCard.tsx
new file mode 100644
index 00000000..fec0f021
--- /dev/null
+++ b/src/src/components/StatisticsCard/StatisticsCard.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+import classNames from 'classnames';
+
+import { Icon, Text } from 'components/kit';
+
+import hexToRgbA from 'utils/hexToRgbA';
+
+import { IStatisticsCardProps } from './index';
+
+import './StatisticsCard.scss';
+
+function StatisticsCard({
+ label,
+ badge = { value: '' },
+ count,
+ icon,
+ iconBgColor = '#000000',
+ cardBgColor = hexToRgbA(iconBgColor, 0.1),
+ onMouseOver,
+ onMouseLeave,
+ navLink,
+ highlighted,
+ outlined = false,
+ isLoading = false,
+}: IStatisticsCardProps) {
+ const history = useHistory();
+ const onSafeMouseOver = React.useCallback(
+ (id: string) => {
+ if (typeof onMouseOver === 'function') {
+ onMouseOver(id, 'card');
+ }
+ },
+ [onMouseOver],
+ );
+ const styles = {
+ card: {
+ borderColor: outlined ? iconBgColor : 'transparent',
+ backgroundColor: highlighted ? iconBgColor : cardBgColor,
+ },
+ iconWrapper: {
+ backgroundColor: highlighted ? '#fff' : iconBgColor,
+ },
+ iconColor: highlighted ? iconBgColor : '#fff',
+ label: highlighted ? { color: '#fff' } : {},
+ count: highlighted ? { color: '#fff' } : {},
+ };
+ return (
+ navLink && history.push(navLink)}
+ onMouseLeave={onMouseLeave}
+ onMouseOver={() => onSafeMouseOver(label)}
+ className={classNames('StatisticsCard', { highlighted })}
+ style={styles.card}
+ >
+ {badge?.value && (
+
+ {badge.value}
+
+ )}
+ {icon && (
+
+ );
+}
+
+StatisticsCard.displayName = 'StatisticsCard';
+
+export default React.memo(StatisticsCard);
diff --git a/src/src/components/StatisticsCard/index.ts b/src/src/components/StatisticsCard/index.ts
new file mode 100644
index 00000000..e957ea86
--- /dev/null
+++ b/src/src/components/StatisticsCard/index.ts
@@ -0,0 +1,5 @@
+import StatisticsCard from './StatisticsCard';
+
+export * from './StatisticsCard.d';
+
+export default StatisticsCard;
diff --git a/src/src/components/StatusLabel/StatusLabel.tsx b/src/src/components/StatusLabel/StatusLabel.tsx
new file mode 100644
index 00000000..d19e3cef
--- /dev/null
+++ b/src/src/components/StatusLabel/StatusLabel.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { Text } from 'components/kit';
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import stopPropagation from 'utils/stopPropagation';
+
+import { IStatusLabelProps } from './types.d';
+
+import './styles.scss';
+
+/**
+ * @property {string} title - label title
+ * @property {string} status - status type
+ * @property {string} className - component className
+ */
+function StatusLabel({
+ title,
+ status = 'success',
+ className = '',
+ disabled = false,
+}: IStatusLabelProps): React.FunctionComponentElement
+
+ )}
+
+
+ {label}
+
+
+ {isLoading ? '--' : count}
+
+
+
+ {title && (
+
+ {title}
+
+ )}
+
+
+ {value === index && {children} }
+
+
+
+ {cellData}
+
+
+
+
+ {cellData}
+
+
+
+
+ );
+ },
+ },
+ ];
+
+ const { data, disabledData } = React.useMemo(() => {
+ let archivedList: any[] = [];
+ let unarchivedList: any[] = [];
+ const runHashList: string[] = [];
+ Object.values(selectedRows).forEach((selectedRow: any) => {
+ if (!runHashList.includes(selectedRow.runHash)) {
+ runHashList.push(selectedRow.runHash);
+ const rowData = {
+ key: selectedRow.runHash,
+ date: `${moment(selectedRow.creation_time * 1000).format(
+ DATE_WITH_SECONDS,
+ )} • ${processDurationTime(
+ selectedRow?.creation_time * 1000,
+ selectedRow?.end_time ? selectedRow?.end_time * 1000 : Date.now(),
+ )}`,
+ experiment: selectedRow?.experiment?.name ?? 'default',
+ name: selectedRow?.name ?? '-',
+ runHash: selectedRow.runHash,
+ selectKey: selectedRow.selectKey,
+ isInProgress: !selectedRow?.end_time,
+ creationTime: selectedRow.creation_time * 1000000,
+ isDisabled:
+ (archiveMode && selectedRow.archived) ||
+ (!archiveMode && !selectedRow.archived),
+ };
+ if (selectedRow.archived) {
+ unarchivedList.push(rowData);
+ } else {
+ archivedList.push(rowData);
+ }
+ }
+ });
+ archivedList = _.orderBy(archivedList, ['creationTime'], ['desc']);
+ unarchivedList = _.orderBy(unarchivedList, ['creationTime'], ['desc']);
+ tableRef.current?.updateData?.({
+ newData: archiveMode ? archivedList : unarchivedList,
+ });
+ disabledTableRef.current?.updateData?.({
+ newData: !archiveMode ? archivedList : unarchivedList,
+ });
+ return {
+ data: archiveMode ? archivedList : unarchivedList,
+ disabledData: !archiveMode ? archivedList : unarchivedList,
+ };
+ }, [selectedRows, archiveMode]);
+
+ function onArchive() {
+ const ids = data.map((item: any) => item.runHash);
+ archiveRuns(ids, archiveMode)
+ .call()
+ .then(() => onClose());
+ }
+
+ return opened ? (
+ + {cellData} +
+ {!rowData.isDisabled && ( + + )} +
+
+ {archiveMode
+ ? 'Archived runs are not visible in search by default. You can always go back and unarchive them.'
+ : 'The runs will become visible in search.'}
+
+
+
+
+ {Object.values(data).length}
+
+
+ {`runs to ${archivedText}.`}
+
+
+ {!_.isEmpty(data) && (
+
+ )}
+ {!_.isEmpty(disabledData) && (
+
+
+ {Object.values(disabledData).length}
+
+
+ {`runs are already ${archivedText}d.`}
+
+
+ )}
+ {!_.isEmpty(disabledData) && (
+
+ )}
+
+ {children({ width, height })}
+
+ );
+ }
+
+ return (
+
+ {renderElement(footerRenderer)}
+
+ );
+ }
+
+ renderEmptyLayer() {
+ const { data, frozenData, footerHeight, emptyRenderer } = this.props;
+
+ if ((data && data.length) || (frozenData && frozenData.length)) return null;
+ const headerHeight = this._getHeaderHeight();
+ return (
+
+ {renderElement(emptyRenderer)}
+
+ );
+ }
+
+ renderOverlay() {
+ const { overlayRenderer } = this.props;
+
+ return (
+
+ {!!overlayRenderer && renderElement(overlayRenderer)}
+
+ );
+ }
+
+ render() {
+ const {
+ columns,
+ children,
+ width,
+ fixed,
+ data,
+ frozenData,
+ expandColumnKey,
+ disabled,
+ className,
+ style,
+ footerHeight,
+ classPrefix,
+ estimatedRowHeight,
+ } = this.props;
+ this._resetColumnManager(getColumns(columns, children), fixed);
+
+ const _data = expandColumnKey
+ ? this._flattenOnKeys(data, this.getExpandedRowKeys(), this.props.rowKey)
+ : data;
+ if (this._data !== _data) {
+ this.resetAfterRowIndex(0, false);
+ this._data = _data;
+ }
+ // should be after `this._data` assigned
+ this._calcScrollbarSizes();
+ this._totalRowsHeight = this.getTotalRowsHeight();
+
+ const containerStyle = {
+ ...style,
+ width,
+ height: this._getTableHeight() + footerHeight,
+ position: 'relative',
+ };
+ const cls = cn(classPrefix, className, {
+ [`${classPrefix}--fixed`]: fixed,
+ [`${classPrefix}--expandable`]: !!expandColumnKey,
+ [`${classPrefix}--empty`]: data.length === 0,
+ [`${classPrefix}--has-frozen-rows`]: frozenData.length > 0,
+ [`${classPrefix}--has-frozen-columns`]:
+ this.columnManager.hasFrozenColumns(),
+ [`${classPrefix}--disabled`]: disabled,
+ [`${classPrefix}--dynamic`]: !!estimatedRowHeight,
+ });
+ return (
+
+ {this.renderFooter()}
+ {this.renderMainTable()}
+ {this.renderLeftTable()}
+ {this.renderRightTable()}
+ {this.renderResizingLine()}
+ {this.renderEmptyLayer()}
+ {this.renderOverlay()}
+
+ );
+ }
+
+ componentDidMount() {
+ const scrollbarSize = this.props.getScrollbarSize();
+ if (scrollbarSize > 0) {
+ this.setState({ scrollbarSize });
+ }
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ const { data, height, maxHeight, estimatedRowHeight } = this.props;
+ if (data !== prevProps.data) {
+ this._lastScannedRowIndex = -1;
+ this._hasDataChangedSinceEndReached = true;
+ }
+
+ if (maxHeight !== prevProps.maxHeight || height !== prevProps.height) {
+ this._maybeCallOnEndReached();
+ }
+ this._maybeScrollbarPresenceChange();
+
+ if (estimatedRowHeight) {
+ if (this.getTotalRowsHeight() !== this._totalRowsHeight) {
+ this.forceUpdate();
+ }
+ }
+ }
+
+ _prefixClass(className) {
+ return `${this.props.classPrefix}__${className}`;
+ }
+
+ _setContainerRef(ref) {
+ this.tableNode = ref;
+ }
+
+ _setMainTableRef(ref) {
+ this.table = ref;
+ }
+
+ _setLeftTableRef(ref) {
+ this.leftTable = ref;
+ }
+
+ _setRightTableRef(ref) {
+ this.rightTable = ref;
+ }
+
+ _getComponent(name) {
+ if (this.props.components && this.props.components[name])
+ return this.props.components[name];
+ return DEFAULT_COMPONENTS[name];
+ }
+
+ // for dynamic row height
+ _getRowHeight(rowIndex) {
+ const { estimatedRowHeight, rowKey } = this.props;
+ return (
+ this._rowHeightMap[this._data[rowIndex][rowKey]] ||
+ callOrReturn(estimatedRowHeight, {
+ rowData: this._data[rowIndex],
+ rowIndex,
+ })
+ );
+ }
+
+ _getIsResetting() {
+ return this._isResetting;
+ }
+
+ _getHeaderHeight() {
+ const { headerHeight } = this.props;
+ if (Array.isArray(headerHeight)) {
+ return headerHeight.reduce((sum, height) => sum + height, 0);
+ }
+ return headerHeight;
+ }
+
+ _getFrozenRowsHeight() {
+ const { frozenData, rowHeight } = this.props;
+ return frozenData.length * rowHeight;
+ }
+
+ _getTableHeight() {
+ const { height, maxHeight, footerHeight } = this.props;
+ let tableHeight = height - footerHeight;
+
+ if (maxHeight > 0) {
+ const frozenRowsHeight = this._getFrozenRowsHeight();
+ const totalRowsHeight = this.getTotalRowsHeight();
+ const headerHeight = this._getHeaderHeight();
+ const totalHeight =
+ headerHeight +
+ frozenRowsHeight +
+ totalRowsHeight +
+ this._horizontalScrollbarSize;
+ tableHeight = Math.min(totalHeight, maxHeight - footerHeight);
+ }
+
+ return tableHeight;
+ }
+
+ _getBodyHeight() {
+ return (
+ this._getTableHeight() -
+ this._getHeaderHeight() -
+ this._getFrozenRowsHeight()
+ );
+ }
+
+ _getFrozenContainerHeight() {
+ const { maxHeight } = this.props;
+
+ const tableHeight =
+ this._getTableHeight() -
+ (this._data.length > 0 ? this._horizontalScrollbarSize : 0);
+ // in auto height mode tableHeight = totalHeight
+ if (maxHeight > 0) return tableHeight;
+
+ const totalHeight =
+ this.getTotalRowsHeight() +
+ this._getHeaderHeight() +
+ this._getFrozenRowsHeight();
+ return Math.min(tableHeight, totalHeight);
+ }
+
+ _calcScrollbarSizes() {
+ const { fixed, width } = this.props;
+ const { scrollbarSize } = this.state;
+
+ const totalRowsHeight = this.getTotalRowsHeight();
+ const totalColumnsWidth = this.getTotalColumnsWidth();
+
+ const prevHorizontalScrollbarSize = this._horizontalScrollbarSize;
+ const prevVerticalScrollbarSize = this._verticalScrollbarSize;
+
+ if (scrollbarSize === 0) {
+ this._horizontalScrollbarSize = 0;
+ this._verticalScrollbarSize = 0;
+ } else {
+ // we have to set `this._horizontalScrollbarSize` before calling `this._getBodyHeight`
+ if (!fixed || totalColumnsWidth <= width - scrollbarSize) {
+ this._horizontalScrollbarSize = 0;
+ this._verticalScrollbarSize =
+ totalRowsHeight > this._getBodyHeight() ? scrollbarSize : 0;
+ } else {
+ if (totalColumnsWidth > width) {
+ this._horizontalScrollbarSize = scrollbarSize;
+ this._verticalScrollbarSize =
+ totalRowsHeight >
+ this._getBodyHeight() - this._horizontalScrollbarSize
+ ? scrollbarSize
+ : 0;
+ } else {
+ this._horizontalScrollbarSize = 0;
+ this._verticalScrollbarSize = 0;
+ if (totalRowsHeight > this._getBodyHeight()) {
+ this._horizontalScrollbarSize = scrollbarSize;
+ this._verticalScrollbarSize = scrollbarSize;
+ }
+ }
+ }
+ }
+
+ if (
+ prevHorizontalScrollbarSize !== this._horizontalScrollbarSize ||
+ prevVerticalScrollbarSize !== this._verticalScrollbarSize
+ ) {
+ this._scrollbarPresenceChanged = true;
+ }
+ }
+
+ _maybeScrollbarPresenceChange() {
+ if (this._scrollbarPresenceChanged) {
+ const { onScrollbarPresenceChange } = this.props;
+ this._scrollbarPresenceChanged = false;
+
+ onScrollbarPresenceChange({
+ size: this.state.scrollbarSize,
+ horizontal: this._horizontalScrollbarSize > 0,
+ vertical: this._verticalScrollbarSize > 0,
+ });
+ }
+ }
+
+ _maybeCallOnEndReached() {
+ const { onEndReached, onEndReachedThreshold } = this.props;
+ const { scrollTop } = this._scroll;
+ const scrollHeight = this.getTotalRowsHeight();
+ const clientHeight = this._getBodyHeight();
+
+ if (!onEndReached || !clientHeight || !scrollHeight) return;
+ const distanceFromEnd =
+ scrollHeight - scrollTop - clientHeight + this._horizontalScrollbarSize;
+ if (
+ this._lastScannedRowIndex >= 0 &&
+ distanceFromEnd <= onEndReachedThreshold &&
+ (this._hasDataChangedSinceEndReached ||
+ scrollHeight !== this._scrollHeight)
+ ) {
+ this._hasDataChangedSinceEndReached = false;
+ this._scrollHeight = scrollHeight;
+ onEndReached({ distanceFromEnd });
+ }
+ }
+
+ _handleScroll(args) {
+ const lastScrollTop = this._scroll.scrollTop;
+ this.scrollToPosition(args);
+ this.props.onScroll(args);
+
+ if (args.scrollTop > lastScrollTop) this._maybeCallOnEndReached();
+ }
+
+ _handleVerticalScroll({ scrollTop }) {
+ const lastScrollTop = this._scroll.scrollTop;
+
+ if (scrollTop !== lastScrollTop) this.scrollToTop(scrollTop);
+ if (scrollTop > lastScrollTop) this._maybeCallOnEndReached();
+ }
+
+ _handleRowsRendered(args) {
+ this.props.onRowsRendered(args);
+
+ if (args.overscanStopIndex > this._lastScannedRowIndex) {
+ this._lastScannedRowIndex = args.overscanStopIndex;
+ this._maybeCallOnEndReached();
+ }
+ }
+
+ _handleRowHover({ rowKey, hovered }) {
+ if (this.state.activeRowKey !== null) {
+ return;
+ }
+
+ this.setHoveredRow(hovered ? rowKey : null);
+ if (typeof this.props.onRowHover === 'function') {
+ this.props.onRowHover(hovered ? rowKey : undefined);
+ }
+ }
+
+ _handleRowClick({ rowKey }) {
+ if (!this.props.disableRowClick) {
+ const clickedOnSameRow = this.state.activeRowKey === rowKey;
+ this.setState({
+ hoveredRowKey: rowKey,
+ activeRowKey: clickedOnSameRow ? null : rowKey,
+ });
+ if (typeof this.props.onRowClick === 'function') {
+ this.props.onRowClick(clickedOnSameRow ? undefined : rowKey);
+ }
+ }
+ }
+
+ _handleRowExpand({ expanded, rowData, rowIndex, rowKey }) {
+ const expandedRowKeys = cloneArray(this.getExpandedRowKeys());
+ if (expanded) {
+ if (!expandedRowKeys.indexOf(rowKey) >= 0) expandedRowKeys.push(rowKey);
+ } else {
+ const index = expandedRowKeys.indexOf(rowKey);
+ if (index > -1) {
+ expandedRowKeys.splice(index, 1);
+ }
+ }
+ // if `expandedRowKeys` is uncontrolled, update internal state
+ if (this.props.expandedRowKeys === undefined) {
+ this.setState({ expandedRowKeys });
+ }
+ this.props.onRowExpand({ expanded, rowData, rowIndex, rowKey });
+ this.props.onExpandedRowsChange(expandedRowKeys);
+ }
+
+ _handleColumnResize({ key }, width) {
+ this.columnManager.setColumnWidth(key, width);
+ this.setState({ resizingWidth: width });
+
+ const column = this.columnManager.getColumn(key);
+ this.props.onColumnResize({ column, width });
+ }
+
+ _handleColumnResizeStart({ key }) {
+ this.setState({ resizingKey: key });
+ }
+
+ _handleColumnResizeStop() {
+ const { resizingKey, resizingWidth } = this.state;
+ this.setState({ resizingKey: null, resizingWidth: 0 });
+
+ if (!resizingKey || !resizingWidth) return;
+
+ const column = this.columnManager.getColumn(resizingKey);
+ this.props.onColumnResizeEnd({ column, width: resizingWidth });
+ }
+
+ _handleColumnSort(event) {
+ const key = event.currentTarget.dataset.key;
+ const { sortBy, sortState, onColumnSort } = this.props;
+ let order = SortOrder.ASC;
+
+ if (sortState) {
+ order = sortState[key] === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+ } else if (key === sortBy.key) {
+ order = sortBy.order === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+ }
+
+ const column = this.columnManager.getColumn(key);
+ onColumnSort({ column, key, order });
+ }
+
+ _handleFrozenRowHeightChange(rowKey, size, rowIndex, frozen) {
+ if (!frozen) {
+ this._mainRowHeightMap[rowKey] = size;
+ } else if (frozen === FrozenDirection.RIGHT) {
+ this._rightRowHeightMap[rowKey] = size;
+ } else {
+ this._leftRowHeightMap[rowKey] = size;
+ }
+
+ const height = Math.max(
+ this._mainRowHeightMap[rowKey] || 0,
+ this._leftRowHeightMap[rowKey] || 0,
+ this._rightRowHeightMap[rowKey] || 0,
+ );
+
+ if (this._rowHeightMap[rowKey] !== height) {
+ this._handleRowHeightChange(rowKey, height, rowIndex);
+ }
+ }
+
+ _handleRowHeightChange(rowKey, size, rowIndex) {
+ if (this._resetIndex === null) this._resetIndex = rowIndex;
+ else if (this._resetIndex > rowIndex) this._resetIndex = rowIndex;
+
+ this._rowHeightMapBuffer[rowKey] = size;
+ this._updateRowHeights();
+ }
+}
+
+BaseTable.Column = Column;
+BaseTable.PlaceholderKey = ColumnManager.PlaceholderKey;
+
+export default BaseTable;
diff --git a/src/src/components/Table/Column.tsx b/src/src/components/Table/Column.tsx
new file mode 100644
index 00000000..181a8de1
--- /dev/null
+++ b/src/src/components/Table/Column.tsx
@@ -0,0 +1,27 @@
+// @ts-nocheck
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+
+export const Alignment = {
+ LEFT: 'left',
+ CENTER: 'center',
+ RIGHT: 'right',
+};
+
+export const FrozenDirection = {
+ LEFT: 'left',
+ RIGHT: 'right',
+ DEFAULT: true,
+ NONE: false,
+};
+
+/**
+ * Column for BaseTable
+ */
+class Column extends React.Component {}
+
+Column.Alignment = Alignment;
+Column.FrozenDirection = FrozenDirection;
+
+export default Column;
diff --git a/src/src/components/Table/ColumnManager.ts b/src/src/components/Table/ColumnManager.ts
new file mode 100644
index 00000000..b0c8a30e
--- /dev/null
+++ b/src/src/components/Table/ColumnManager.ts
@@ -0,0 +1,206 @@
+// @ts-nocheck
+/* eslint-disable react/prop-types */
+
+import { FrozenDirection } from './Column';
+
+export default class ColumnManager {
+ constructor(columns, fixed) {
+ this._origColumns = [];
+ this.reset(columns, fixed);
+ }
+
+ _cache(key, fn) {
+ if (key in this._cached) return this._cached[key];
+ this._cached[key] = fn();
+ return this._cached[key];
+ }
+
+ reset(columns, fixed) {
+ this._columns = columns.map((column) => {
+ let width = column.width;
+ if (column.resizable) {
+ // don't reset column's `width` if `width` prop doesn't change
+ const idx = this._origColumns.findIndex((x) => x.key === column.key);
+ if (idx >= 0 && this._origColumns[idx].width === column.width) {
+ width = this._columns[idx].width;
+ }
+ }
+ return { ...column, width };
+ });
+ this._origColumns = columns;
+ this._fixed = fixed;
+ this._cached = {};
+ this._columnStyles = this.recomputeColumnStyles();
+ }
+
+ resetCache() {
+ this._cached = {};
+ }
+
+ getOriginalColumns() {
+ return this._origColumns;
+ }
+
+ getColumns() {
+ return this._columns;
+ }
+
+ getVisibleColumns() {
+ return this._cache('visibleColumns', () => {
+ return this._columns.filter((column) => !column.hidden);
+ });
+ }
+
+ hasFrozenColumns() {
+ return this._cache('hasFrozenColumns', () => {
+ return (
+ this._fixed &&
+ this.getVisibleColumns().some((column) => !!column.frozen)
+ );
+ });
+ }
+
+ hasLeftFrozenColumns() {
+ return this._cache('hasLeftFrozenColumns', () => {
+ return (
+ this._fixed &&
+ this.getVisibleColumns().some(
+ (column) =>
+ column.frozen === FrozenDirection.LEFT || column.frozen === true,
+ )
+ );
+ });
+ }
+
+ hasRightFrozenColumns() {
+ return this._cache('hasRightFrozenColumns', () => {
+ return (
+ this._fixed &&
+ this.getVisibleColumns().some(
+ (column) => column.frozen === FrozenDirection.RIGHT,
+ )
+ );
+ });
+ }
+
+ getMainColumns() {
+ return this._cache('mainColumns', () => {
+ const columns = this.getVisibleColumns();
+ if (!this.hasFrozenColumns()) return columns;
+
+ const mainColumns = [];
+ this.getLeftFrozenColumns().forEach((column) => {
+ //columns placeholder for the fixed table above them
+ mainColumns.push({ ...column, [ColumnManager.PlaceholderKey]: true });
+ });
+ this.getVisibleColumns().forEach((column) => {
+ if (!column.frozen) mainColumns.push(column);
+ });
+ this.getRightFrozenColumns().forEach((column) => {
+ mainColumns.push({ ...column, [ColumnManager.PlaceholderKey]: true });
+ });
+
+ return mainColumns;
+ });
+ }
+
+ getLeftFrozenColumns() {
+ return this._cache('leftFrozenColumns', () => {
+ if (!this._fixed) return [];
+ return this.getVisibleColumns().filter(
+ (column) =>
+ column.frozen === FrozenDirection.LEFT || column.frozen === true,
+ );
+ });
+ }
+
+ getRightFrozenColumns() {
+ return this._cache('rightFrozenColumns', () => {
+ if (!this._fixed) return [];
+ return this.getVisibleColumns().filter(
+ (column) => column.frozen === FrozenDirection.RIGHT,
+ );
+ });
+ }
+
+ getColumn(key) {
+ const idx = this._columns.findIndex((column) => column.key === key);
+ return this._columns[idx];
+ }
+
+ getColumnsWidth() {
+ return this._cache('columnsWidth', () => {
+ return this.recomputeColumnsWidth(this.getVisibleColumns());
+ });
+ }
+
+ getLeftFrozenColumnsWidth() {
+ return this._cache('leftFrozenColumnsWidth', () => {
+ return this.recomputeColumnsWidth(this.getLeftFrozenColumns());
+ });
+ }
+
+ getRightFrozenColumnsWidth() {
+ return this._cache('rightFrozenColumnsWidth', () => {
+ return this.recomputeColumnsWidth(this.getRightFrozenColumns());
+ });
+ }
+
+ recomputeColumnsWidth(columns) {
+ return columns.reduce((width, column) => width + column.width, 0);
+ }
+
+ setColumnWidth(key, width) {
+ const column = this.getColumn(key);
+ column.width = width;
+ this._cached = {};
+ this._columnStyles[column.key] = this.recomputeColumnStyle(column);
+ }
+
+ getColumnStyle(key) {
+ return this._columnStyles[key];
+ }
+
+ getColumnStyles() {
+ return this._columnStyles;
+ }
+
+ recomputeColumnStyle(column) {
+ let flexGrow = 0;
+ let flexShrink = 0;
+ if (!this._fixed) {
+ flexGrow = typeof column.flexGrow === 'number' ? column.flexGrow : 0;
+ flexShrink =
+ typeof column.flexShrink === 'number' ? column.flexShrink : 1;
+ }
+ // workaround for Flex bug on IE: https://github.com/philipwalton/flexbugs#flexbug-7
+ const flexValue = `${flexGrow} ${flexShrink} auto`;
+
+ const style = {
+ ...column.style,
+ flex: flexValue,
+ msFlex: flexValue,
+ WebkitFlex: flexValue,
+ width: column.width,
+ overflow: 'hidden',
+ };
+
+ if (!this._fixed && column.maxWidth) {
+ style.maxWidth = column.maxWidth;
+ }
+ if (!this._fixed && column.minWidth) {
+ style.minWidth = column.minWidth;
+ }
+
+ return style;
+ }
+
+ recomputeColumnStyles() {
+ return this._columns.reduce((styles, column) => {
+ styles[column.key] = this.recomputeColumnStyle(column);
+ return styles;
+ }, {});
+ }
+}
+
+ColumnManager.PlaceholderKey = '__placeholder__';
diff --git a/src/src/components/Table/ColumnResizer.tsx b/src/src/components/Table/ColumnResizer.tsx
new file mode 100644
index 00000000..9848de33
--- /dev/null
+++ b/src/src/components/Table/ColumnResizer.tsx
@@ -0,0 +1,230 @@
+// @ts-nocheck
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import { addClassName, removeClassName } from './utils';
+
+const INVALID_VALUE = null;
+
+// copied from https://github.com/mzabriskie/react-draggable/blob/master/lib/utils/domFns.js
+export function addUserSelectStyles(doc) {
+ if (!doc) return;
+ let styleEl = doc.getElementById('react-draggable-style-el');
+ if (!styleEl) {
+ styleEl = doc.createElement('style');
+ styleEl.type = 'text/css';
+ styleEl.id = 'react-draggable-style-el';
+ styleEl.innerHTML =
+ '.react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n';
+ styleEl.innerHTML +=
+ '.react-draggable-transparent-selection *::selection {all: inherit;}\n';
+ doc.getElementsByTagName('head')[0].appendChild(styleEl);
+ }
+ if (doc.body) addClassName(doc.body, 'react-draggable-transparent-selection');
+}
+
+export function removeUserSelectStyles(doc) {
+ if (!doc) return;
+ try {
+ if (doc.body)
+ removeClassName(doc.body, 'react-draggable-transparent-selection');
+ if (doc.selection) {
+ doc.selection.empty();
+ } else {
+ // Remove selection caused by scroll, unless it's a focused input
+ // (we use doc.defaultView in case we're in an iframe)
+ const selection = (doc.defaultView || window).getSelection();
+ if (selection && selection.type !== 'Caret') {
+ selection.removeAllRanges();
+ }
+ }
+ } catch (e) {
+ // probably IE
+ }
+}
+
+const eventsFor = {
+ touch: {
+ start: 'touchstart',
+ move: 'touchmove',
+ stop: 'touchend',
+ },
+ mouse: {
+ start: 'mousedown',
+ move: 'mousemove',
+ stop: 'mouseup',
+ },
+};
+
+let dragEventFor = eventsFor.mouse;
+
+/**
+ * ColumnResizer for BaseTable
+ */
+class ColumnResizer extends React.PureComponent {
+ constructor(props) {
+ super(props);
+
+ this.isDragging = false;
+ this.lastX = INVALID_VALUE;
+ this.width = 0;
+
+ this._setHandleRef = this._setHandleRef.bind(this);
+ this._handleClick = this._handleClick.bind(this);
+ this._handleMouseDown = this._handleMouseDown.bind(this);
+ this._handleMouseUp = this._handleMouseUp.bind(this);
+ this._handleTouchStart = this._handleTouchStart.bind(this);
+ this._handleTouchEnd = this._handleTouchEnd.bind(this);
+ this._handleDragStart = this._handleDragStart.bind(this);
+ this._handleDragStop = this._handleDragStop.bind(this);
+ this._handleDrag = this._handleDrag.bind(this);
+ }
+
+ componentWillUnmount() {
+ if (this.handleRef) {
+ const { ownerDocument } = this.handleRef;
+ ownerDocument.removeEventListener(eventsFor.mouse.move, this._handleDrag);
+ ownerDocument.removeEventListener(
+ eventsFor.mouse.stop,
+ this._handleDragStop,
+ );
+ ownerDocument.removeEventListener(eventsFor.touch.move, this._handleDrag);
+ ownerDocument.removeEventListener(
+ eventsFor.touch.stop,
+ this._handleDragStop,
+ );
+ removeUserSelectStyles(ownerDocument);
+ }
+ }
+
+ render() {
+ const {
+ style,
+ column,
+ onResizeStart,
+ onResize,
+ onResizeStop,
+ minWidth,
+ ...rest
+ } = this.props;
+
+ return (
+
+
+ {cellData}
+
+
+
+
+ {cellData}
+
+
+
+
+ {cellData}
+
+ {!rowData.isDisabled && (
+
+ )}
+
+ );
+ },
+ },
+ ];
+
+ const { data, disabledData } = React.useMemo(() => {
+ let finishedList: any[] = [];
+ let inProgressList: any[] = [];
+ const runHashList: string[] = [];
+ Object.values(selectedRows).forEach((selectedRow: any) => {
+ if (!runHashList.includes(selectedRow.runHash)) {
+ runHashList.push(selectedRow.runHash);
+ const rowData = {
+ key: selectedRow.runHash,
+ date: `${moment(selectedRow.creation_time * 1000).format(
+ DATE_WITH_SECONDS,
+ )} • ${processDurationTime(
+ selectedRow?.creation_time * 1000,
+ Date.now(),
+ )}`,
+ experiment: selectedRow?.experiment?.name ?? 'default',
+ name: selectedRow?.name ?? '-',
+ runHash: selectedRow.runHash,
+ selectKey: selectedRow.selectKey,
+ isInProgress: !selectedRow?.end_time,
+ isDisabled: !selectedRow?.end_time,
+ creationTime: selectedRow.creation_time * 1000000,
+ };
+ if (!selectedRow.end_time) {
+ inProgressList.push(rowData);
+ } else {
+ finishedList.push(rowData);
+ }
+ }
+ });
+
+ finishedList = _.orderBy(finishedList, ['creationTime'], ['desc']);
+ inProgressList = _.orderBy(inProgressList, ['creationTime'], ['desc']);
+
+ tableRef.current?.updateData?.({
+ newData: finishedList,
+ });
+ disabledTableRef.current?.updateData?.({
+ newData: inProgressList,
+ });
+ return {
+ data: finishedList,
+ disabledData: inProgressList,
+ };
+ }, [selectedRows]);
+
+ function onDelete() {
+ const ids = data.map((item: any) => item.runHash);
+ deleteRuns(ids)
+ .call()
+ .then(() => onClose());
+ }
+
+ return opened ? (
+
+
+ You will lose all the logs and data related to them. This action
+ cannot be undone.
+
+
+
+
+ {Object.values(data).length}
+
+
+ runs to delete.
+
+
+ {!_.isEmpty(data) && (
+
+ )}
+ {!_.isEmpty(disabledData) && (
+
+
+ {Object.values(disabledData).length}
+
+
+ runs are still in progress. Unfinished runs cannot be deleted.
+
+
+ )}
+ {!_.isEmpty(disabledData) && (
+
+ )}
+
+ {expandable && '\u25B8'}
+
+
+
+ {this.renderRow}
+
+ {headerHeight + frozenRowsHeight > 0 && (
+ // put header after body and reverse the display order via css
+ // to prevent header's shadow being covered by body
+ 0 ? hoveredRowKey : null}
+ />
+ )}
+
+
+ {value}
+ {index + 1 === TITLE_MAX_ROW_LENGTH ? '...' : ''}
+
+ );
+ });
+ }, [data]);
+
+ return (
+
+ {Title}
}>
+
+ Mixed:
+ {data.length} values
+
+
+
+
+
+
+
+ );
+}
+
+RunNameColumn.displayName = 'RunNameColumn';
+
+export default React.memo(RunNameColumn);
diff --git a/src/src/components/Table/SortIndicator.tsx b/src/src/components/Table/SortIndicator.tsx
new file mode 100644
index 00000000..35c1c4d8
--- /dev/null
+++ b/src/src/components/Table/SortIndicator.tsx
@@ -0,0 +1,37 @@
+// @ts-nocheck
+/* eslint-disable react/prop-types */
+
+import React from 'react';
+import cn from 'classnames';
+
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import SortOrder from './SortOrder';
+
+/**
+ * default SortIndicator for BaseTable
+ */
+const SortIndicator = ({ sortOrder, className, style }) => {
+ const cls = cn('BaseTable__sort-indicator', className, {
+ 'BaseTable__sort-indicator--descending': sortOrder === SortOrder.DESC,
+ });
+ return (
+
+
+
+
+ {run}
+
+
+
+ {sortOrder === SortOrder.DESC ? '\u2193' : '\u2191'}
+
+
+ {!hideHeaderActions && isEmpty(selectedRows) ? (
+
+ ) : (
+
+ {showResizeContainerActionBar && (
+
+ ) : !hideHeaderActions && !isEmpty(selectedRows) && multiSelect ? (
+
+ {onManageColumns && (
+ item.key !== '#' && item.key !== 'actions',
+ )}
+ columnsOrder={columnsOrder}
+ hiddenColumns={hiddenColumns}
+ hideSystemMetrics={hideSystemMetrics}
+ onManageColumns={onManageColumns}
+ onColumnsVisibilityChange={onColumnsVisibilityChange}
+ appName={appName}
+ />
+ )}
+ {onRowsChange && (
+ (
+
+ )}
+ component={
+
+ {onTableDiffShow && (
+
+ )}
+ {onExport && (
+
+ }
+ >
+
+ Export
+
+
+
+ )}
+
+
+ ) : (
+ ''
+ )}
+
+
+ {Object.keys(selectedRows).length} Selected
+
+
+ {tableBulkActionsVisibility.delete && (
+
+
+
+ )}
+ {tableBulkActionsVisibility.unarchive && (
+
+
+
+ )}
+ {tableBulkActionsVisibility.archive && (
+
+
+
+ )}
+ {tableBulkActionsVisibility.hideItems && (
+
+
+
+ )}
+ {tableBulkActionsVisibility.showItems && (
+
+
+
+ )}
+
+
+
+
+ {({ width, height }) =>
+ custom ? (
+
+ rowData[rowIndex]?.rowProps}
+ sortBy={{}}
+ useIsScrolling={false}
+ overscanRowCount={1}
+ onEndReachedThreshold={500}
+ getScrollbarSize={() => null}
+ ignoreFunctionInColumnCompare={false}
+ onScroll={() => null}
+ onRowsRendered={() => null}
+ onScrollbarPresenceChange={() => null}
+ onRowExpand={() => null}
+ onExpandedRowsChange={() => null}
+ onColumnSort={() => null}
+ onColumnResize={() => null}
+ onColumnResizeEnd={() => null}
+ onRowHover={onRowHover}
+ onRowClick={onRowClick}
+ disableRowClick={disableRowClick}
+ />
+
+ )
+ }
+
+
+
+
+ !col.isHidden)}
+ onGroupExpandToggle={onGroupExpandToggle}
+ onRowHover={rowHoverHandler}
+ onRowClick={
+ showRowClickBehaviour ? rowClickHandler : undefined
+ }
+ listWindow={listWindow}
+ multiSelect={multiSelect}
+ selectedRows={selectedRows || {}}
+ onRowSelect={onRowSelect}
+ columnsColorScales={columnsColorScales}
+ onToggleColumnsColorScales={onToggleColumnsColorScales}
+ noColumnActions={noColumnActions}
+ {...props}
+ />
+
+
+ ) : (
+
+ {React.isValidElement(cellData) ? cellData : toString(cellData)}
+
+
+
+
+ {rowHeights.map(this.renderHeaderRow)}
+ {frozenData.map(this.renderFrozenRow)}
+
+ {column.title}
+
+ {cells}
+
+
+ {cells}
+
+ );
+ }
+
+ return (
+
+ {cells}
+
+
+
+ );
+}
+
+export default React.memo(TableLoader);
diff --git a/src/src/components/TagForm/TagForm.scss b/src/src/components/TagForm/TagForm.scss
new file mode 100644
index 00000000..34075147
--- /dev/null
+++ b/src/src/components/TagForm/TagForm.scss
@@ -0,0 +1,85 @@
+@import 'src/styles/abstracts/_variables.scss';
+
+.TagForm {
+ &__tagFormContainer {
+ padding: 20px;
+ border-bottom: 1px solid #f2f5fa;
+ &__TextField {
+ width: 100%;
+ margin-top: $space-xxxs;
+ margin-bottom: 20px;
+ }
+
+ &__colorContainer {
+ margin-bottom: 20px;
+ &__colorBox {
+ margin-top: $space-xxxs;
+ padding: 5px;
+ border: $border-grey-lighter;
+ border-radius: 6px;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ &__colorButton {
+ border-radius: $border-radius-circle;
+ margin: 5px;
+ width: 50px;
+ height: 50px;
+ min-width: auto;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .MuiButton-label {
+ width: 34px;
+ height: 34px;
+ border-radius: $border-radius-circle;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ }
+ &__content {
+ width: 34px;
+ height: 34px;
+ border-radius: $border-radius-circle;
+ opacity: 0.2;
+ }
+ &__circle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 16px;
+ height: 16px;
+ border-radius: $border-radius-circle;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+ }
+ &__previewContainer {
+ &__tagPreviewBox {
+ margin-top: $space-xxxs;
+ border: $border-grey-lighter;
+ border-radius: 6px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 56px;
+ position: relative;
+ padding: 0 0.5rem;
+ }
+ }
+ }
+ &__tagFormFooterContainer {
+ height: 64px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ &__cancelButton {
+ margin-right: $space-sm;
+ }
+ }
+}
diff --git a/src/src/components/TagForm/TagForm.tsx b/src/src/components/TagForm/TagForm.tsx
new file mode 100644
index 00000000..3a123dc0
--- /dev/null
+++ b/src/src/components/TagForm/TagForm.tsx
@@ -0,0 +1,238 @@
+import React, { memo, useMemo } from 'react';
+import * as yup from 'yup';
+import { isEmpty, noop } from 'lodash-es';
+import { useFormik } from 'formik';
+
+import { makeStyles } from '@material-ui/core';
+import { Button, TextField } from '@material-ui/core';
+
+import { Badge, Text } from 'components/kit';
+import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+
+import COLORS from 'config/colors/colors';
+import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
+
+import tagsAppModel from 'services/models/tags/tagsAppModel';
+import { trackEvent } from 'services/analytics';
+
+import { ITagFormProps } from 'types/components/TagForm/TagForm';
+
+import './TagForm.scss';
+
+const useStyles = makeStyles({
+ tagColor: {
+ border: ({ colorName, color }: { color: string; colorName: string }) =>
+ `1px solid ${colorName === color ? color : 'transparent'}`,
+ '&:hover, &:focus': {
+ border: ({ colorName }: { colorName: string }) =>
+ `1px solid ${colorName} !important;`,
+ backgroundColor: 'inherit',
+ },
+ },
+});
+
+type TagColorWrapperProp = {
+ colorName: string;
+ onColorButtonClick: (colorName: string) => void;
+ color: string;
+};
+
+function TagColorWrapper({
+ colorName,
+ onColorButtonClick,
+ color,
+}: TagColorWrapperProp) {
+ const { tagColor } = useStyles({ color, colorName });
+ return (
+
+ );
+}
+
+function TagForm({
+ tagData,
+ editMode,
+ tagId,
+ onCloseModal,
+}: ITagFormProps): React.FunctionComponentElement
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name
+
+ onChange(e, 'name')}
+ value={name}
+ size='small'
+ error={!!(touched.name && errors.name)}
+ helperText={touched.name && errors.name}
+ />
+
+ Comment
+
+ onChange(e, 'comment')}
+ className='TagForm__tagFormContainer__TextField TextField__TextArea__OutLined__Small'
+ multiline
+ value={comment}
+ error={!!(touched.comment && errors.comment)}
+ helperText={touched.comment && errors.comment}
+ />
+
+
+
+ Colors
+
+
+
+ {colors}
+
+
+
+ Preview
+
+
+
+
+
+
+
+
+
+
+
+
+ Select Fields To Display In The Tooltip
+
+ option.group}
+ getOptionLabel={(option) => option.label}
+ getOptionSelected={(option, value) => option.value === value.value}
+ renderInput={(params) => (
+ {
+ setInputValue(e.target.value);
+ },
+ }}
+ className='TextField__OutLined__Small'
+ variant='outlined'
+ placeholder='Select Fields'
+ />
+ )}
+ renderOption={(option, { selected }) => (
+
+
+
+ {option.label}
+
+
+ )}
+ renderTags={(value, getTagProps) => (
+
+ {value.map((selected, i) => (
+
+ )}
+ />
+
+
+ Tooltip Visibility On Hover
+
+
+
+
+ Tooltip Appearance
+
+
+
+
+
+
+
+
+
+
+
+
+ bandwidth:
+
+
+ {trendlineOptions.bandwidth}
+
+
+
+ 0.0
+ `${val}`}
+ value={trendlineOptions.bandwidth}
+ onChange={onBandwidthChange}
+ aria-labelledby='track-false-slider'
+ track={false}
+ step={0.01}
+ max={1}
+ min={0}
+ />
+ 1.0
+
+
+
+
+
+
+
+
+
+ {Object.keys(groupedHistory)?.map((id) => (
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+ActionCard.displayName = 'ActionCard';
+
+export default React.memo
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+
+
+
+ {children}
+ +
+
+ {data?.caption || ''}
+
+
+
+ {audio ? (
+
+ ) : (
+
+
+
+ )}
+
+
+ );
+}
+
+Card.displayName = 'Card';
+
+export default React.memo
+
+ {title}
+
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+ {children || (
+
+ {dataListProps?.tableData && (
+
+ )}
+
+ )}
+
+ {withSearchBar && (
+
+ {textSearch.data && (
+
+ )}
+
+
+ );
+}
+
+DataList.displayName = 'DataList';
+
+export default React.memo
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {!!toolbarItems?.length && (
+
+
+
+
+
+
+
+
+
+ {toolbarItems}
+ )}
+
+
+ {({ width, height }) => (
+
+
+ -
+ {({ index, style }: ListChildComponentProps) => {
+ const row = rows[index];
+ return (
+
+ {index !== 0 &&
+ index !== rowsCount - 1 &&
+ Array(row.level + 1)
+ .fill('_')
+ .map((_, i) => (
+
+ ))}
+ {row.root && (
+
+ )}
+
+ );
+}
+
+// Convert the dict to a list of key-value pairs
+function flattenDict(
+ dict: Record
+ {row.key !== null && (
+
+ {row.key}:
+
+ )}
+ {row.sub !== null && (
+
+ {row.sub}
+
+ )}
+ collapseToggler(row.id) : undefined}
+ >
+ {(isCollapsed ? row.closedValue : row.value) as string}
+
+
+ {row.copyContent && (
+
+
+ );
+ }
+
+ function DropdownIndicator(props: any) {
+ const {
+ children = (
+ {children}
+
+
+ );
+ }
+
+ function Control({ children, ...props }: ControlProps{children}
+
+ {label && (
+
+ {label}
+
+ )}
+
+