mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Wylie Conlon
GitHub
parent
7f8b5ac45d
commit
dc96c5c136
1 changed files with 257 additions and 254 deletions
|
|
@ -187,272 +187,275 @@ export function LayerPanel(
|
|||
]);
|
||||
|
||||
return (
|
||||
<section tabIndex={-1} ref={registerLayerRef} className="lnsLayerPanel">
|
||||
<EuiPanel data-test-subj={`lns-layerPanel-${layerIndex}`} paddingSize="s">
|
||||
<EuiFlexGroup gutterSize="s" alignItems="flexStart" responsive={false}>
|
||||
<EuiFlexItem grow={false} className="lnsLayerPanel__settingsFlexItem">
|
||||
<LayerSettings
|
||||
layerId={layerId}
|
||||
layerConfigProps={{
|
||||
...layerVisualizationConfigProps,
|
||||
setState: props.updateVisualization,
|
||||
}}
|
||||
activeVisualization={activeVisualization}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
|
||||
{layerDatasource && (
|
||||
<EuiFlexItem className="lnsLayerPanel__sourceFlexItem">
|
||||
<NativeRenderer
|
||||
render={layerDatasource.renderLayerPanel}
|
||||
nativeProps={{
|
||||
layerId,
|
||||
state: layerDatasourceState,
|
||||
activeData: props.framePublicAPI.activeData,
|
||||
setState: (updater: unknown) => {
|
||||
const newState =
|
||||
typeof updater === 'function' ? updater(layerDatasourceState) : updater;
|
||||
// Look for removed columns
|
||||
const nextPublicAPI = layerDatasource.getPublicAPI({
|
||||
state: newState,
|
||||
layerId,
|
||||
});
|
||||
const nextTable = new Set(
|
||||
nextPublicAPI.getTableSpec().map(({ columnId }) => columnId)
|
||||
);
|
||||
const removed = datasourcePublicAPI
|
||||
.getTableSpec()
|
||||
.map(({ columnId }) => columnId)
|
||||
.filter((columnId) => !nextTable.has(columnId));
|
||||
let nextVisState = props.visualizationState;
|
||||
removed.forEach((columnId) => {
|
||||
nextVisState = activeVisualization.removeDimension({
|
||||
layerId,
|
||||
columnId,
|
||||
prevState: nextVisState,
|
||||
});
|
||||
});
|
||||
|
||||
props.updateAll(datasourceId, newState, nextVisState);
|
||||
},
|
||||
<>
|
||||
<section tabIndex={-1} ref={registerLayerRef} className="lnsLayerPanel">
|
||||
<EuiPanel data-test-subj={`lns-layerPanel-${layerIndex}`} paddingSize="s">
|
||||
<EuiFlexGroup gutterSize="s" alignItems="flexStart" responsive={false}>
|
||||
<EuiFlexItem grow={false} className="lnsLayerPanel__settingsFlexItem">
|
||||
<LayerSettings
|
||||
layerId={layerId}
|
||||
layerConfigProps={{
|
||||
...layerVisualizationConfigProps,
|
||||
setState: props.updateVisualization,
|
||||
}}
|
||||
activeVisualization={activeVisualization}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
|
||||
<EuiSpacer size="m" />
|
||||
|
||||
{groups.map((group, groupIndex) => {
|
||||
const isMissing = !isEmptyLayer && group.required && group.accessors.length === 0;
|
||||
return (
|
||||
<EuiFormRow
|
||||
className={
|
||||
group.supportsMoreColumns
|
||||
? 'lnsLayerPanel__row'
|
||||
: 'lnsLayerPanel__row lnsLayerPanel__row--notSupportsMoreColumns'
|
||||
}
|
||||
fullWidth
|
||||
label={<div className="lnsLayerPanel__groupLabel">{group.groupLabel}</div>}
|
||||
labelType="legend"
|
||||
key={group.groupId}
|
||||
isInvalid={isMissing}
|
||||
error={
|
||||
isMissing ? (
|
||||
<div className="lnsLayerPanel__error">
|
||||
{i18n.translate('xpack.lens.editorFrame.requiredDimensionWarningLabel', {
|
||||
defaultMessage: 'Required dimension',
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
[]
|
||||
)
|
||||
}
|
||||
>
|
||||
<>
|
||||
<ReorderProvider id={group.groupId} className={'lnsLayerPanel__group'}>
|
||||
{group.accessors.map((accessorConfig, accessorIndex) => {
|
||||
const { columnId } = accessorConfig;
|
||||
|
||||
return (
|
||||
<DraggableDimensionButton
|
||||
registerNewButtonRef={registerNewButtonRef}
|
||||
accessorIndex={accessorIndex}
|
||||
columnId={columnId}
|
||||
group={group}
|
||||
groupIndex={groupIndex}
|
||||
key={columnId}
|
||||
layerDatasourceDropProps={layerDatasourceDropProps}
|
||||
label={columnLabelMap[columnId]}
|
||||
layerDatasource={layerDatasource}
|
||||
layerIndex={layerIndex}
|
||||
layerId={layerId}
|
||||
onDrop={onDrop}
|
||||
>
|
||||
<div className="lnsLayerPanel__dimension">
|
||||
<DimensionButton
|
||||
accessorConfig={accessorConfig}
|
||||
label={columnLabelMap[accessorConfig.columnId]}
|
||||
group={group}
|
||||
onClick={(id: string) => {
|
||||
setActiveDimension({
|
||||
isNew: false,
|
||||
activeGroup: group,
|
||||
activeId: id,
|
||||
});
|
||||
}}
|
||||
onRemoveClick={(id: string) => {
|
||||
trackUiEvent('indexpattern_dimension_removed');
|
||||
props.updateAll(
|
||||
datasourceId,
|
||||
layerDatasource.removeColumn({
|
||||
layerId,
|
||||
columnId: id,
|
||||
prevState: layerDatasourceState,
|
||||
}),
|
||||
activeVisualization.removeDimension({
|
||||
layerId,
|
||||
columnId: id,
|
||||
prevState: props.visualizationState,
|
||||
})
|
||||
);
|
||||
removeButtonRef(id);
|
||||
}}
|
||||
>
|
||||
<NativeRenderer
|
||||
render={layerDatasource.renderDimensionTrigger}
|
||||
nativeProps={{
|
||||
...layerDatasourceConfigProps,
|
||||
columnId: accessorConfig.columnId,
|
||||
filterOperations: group.filterOperations,
|
||||
}}
|
||||
/>
|
||||
</DimensionButton>
|
||||
</div>
|
||||
</DraggableDimensionButton>
|
||||
);
|
||||
})}
|
||||
</ReorderProvider>
|
||||
{group.supportsMoreColumns ? (
|
||||
<EmptyDimensionButton
|
||||
group={group}
|
||||
groupIndex={groupIndex}
|
||||
layerId={layerId}
|
||||
layerIndex={layerIndex}
|
||||
layerDatasource={layerDatasource}
|
||||
layerDatasourceDropProps={layerDatasourceDropProps}
|
||||
onClick={(id) => {
|
||||
setActiveDimension({
|
||||
activeGroup: group,
|
||||
activeId: id,
|
||||
isNew: true,
|
||||
});
|
||||
}}
|
||||
onDrop={onDrop}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
</EuiFormRow>
|
||||
);
|
||||
})}
|
||||
<DimensionContainer
|
||||
isOpen={!!activeId}
|
||||
groupLabel={activeGroup?.groupLabel || ''}
|
||||
handleClose={() => {
|
||||
if (layerDatasource.updateStateOnCloseDimension) {
|
||||
const newState = layerDatasource.updateStateOnCloseDimension({
|
||||
state: layerDatasourceState,
|
||||
layerId,
|
||||
columnId: activeId!,
|
||||
});
|
||||
if (newState) {
|
||||
props.updateDatasource(datasourceId, newState);
|
||||
}
|
||||
}
|
||||
setActiveDimension(initialActiveDimensionState);
|
||||
}}
|
||||
panel={
|
||||
<>
|
||||
{activeGroup && activeId && (
|
||||
{layerDatasource && (
|
||||
<EuiFlexItem className="lnsLayerPanel__sourceFlexItem">
|
||||
<NativeRenderer
|
||||
render={layerDatasource.renderDimensionEditor}
|
||||
render={layerDatasource.renderLayerPanel}
|
||||
nativeProps={{
|
||||
...layerDatasourceConfigProps,
|
||||
core: props.core,
|
||||
columnId: activeId,
|
||||
filterOperations: activeGroup.filterOperations,
|
||||
dimensionGroups: groups,
|
||||
setState: (
|
||||
newState: unknown,
|
||||
{
|
||||
shouldReplaceDimension,
|
||||
shouldRemoveDimension,
|
||||
}: {
|
||||
shouldReplaceDimension?: boolean;
|
||||
shouldRemoveDimension?: boolean;
|
||||
} = {}
|
||||
) => {
|
||||
if (shouldReplaceDimension || shouldRemoveDimension) {
|
||||
props.updateAll(
|
||||
datasourceId,
|
||||
newState,
|
||||
shouldRemoveDimension
|
||||
? activeVisualization.removeDimension({
|
||||
layerId,
|
||||
columnId: activeId,
|
||||
prevState: props.visualizationState,
|
||||
})
|
||||
: activeVisualization.setDimension({
|
||||
layerId,
|
||||
groupId: activeGroup.groupId,
|
||||
columnId: activeId,
|
||||
prevState: props.visualizationState,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
props.updateDatasource(datasourceId, newState);
|
||||
}
|
||||
setActiveDimension({
|
||||
...activeDimension,
|
||||
isNew: false,
|
||||
layerId,
|
||||
state: layerDatasourceState,
|
||||
activeData: props.framePublicAPI.activeData,
|
||||
setState: (updater: unknown) => {
|
||||
const newState =
|
||||
typeof updater === 'function' ? updater(layerDatasourceState) : updater;
|
||||
// Look for removed columns
|
||||
const nextPublicAPI = layerDatasource.getPublicAPI({
|
||||
state: newState,
|
||||
layerId,
|
||||
});
|
||||
const nextTable = new Set(
|
||||
nextPublicAPI.getTableSpec().map(({ columnId }) => columnId)
|
||||
);
|
||||
const removed = datasourcePublicAPI
|
||||
.getTableSpec()
|
||||
.map(({ columnId }) => columnId)
|
||||
.filter((columnId) => !nextTable.has(columnId));
|
||||
let nextVisState = props.visualizationState;
|
||||
removed.forEach((columnId) => {
|
||||
nextVisState = activeVisualization.removeDimension({
|
||||
layerId,
|
||||
columnId,
|
||||
prevState: nextVisState,
|
||||
});
|
||||
});
|
||||
|
||||
props.updateAll(datasourceId, newState, nextVisState);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{activeGroup &&
|
||||
activeId &&
|
||||
!activeDimension.isNew &&
|
||||
activeVisualization.renderDimensionEditor &&
|
||||
activeGroup?.enableDimensionEditor && (
|
||||
<div className="lnsLayerPanel__styleEditor">
|
||||
<NativeRenderer
|
||||
render={activeVisualization.renderDimensionEditor}
|
||||
nativeProps={{
|
||||
...layerVisualizationConfigProps,
|
||||
groupId: activeGroup.groupId,
|
||||
accessor: activeId,
|
||||
setState: props.updateVisualization,
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
|
||||
<EuiSpacer size="m" />
|
||||
|
||||
{groups.map((group, groupIndex) => {
|
||||
const isMissing = !isEmptyLayer && group.required && group.accessors.length === 0;
|
||||
return (
|
||||
<EuiFormRow
|
||||
className={
|
||||
group.supportsMoreColumns
|
||||
? 'lnsLayerPanel__row'
|
||||
: 'lnsLayerPanel__row lnsLayerPanel__row--notSupportsMoreColumns'
|
||||
}
|
||||
fullWidth
|
||||
label={<div className="lnsLayerPanel__groupLabel">{group.groupLabel}</div>}
|
||||
labelType="legend"
|
||||
key={group.groupId}
|
||||
isInvalid={isMissing}
|
||||
error={
|
||||
isMissing ? (
|
||||
<div className="lnsLayerPanel__error">
|
||||
{i18n.translate('xpack.lens.editorFrame.requiredDimensionWarningLabel', {
|
||||
defaultMessage: 'Required dimension',
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
[]
|
||||
)
|
||||
}
|
||||
>
|
||||
<>
|
||||
<ReorderProvider id={group.groupId} className={'lnsLayerPanel__group'}>
|
||||
{group.accessors.map((accessorConfig, accessorIndex) => {
|
||||
const { columnId } = accessorConfig;
|
||||
|
||||
return (
|
||||
<DraggableDimensionButton
|
||||
registerNewButtonRef={registerNewButtonRef}
|
||||
accessorIndex={accessorIndex}
|
||||
columnId={columnId}
|
||||
group={group}
|
||||
groupIndex={groupIndex}
|
||||
key={columnId}
|
||||
layerDatasourceDropProps={layerDatasourceDropProps}
|
||||
label={columnLabelMap[columnId]}
|
||||
layerDatasource={layerDatasource}
|
||||
layerIndex={layerIndex}
|
||||
layerId={layerId}
|
||||
onDrop={onDrop}
|
||||
>
|
||||
<div className="lnsLayerPanel__dimension">
|
||||
<DimensionButton
|
||||
accessorConfig={accessorConfig}
|
||||
label={columnLabelMap[accessorConfig.columnId]}
|
||||
group={group}
|
||||
onClick={(id: string) => {
|
||||
setActiveDimension({
|
||||
isNew: false,
|
||||
activeGroup: group,
|
||||
activeId: id,
|
||||
});
|
||||
}}
|
||||
onRemoveClick={(id: string) => {
|
||||
trackUiEvent('indexpattern_dimension_removed');
|
||||
props.updateAll(
|
||||
datasourceId,
|
||||
layerDatasource.removeColumn({
|
||||
layerId,
|
||||
columnId: id,
|
||||
prevState: layerDatasourceState,
|
||||
}),
|
||||
activeVisualization.removeDimension({
|
||||
layerId,
|
||||
columnId: id,
|
||||
prevState: props.visualizationState,
|
||||
})
|
||||
);
|
||||
removeButtonRef(id);
|
||||
}}
|
||||
>
|
||||
<NativeRenderer
|
||||
render={layerDatasource.renderDimensionTrigger}
|
||||
nativeProps={{
|
||||
...layerDatasourceConfigProps,
|
||||
columnId: accessorConfig.columnId,
|
||||
filterOperations: group.filterOperations,
|
||||
}}
|
||||
/>
|
||||
</DimensionButton>
|
||||
</div>
|
||||
</DraggableDimensionButton>
|
||||
);
|
||||
})}
|
||||
</ReorderProvider>
|
||||
{group.supportsMoreColumns ? (
|
||||
<EmptyDimensionButton
|
||||
group={group}
|
||||
groupIndex={groupIndex}
|
||||
layerId={layerId}
|
||||
layerIndex={layerIndex}
|
||||
layerDatasource={layerDatasource}
|
||||
layerDatasourceDropProps={layerDatasourceDropProps}
|
||||
onClick={(id) => {
|
||||
setActiveDimension({
|
||||
activeGroup: group,
|
||||
activeId: id,
|
||||
isNew: true,
|
||||
});
|
||||
}}
|
||||
onDrop={onDrop}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
</EuiFormRow>
|
||||
);
|
||||
})}
|
||||
|
||||
<EuiSpacer size="m" />
|
||||
|
||||
<EuiFlexGroup justifyContent="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
<RemoveLayerButton
|
||||
onRemoveLayer={onRemoveLayer}
|
||||
layerIndex={layerIndex}
|
||||
isOnlyLayer={isOnlyLayer}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</section>
|
||||
|
||||
<DimensionContainer
|
||||
isOpen={!!activeId}
|
||||
groupLabel={activeGroup?.groupLabel || ''}
|
||||
handleClose={() => {
|
||||
if (layerDatasource.updateStateOnCloseDimension) {
|
||||
const newState = layerDatasource.updateStateOnCloseDimension({
|
||||
state: layerDatasourceState,
|
||||
layerId,
|
||||
columnId: activeId!,
|
||||
});
|
||||
if (newState) {
|
||||
props.updateDatasource(datasourceId, newState);
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
||||
<EuiSpacer size="m" />
|
||||
|
||||
<EuiFlexGroup justifyContent="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
<RemoveLayerButton
|
||||
onRemoveLayer={onRemoveLayer}
|
||||
layerIndex={layerIndex}
|
||||
isOnlyLayer={isOnlyLayer}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</section>
|
||||
setActiveDimension(initialActiveDimensionState);
|
||||
}}
|
||||
panel={
|
||||
<>
|
||||
{activeGroup && activeId && (
|
||||
<NativeRenderer
|
||||
render={layerDatasource.renderDimensionEditor}
|
||||
nativeProps={{
|
||||
...layerDatasourceConfigProps,
|
||||
core: props.core,
|
||||
columnId: activeId,
|
||||
filterOperations: activeGroup.filterOperations,
|
||||
dimensionGroups: groups,
|
||||
setState: (
|
||||
newState: unknown,
|
||||
{
|
||||
shouldReplaceDimension,
|
||||
shouldRemoveDimension,
|
||||
}: {
|
||||
shouldReplaceDimension?: boolean;
|
||||
shouldRemoveDimension?: boolean;
|
||||
} = {}
|
||||
) => {
|
||||
if (shouldReplaceDimension || shouldRemoveDimension) {
|
||||
props.updateAll(
|
||||
datasourceId,
|
||||
newState,
|
||||
shouldRemoveDimension
|
||||
? activeVisualization.removeDimension({
|
||||
layerId,
|
||||
columnId: activeId,
|
||||
prevState: props.visualizationState,
|
||||
})
|
||||
: activeVisualization.setDimension({
|
||||
layerId,
|
||||
groupId: activeGroup.groupId,
|
||||
columnId: activeId,
|
||||
prevState: props.visualizationState,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
props.updateDatasource(datasourceId, newState);
|
||||
}
|
||||
setActiveDimension({
|
||||
...activeDimension,
|
||||
isNew: false,
|
||||
});
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{activeGroup &&
|
||||
activeId &&
|
||||
!activeDimension.isNew &&
|
||||
activeVisualization.renderDimensionEditor &&
|
||||
activeGroup?.enableDimensionEditor && (
|
||||
<div className="lnsLayerPanel__styleEditor">
|
||||
<NativeRenderer
|
||||
render={activeVisualization.renderDimensionEditor}
|
||||
nativeProps={{
|
||||
...layerVisualizationConfigProps,
|
||||
groupId: activeGroup.groupId,
|
||||
accessor: activeId,
|
||||
setState: props.updateVisualization,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue