Skip to content

Commit

Permalink
Add Drag Across Axis Functionality to Vis Builder
Browse files Browse the repository at this point in the history
Signed-off-by: Suchit Sahoo <suchsah@amazon.com>
  • Loading branch information
LDrago27 committed Jul 9, 2024
1 parent e74ed2c commit c967677
Show file tree
Hide file tree
Showing 19 changed files with 853 additions and 186 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,49 @@

import { EuiForm } from '@elastic/eui';
import React from 'react';
import { useVisualizationType } from '../../utils/use';
import { useTypedSelector } from '../../utils/state_management';

import './config_panel.scss';
import { mapSchemaToAggPanel } from './schema_to_dropbox';
import { SecondaryPanel } from './secondary_panel';
import { Schemas } from '../../../../../vis_default_editor/public';
import {
AggConfig,
AggConfigs,
CreateAggConfigParams,
} from '../../../../../data/common/search/aggs';
import { IndexPattern, TimeRange } from '../../../../../data/public';
import { SchemaDisplayStates } from '.';

export function ConfigPanel() {
const vizType = useVisualizationType();
const editingState = useTypedSelector(
(state) => state.visualization.activeVisualization?.draftAgg
);
const schemas = vizType.ui.containerConfig.data.schemas;
export interface AggProps {
indexPattern: IndexPattern | undefined;
aggConfigs: AggConfigs | undefined;
aggs: AggConfig[];
timeRange: TimeRange;
}

export interface ConfigPanelProps {
schemas: Schemas;
editingState?: CreateAggConfigParams;
aggProps: AggProps;
activeSchemaFields: SchemaDisplayStates;
setActiveSchemaFields: React.Dispatch<React.SetStateAction<SchemaDisplayStates>>;
}

export function ConfigPanel({
schemas,
editingState,
aggProps,
activeSchemaFields,
setActiveSchemaFields,
}: ConfigPanelProps) {
if (!schemas) return null;

const mainPanel = mapSchemaToAggPanel(schemas);
const mainPanel = mapSchemaToAggPanel(

Check warning on line 45 in src/plugins/vis_builder/public/application/components/data_tab/config_panel.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/config_panel.tsx#L45

Added line #L45 was not covered by tests
schemas,
aggProps,
activeSchemaFields,
setActiveSchemaFields
);

return (
<EuiForm className={`vbConfig ${editingState ? 'showSecondary' : ''}`}>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export enum FIELD_SELECTOR_ID {
COUNT = 'preDefinedCountMetric',
CATEGORICAL = 'categoricalFields',
NUMERICAL = 'numericalFields',
META = 'metaFields',
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { DropResult } from '@elastic/eui';
import { AnyAction } from 'redux';
import { createNewAggConfig } from '../utils/get_valid_aggregations';
import { updateAggConfigParams } from '../../../utils/state_management/visualization_slice';
import { Schemas } from '../../../../../../vis_default_editor/public';
import { AggProps } from '../config_panel';
import { SchemaDisplayStates } from '../index';
import { Dispatch } from '../../../../../../opensearch_dashboards_utils/common/state_containers/types';
import { AggsStart } from '../../../../../../data/common';

export interface DragDropProperties {
dropResult: DropResult;
schemas: Schemas;
aggProps: AggProps;
aggService: AggsStart;
activeSchemaFields: SchemaDisplayStates;
dispatch: Dispatch<AnyAction>;
}

export function addFieldToConfiguration({
dropResult,
schemas,
aggProps,
aggService,
activeSchemaFields,
dispatch,
}: DragDropProperties) {
const { source, destination, combine, draggableId } = dropResult;

Check warning on line 33 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts#L33

Added line #L33 was not covered by tests

const destinationSchemaName = destination?.droppableId;
const destinationSchema = schemas.all.find((schema) => schema.name === destinationSchemaName);

Check warning on line 36 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts#L35-L36

Added lines #L35 - L36 were not covered by tests

const newFieldToAdd = draggableId;

Check warning on line 38 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts#L38

Added line #L38 was not covered by tests

if (!destinationSchema || !destinationSchemaName) {
// Invalid drop target selected
return;

Check warning on line 42 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts#L42

Added line #L42 was not covered by tests
}

const destinationFields = activeSchemaFields[destinationSchemaName];

Check warning on line 45 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts#L45

Added line #L45 was not covered by tests

if (!combine && destination && destinationFields.length >= destinationSchema?.max) {
// Can't Add additional Fields
return;

Check warning on line 49 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts#L49

Added line #L49 was not covered by tests
}

// Adding the new field
createNewAggConfig({

Check warning on line 53 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts#L53

Added line #L53 was not covered by tests
fieldName: newFieldToAdd,
sourceGroup: source.droppableId,
destinationSchema,
aggProps,
aggService,
sourceAgg: null,
});

const updatedAggConfigs = aggProps.aggConfigs?.aggs;

Check warning on line 62 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts#L62

Added line #L62 was not covered by tests

if (updatedAggConfigs) {
dispatch(updateAggConfigParams(updatedAggConfigs.map((agg) => agg.serialize())));

Check warning on line 65 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/add_field_to_configuration.ts#L65

Added line #L65 was not covered by tests
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { updateAggConfigParams } from '../../../utils/state_management/visualization_slice';
import { createNewAggConfig } from '../utils/get_valid_aggregations';
import { DragDropProperties } from './add_field_to_configuration';

export function moveFieldBetweenSchemas({
dropResult,
schemas,
aggProps,
aggService,
activeSchemaFields,
dispatch,
}: DragDropProperties) {
const { source, destination, combine, draggableId } = dropResult;

Check warning on line 18 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L18

Added line #L18 was not covered by tests

const destinationSchemaName = destination?.droppableId;

Check warning on line 20 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L20

Added line #L20 was not covered by tests
if (!destinationSchemaName) {
// Invalid Transition
return;

Check warning on line 23 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L23

Added line #L23 was not covered by tests
}
const sourceAggId = draggableId;

Check warning on line 25 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L25

Added line #L25 was not covered by tests

const destinationSchema = schemas.all.find(

Check warning on line 27 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L27

Added line #L27 was not covered by tests
(schema) => schema.name === (destination?.droppableId || combine?.droppableId)
);

if (!destinationSchema) {
// Invalid Transition
return;

Check warning on line 33 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L33

Added line #L33 was not covered by tests
}

const sourceAgg = aggProps.aggConfigs?.aggs.find((agg) => agg.id === sourceAggId);
const sourceFieldName = sourceAgg?.fieldName();

Check warning on line 37 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L36-L37

Added lines #L36 - L37 were not covered by tests

const destinationAggFields = activeSchemaFields[destinationSchemaName];

Check warning on line 39 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L39

Added line #L39 was not covered by tests

const destinationLimit = destinationSchema?.max;

Check warning on line 41 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L41

Added line #L41 was not covered by tests

if (destinationLimit && destinationAggFields.length <= destinationLimit) {
// destination schema has space for more items to be added
// We Need to update sourceAgg

createNewAggConfig({

Check warning on line 47 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L47

Added line #L47 was not covered by tests
fieldName: sourceFieldName,
sourceGroup: source.droppableId,
destinationSchema,
aggProps,
aggService,
sourceAgg,
});

// Remove the sourceAggConfig from the updated Config
const updatedAggConfig = aggProps.aggConfigs?.aggs.filter((agg) => agg.id !== sourceAggId);

Check warning on line 57 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L57

Added line #L57 was not covered by tests

if (updatedAggConfig?.length) {
dispatch(updateAggConfigParams(updatedAggConfig.map((agg) => agg.serialize())));

Check warning on line 60 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/move_field_between_schemas.ts#L60

Added line #L60 was not covered by tests
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { reorderAgg } from '../../../utils/state_management/visualization_slice';
import { DragDropProperties } from './add_field_to_configuration';

export function reorderFieldsWithinSchema({
dropResult,
schemas,
activeSchemaFields,
dispatch,
}: DragDropProperties) {
const { destination, draggableId } = dropResult;

Check warning on line 15 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts#L15

Added line #L15 was not covered by tests

const destinationSchemaName = destination?.droppableId;

Check warning on line 17 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts#L17

Added line #L17 was not covered by tests
if (!destinationSchemaName) {
// Invalid Transition
return;

Check warning on line 20 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts#L20

Added line #L20 was not covered by tests
}
const destinationAggFields = activeSchemaFields[destinationSchemaName];

Check warning on line 22 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts#L22

Added line #L22 was not covered by tests

const sourceAggId = draggableId;
const destinationAggId = destinationAggFields[destination?.index].id;

Check warning on line 25 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts#L24-L25

Added lines #L24 - L25 were not covered by tests

const destinationSchema = schemas.all.find((schema) => schema.name === destination?.droppableId);

Check warning on line 27 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts#L27

Added line #L27 was not covered by tests

if (!destinationSchema) {
// Invalid Transition
return;

Check warning on line 31 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts#L31

Added line #L31 was not covered by tests
}

dispatch(

Check warning on line 34 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/reorder_fields_within_schema.ts#L34

Added line #L34 was not covered by tests
reorderAgg({
sourceId: sourceAggId,
destinationId: destinationAggId,
})
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { updateAggConfigParams } from '../../../utils/state_management/visualization_slice';
import { FIELD_SELECTOR_ID } from '../constants';
import { createNewAggConfig } from '../utils/get_valid_aggregations';
import { DragDropProperties } from './add_field_to_configuration';

export function replaceFieldInConfiguration({
dropResult,
schemas,
aggProps,
aggService,
dispatch,
}: DragDropProperties) {
const { source, combine, draggableId } = dropResult;

Check warning on line 18 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L18

Added line #L18 was not covered by tests

const destinationSchemaName = combine?.droppableId;

Check warning on line 20 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L20

Added line #L20 was not covered by tests
if (!destinationSchemaName) {
return;

Check warning on line 22 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L22

Added line #L22 was not covered by tests
}

const sourceAggId = draggableId;
const destinationAggId = combine?.draggableId;

Check warning on line 26 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L25-L26

Added lines #L25 - L26 were not covered by tests

const destinationSchema = schemas.all.find((schema) => schema.name === combine?.droppableId);

Check warning on line 28 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L28

Added line #L28 was not covered by tests

if (!destinationSchema) {
// Invalid Transition
return;

Check warning on line 32 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L32

Added line #L32 was not covered by tests
}

const sourceSchema = source.droppableId;

Check warning on line 35 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L35

Added line #L35 was not covered by tests

if (Object.values(FIELD_SELECTOR_ID).includes(sourceSchema as FIELD_SELECTOR_ID)) {
// Replacing an exisitng configuration with a new field from field selector panel

const newFieldToAdd = draggableId;
createNewAggConfig({

Check warning on line 41 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L40-L41

Added lines #L40 - L41 were not covered by tests
fieldName: newFieldToAdd,
sourceGroup: source.droppableId,
destinationSchema,
aggProps,
aggService,
sourceAgg: null,
});

// Removing the exisiting destination Aggregation
const updatedAggConfig = aggProps.aggConfigs?.aggs.filter((agg) => agg.id !== destinationAggId);

Check warning on line 51 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L51

Added line #L51 was not covered by tests

if (updatedAggConfig) {
dispatch(updateAggConfigParams(updatedAggConfig.map((agg) => agg.serialize())));

Check warning on line 54 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L54

Added line #L54 was not covered by tests
}
} else {
// Replacing an existing configuration with another exisiting configuration

const sourceAgg = aggProps.aggConfigs?.aggs.find((agg) => agg.id === sourceAggId);
const sourceFieldName = sourceAgg?.fieldName();

Check warning on line 60 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L59-L60

Added lines #L59 - L60 were not covered by tests

createNewAggConfig({

Check warning on line 62 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L62

Added line #L62 was not covered by tests
fieldName: sourceFieldName,
sourceGroup: source.droppableId,
destinationSchema,
aggProps,
aggService,
sourceAgg,
});

// Removing the exisiting destination and source Aggregation
const updatedAggConfig = aggProps.aggConfigs?.aggs.filter(

Check warning on line 72 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L72

Added line #L72 was not covered by tests
(agg) => agg.id !== destinationAggId && agg.id !== sourceAggId
);

if (updatedAggConfig) {
dispatch(updateAggConfigParams(updatedAggConfig.map((agg) => agg.serialize())));

Check warning on line 77 in src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts

View check run for this annotation

Codecov / codecov/patch

src/plugins/vis_builder/public/application/components/data_tab/drag_drop/replace_field_in_configuration.ts#L77

Added line #L77 was not covered by tests
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
border-bottom: none;
}

&__droppable {
min-height: 1px;
}

&__container {
display: grid;
grid-gap: calc($euiSizeXS / 2);
Expand Down
Loading

0 comments on commit c967677

Please sign in to comment.