diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnPropertiesPanel.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnPropertiesPanel.tsx
index 8da287a8c6..f3445de141 100644
--- a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnPropertiesPanel.tsx
+++ b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnPropertiesPanel.tsx
@@ -14,19 +14,78 @@
* limitations under the License.
*/
-import { DataCubeIcon } from '@finos/legend-art';
+import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
import { observer } from 'mobx-react-lite';
import { useREPLStore } from '../../REPLStoreProvider.js';
-import { useEffect } from 'react';
+import {
+ DataCubeEditorCheckbox,
+ DataCubeEditorColorPickerButton,
+ DataCubeEditorDropdownMenu,
+ DataCubeEditorDropdownMenuItem,
+ DataCubeEditorDropdownMenuItemSeparator,
+ DataCubeEditorDropdownMenuTrigger,
+ DataCubeEditorNumberInput,
+ DataCubeEditorTextInput,
+ WIP_Badge,
+} from './DataCubeEditorShared.js';
+import {
+ DataCubeAggregateFunction,
+ DataCubeColumnDataType,
+ DataCubeColumnPinPlacement,
+ DataCubeFont,
+ DataCubeFontFormatUnderlinedVariant,
+ DataCubeFontTextAlignment,
+ DataCubeNumberScale,
+ DEFAULT_BACKGROUND_COLOR,
+ DEFAULT_COLUMN_MAX_WIDTH,
+ DEFAULT_COLUMN_MIN_WIDTH,
+ DEFAULT_COLUMN_WIDTH,
+ DEFAULT_ERROR_FOREGROUND_COLOR,
+ DEFAULT_FOREGROUND_COLOR,
+ DEFAULT_NEGATIVE_FOREGROUND_COLOR,
+ DEFAULT_ZERO_FOREGROUND_COLOR,
+} from '../../../stores/dataCube/core/DataCubeQueryEngine.js';
export const DataCubeEditorColumnPropertiesPanel = observer(() => {
const replStore = useREPLStore();
- const panel = replStore.dataCubeState.editor.sortsPanel;
-
- useEffect(() => {}, [panel]); // TODO: @akphi - remove this dummy useEffect
+ const dataCube = replStore.dataCube;
+ const panel = dataCube.editor.columnPropertiesPanel;
+ const selectedColumn = panel.selectedColumn;
+ const [openColumnsDropdown, closeColumnsDropdown, columnsDropdownProps] =
+ useDropdownMenu();
+ const [
+ openAggregationTypeDropdown,
+ closeAggregationTypeDropdown,
+ aggregationTypeDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openNumberScaleDropdown,
+ closeNumberScaleDropdown,
+ numberScaleDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openFontFamilyDropdown,
+ closeFontFamilyDropdown,
+ fontFamilyDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openFontSizeDropdown,
+ closeFontSizeDropdown,
+ openFontSizeDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openFontFormatUnderlinedVariantDropdown,
+ closeFontFormatUnderlinedVariantDropdown,
+ fontFormatUnderlinedVariantDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openColumnPinDropdown,
+ closeColumnPinDropdown,
+ columnPinDropdownProps,
+ ] = useDropdownMenu();
return (
-
+
-
+
+
+
+
+ Choose Column:
+
+
+ {selectedColumn?.name ?? '(None)'}
+
+
+ {panel.columns.map((column) => (
+ {
+ panel.setSelectedColumnName(column.name);
+ closeColumnsDropdown();
+ }}
+ >
+ {column.name}
+
+ ))}
+
+ {selectedColumn && (
+ // TODO: if this is an extended column, show the info and link it
+ // e.g. `Extended Column (Leaf)`, `Extended Column (Group)`
+ // with arrow button to go to the extended column editor
+ <>
+
+
+
+ {selectedColumn.dataType}
+
+
+ {selectedColumn.kind}
+
+
+
+ )}
+
+
+
+
+ {selectedColumn && (
+ <>
+
+
+ Display Name:
+
+
{
+ const value = event.target.value.trim();
+ selectedColumn.setDisplayName(
+ value !== '' ? value : undefined,
+ );
+ }}
+ />
+
+
+ {selectedColumn.dataType === DataCubeColumnDataType.NUMBER && (
+ <>
+
+
+ Number Format:
+
+
{
+ selectedColumn.setDecimals(value);
+ }}
+ />
+
+ Decimal places
+
+
+ selectedColumn.setDisplayCommas(
+ !selectedColumn.displayCommas,
+ )
+ }
+ />
+
+ selectedColumn.setNegativeNumberInParens(
+ !selectedColumn.negativeNumberInParens,
+ )
+ }
+ />
+
+
+
+
+ Number Scale:
+
+
+ {selectedColumn.numberScale ?? '(None)'}
+
+
+ {[
+ undefined,
+ DataCubeNumberScale.PERCENT,
+ DataCubeNumberScale.BASIS_POINT,
+ DataCubeNumberScale.THOUSANDS,
+ DataCubeNumberScale.MILLIONS,
+ DataCubeNumberScale.BILLIONS,
+ DataCubeNumberScale.AUTO,
+ ].map((scale) => (
+ {
+ selectedColumn.setNumberScale(scale);
+ closeNumberScaleDropdown();
+ }}
+ >
+ {scale ?? '(None)'}
+
+ ))}
+
+
+
+
+
+ Aggregation Type:
+
+
+ {selectedColumn.aggregateFunction ?? '(None)'}
+
+
+ {[
+ DataCubeAggregateFunction.SUM,
+ DataCubeAggregateFunction.AVERAGE,
+ DataCubeAggregateFunction.COUNT,
+ DataCubeAggregateFunction.MIN,
+ DataCubeAggregateFunction.MAX,
+ ].map((fn) => (
+ {
+ selectedColumn.setAggregateFunction(fn);
+ closeAggregationTypeDropdown();
+ }}
+ >
+ {fn}
+
+ ))}
+
+
+
+
+ Weight Column:
+
+
+ {selectedColumn.weightColumn ?? '(None)'}
+
+
+
+
+
+
+ Exclude from HPivot?
+
+
+ selectedColumn.setExcludedFromHPivot(
+ !selectedColumn.excludedFromHPivot,
+ )
+ }
+ disabled={true}
+ />
+
+
+ )}
+
+ {selectedColumn.dataType === DataCubeColumnDataType.TEXT && (
+ <>
+
+
+ Dislay as Link?
+
+
+ selectedColumn.setDisplayAsLink(
+ !selectedColumn.displayAsLink,
+ )
+ }
+ />
+
+
+ )}
+
+
+
+
+
+ Font:
+
+
+ {selectedColumn.fontFamily}
+
+
+ {[
+ DataCubeFont.ARIAL,
+ DataCubeFont.ROBOTO,
+ DataCubeFont.ROBOTO_CONDENSED,
+ ].map((font) => (
+ {
+ selectedColumn.setFontFamily(font);
+ closeFontFamilyDropdown();
+ }}
+ >
+ {font}
+
+ ))}
+ {
+ selectedColumn.setFontFamily(font);
+ closeFontFamilyDropdown();
+ }}
+ >
+ {font}
+
+ ))}
+ {
+ selectedColumn.setFontFamily(font);
+ closeFontFamilyDropdown();
+ }}
+ >
+ {font}
+
+ ))}
+
+
+
+ {selectedColumn.fontSize}
+
+
+ {[
+ 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26,
+ 28, 32, 36, 48, 72,
+ ].map((size) => (
+ {
+ selectedColumn.setFontSize(size);
+ closeFontSizeDropdown();
+ }}
+ >
+ {size}
+
+ ))}
+
+
+
+
+ selectedColumn.setFontBold(!selectedColumn.fontBold)
+ }
+ >
+
+
+ selectedColumn.setFontItalic(!selectedColumn.fontItalic)
+ }
+ >
+
+
+ selectedColumn.setFontUnderlined(
+ selectedColumn.fontUnderlined === undefined
+ ? DataCubeFontFormatUnderlinedVariant.SOLID
+ : undefined,
+ )
+ }
+ >
+
+
+
+
+ {[
+ DataCubeFontFormatUnderlinedVariant.SOLID,
+ DataCubeFontFormatUnderlinedVariant.DASHED,
+ DataCubeFontFormatUnderlinedVariant.DOTTED,
+ DataCubeFontFormatUnderlinedVariant.DOUBLE,
+ DataCubeFontFormatUnderlinedVariant.WAVY,
+ ].map((variant) => (
+ {
+ selectedColumn.setFontUnderlined(variant);
+ closeFontFormatUnderlinedVariantDropdown();
+ }}
+ >
+
+
+
+
+ ))}
+
+
+ selectedColumn.setFontStrikethrough(
+ !selectedColumn.fontStrikethrough,
+ )
+ }
+ >
+
+
+
+
+
+ selectedColumn.setTextAlign(
+ DataCubeFontTextAlignment.LEFT,
+ )
+ }
+ >
+
+
+ selectedColumn.setTextAlign(
+ DataCubeFontTextAlignment.CENTER,
+ )
+ }
+ >
+
+
+ selectedColumn.setTextAlign(
+ DataCubeFontTextAlignment.RIGHT,
+ )
+ }
+ >
+
+
+
+
+
+
+ Colors:
+
+
+
+
+
+ Normal
+
+
+ Negative
+
+
+ Zero
+
+
+ Error
+
+
+
+
+ Foreground:
+
+
+
+ selectedColumn.setForegroundColor(value)
+ }
+ />
+
+
+
+ selectedColumn.setForegroundNegativeColor(value)
+ }
+ />
+
+
+
+ selectedColumn.setForegroundZeroColor(value)
+ }
+ />
+
+
+
+ selectedColumn.setForegroundErrorColor(value)
+ }
+ />
+
+
+
+
+ Background:
+
+
+
+ selectedColumn.setBackgroundColor(value)
+ }
+ />
+
+
+
+ selectedColumn.setBackgroundNegativeColor(value)
+ }
+ />
+
+
+
+ selectedColumn.setBackgroundZeroColor(value)
+ }
+ />
+
+
+
+ selectedColumn.setBackgroundErrorColor(value)
+ }
+ />
+
+
+
+
+
+
+
+ Hide from View?
+
+
+ selectedColumn.setHideFromView(!selectedColumn.hideFromView)
+ }
+ disabled={true}
+ />
+
+
+
+
+ Pin:
+
+
+ {selectedColumn.pinned ?? '(None)'}
+
+
+ {[
+ undefined,
+ DataCubeColumnPinPlacement.LEFT,
+ DataCubeColumnPinPlacement.RIGHT,
+ ].map((placement) => (
+ {
+ selectedColumn.setPinned(placement);
+ closeColumnPinDropdown();
+ }}
+ >
+ {placement ?? '(None)'}
+
+ ))}
+
+
+
+
+
+ Width:
+
+
{
+ if (
+ selectedColumn.fixedWidth === undefined &&
+ selectedColumn.minWidth === undefined &&
+ selectedColumn.maxWidth === undefined
+ ) {
+ selectedColumn.setFixedWidth(DEFAULT_COLUMN_WIDTH);
+ selectedColumn.setMinWidth(undefined);
+ selectedColumn.setMaxWidth(undefined);
+ } else {
+ selectedColumn.setFixedWidth(undefined);
+ selectedColumn.setMinWidth(undefined);
+ selectedColumn.setMaxWidth(undefined);
+ }
+ }}
+ />
+
+ {
+ selectedColumn.setFixedWidth(
+ selectedColumn.fixedWidth !== undefined
+ ? undefined
+ : DEFAULT_COLUMN_WIDTH,
+ );
+ selectedColumn.setMinWidth(undefined);
+ selectedColumn.setMaxWidth(undefined);
+ }}
+ />
+
+ value !== undefined && value > 0}
+ value={selectedColumn.fixedWidth}
+ setValue={(value) => {
+ selectedColumn.setFixedWidth(value);
+ }}
+ disabled={
+ selectedColumn.minWidth !== undefined ||
+ selectedColumn.maxWidth !== undefined
+ }
+ />
+
+ {
+ if (
+ selectedColumn.minWidth === undefined &&
+ selectedColumn.maxWidth === undefined
+ ) {
+ selectedColumn.setMinWidth(DEFAULT_COLUMN_MIN_WIDTH);
+ selectedColumn.setMaxWidth(DEFAULT_COLUMN_MAX_WIDTH);
+ selectedColumn.setFixedWidth(undefined);
+ } else {
+ selectedColumn.setMinWidth(undefined);
+ selectedColumn.setMaxWidth(undefined);
+ selectedColumn.setFixedWidth(undefined);
+ }
+ }}
+ />
+
+ value !== undefined && value > 0}
+ value={selectedColumn.minWidth}
+ setValue={(value) => {
+ selectedColumn.setMinWidth(value);
+ }}
+ disabled={selectedColumn.fixedWidth !== undefined}
+ />
+
+
+ value !== undefined &&
+ value >= (selectedColumn.minWidth ?? 0)
+ }
+ value={selectedColumn.maxWidth}
+ setValue={(value) => {
+ selectedColumn.setMaxWidth(value);
+ }}
+ disabled={selectedColumn.fixedWidth !== undefined}
+ />
+
+
+
+
+ Blur Content?
+
+
selectedColumn.setBlur(!selectedColumn.blur)}
+ disabled={true}
+ />
+
+
+ )}
+
+
);
});
diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnsPanel.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnsPanel.tsx
index 8efde0b831..8bc57afd5f 100644
--- a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnsPanel.tsx
+++ b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnsPanel.tsx
@@ -21,12 +21,12 @@ import { useEffect } from 'react';
export const DataCubeEditorColumnsPanel = observer(() => {
const replStore = useREPLStore();
- const panel = replStore.dataCubeState.editor.sortsPanel;
+ const panel = replStore.dataCube.editor.sortsPanel;
useEffect(() => {}, [panel]); // TODO: @akphi - remove this dummy useEffect
return (
-
+
diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnsSelector.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnsSelector.tsx
index 27e2bbc3c9..a8ef07503a 100644
--- a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnsSelector.tsx
+++ b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorColumnsSelector.tsx
@@ -15,20 +15,21 @@
*/
import { observer } from 'mobx-react-lite';
-import { DataCubeIcon } from '@finos/legend-art';
+import { cn, DataCubeIcon } from '@finos/legend-art';
import type {
ColDef,
ColDefField,
GridApi,
- IRowNode,
+ ModelUpdatedEvent,
RowDragEndEvent,
SelectionChangedEvent,
} from '@ag-grid-community/core';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
import {
AgGridReact,
type AgGridReactProps,
type CustomCellRendererProps,
+ type CustomNoRowsOverlayProps,
} from '@ag-grid-community/react';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import type {
@@ -36,6 +37,10 @@ import type {
DataCubeEditorColumnsSelectorState,
} from '../../../stores/dataCube/editor/DataCubeEditorColumnsSelectorState.js';
import { isNonNullable } from '@finos/legend-shared';
+import {
+ getDataForAllFilteredNodes,
+ getDataForAllNodes,
+} from '../../../stores/dataCube/grid/DataCubeGridClientEngine.js';
function getBaseGridProps<
T extends DataCubeEditorColumnsSelectorColumnState,
@@ -55,7 +60,50 @@ function getBaseGridProps<
headerHeight: 20,
suppressRowHoverHighlight: false,
reactiveCustomComponents: true, // TODO: remove on v32 as this would be default to `true` then
- noRowsOverlayComponent: () =>
,
+ noRowsOverlayComponent: (
+ params: CustomNoRowsOverlayProps
& {
+ violationSeverity?: 'warning' | 'error' | undefined;
+ },
+ ) => {
+ if (params.api.getQuickFilter()) {
+ return (
+
+ );
+ }
+ if (params.violationSeverity) {
+ return (
+
+
+
+ No columns selected
+
;
+ },
+ // Show no rows overlay when there are no search results
+ // See https://stackoverflow.com/a/72637410
+ onModelUpdated: (event: ModelUpdatedEvent) => {
+ event.api.getDisplayedRowCount() === 0
+ ? event.api.showNoRowsOverlay()
+ : event.api.hideOverlay();
+ },
};
}
@@ -80,14 +128,54 @@ function getBaseColumnDef<
}
return (params.rowNode?.data as T).name;
},
+ getQuickFilterText: (params) => params.value,
};
}
+/**
+ * Move this display to a separate component to avoid re-rendering the header too frequently
+ */
+const ColumnsSearchResultCountBadge = observer(
+ function ColumnsSearchResultCountBadge<
+ T extends DataCubeEditorColumnsSelectorColumnState,
+ >(props: {
+ selector: DataCubeEditorColumnsSelectorState;
+ gridApi: GridApi;
+ scope: 'available' | 'selected';
+ }) {
+ const { selector, gridApi, scope } = props;
+ return (
+
+ {`${getDataForAllFilteredNodes(gridApi).length}/${scope === 'available' ? selector.availableColumns.length : selector.selectedColumns.length}`}
+
+ {scope === 'available'
+ ? // subscribing to the search text to trigger re-render as it changes
+ selector.availableColumnsSearchText
+ : selector.selectedColumnsSearchText}
+
+
+ );
+ },
+);
+
export const DataCubeEditorColumnsSelector = observer(
function DataCubeEditorColumnsSelector<
T extends DataCubeEditorColumnsSelectorColumnState,
- >(props: { selector: DataCubeEditorColumnsSelectorState }) {
- const { selector } = props;
+ >(props: {
+ selector: DataCubeEditorColumnsSelectorState;
+ extraColumnComponent?:
+ | React.FC<{
+ selector: DataCubeEditorColumnsSelectorState;
+ column: T;
+ }>
+ | undefined;
+ noColumnsSelectedViolationSeverity?: 'warning' | 'error' | undefined;
+ }) {
+ const {
+ selector,
+ extraColumnComponent,
+ noColumnsSelectedViolationSeverity,
+ } = props;
const [selectedAvailableColumns, setSelectedAvailableColumns] = useState<
T[]
>([]);
@@ -98,6 +186,10 @@ export const DataCubeEditorColumnsSelector = observer(
useState(null);
const [selectedColumnsGridApi, setSelectedColumnsGridApi] =
useState(null);
+ const searchAvailableColumnsInputRef = useRef(
+ null,
+ );
+ const searchSelectedColumnsInputRef = useRef(null);
/**
* Since we use managed row dragging for selected columns,
@@ -107,16 +199,11 @@ export const DataCubeEditorColumnsSelector = observer(
*/
const onSelectedColumnsDragStop = useCallback(
(params: RowDragEndEvent) => {
- const newRowData: T[] = [];
- params.api.forEachNode((node: IRowNode) => {
- if (node.data) {
- newRowData.push(node.data);
- }
- });
- selector.setSelectedColumns(newRowData);
+ const newData = getDataForAllNodes(params.api);
+ selector.setSelectedColumns(newData);
selector.setAvailableColumns(
selector.availableColumns.filter(
- (column) => !newRowData.includes(column),
+ (column) => !newData.includes(column),
),
);
},
@@ -154,17 +241,16 @@ export const DataCubeEditorColumnsSelector = observer(
if (event.overIndex === -1) {
return;
}
- const newRowData: T[] = [];
- event.api.forEachNode((node: IRowNode) => {
- if (node.data) {
- newRowData.push(node.data);
- }
- });
- selector.setSelectedColumns(newRowData);
+ const newData = getDataForAllNodes(event.api);
+ selector.setSelectedColumns(newData);
},
[selector],
);
+ /**
+ * Setup row drop zones for each grid to be the other
+ * See https://www.ag-grid.com/react-data-grid/row-dragging-to-grid/
+ */
useEffect(() => {
if (!availableColumnsGridApi || !selectedColumnsGridApi) {
return;
@@ -196,7 +282,7 @@ export const DataCubeEditorColumnsSelector = observer(
]);
return (
-
+
Available columns:
@@ -204,12 +290,35 @@ export const DataCubeEditorColumnsSelector = observer(
+ selector.setAvailableColumnsSearchText(event.target.value)
+ }
+ onKeyDown={(event) => {
+ if (event.code === 'Escape') {
+ event.stopPropagation();
+ searchAvailableColumnsInputRef.current?.select();
+ selector.setAvailableColumnsSearchText('');
+ }
+ }}
/>
+
{
+ selector.setAvailableColumnsSearchText('');
+ searchAvailableColumnsInputRef.current?.focus();
+ }}
+ >
+
setAvailableColumnsGridApi(params.api)}
- rowData={selector.availableColumns}
onSelectionChanged={(event: SelectionChangedEvent) => {
setSelectedAvailableColumns(
event.api
@@ -227,23 +335,43 @@ export const DataCubeEditorColumnsSelector = observer(
.filter(isNonNullable),
);
}}
+ // Using ag-grid quick filter is a cheap way to implement search
+ quickFilterText={selector.availableColumnsSearchText}
+ rowData={selector.availableColumns}
columnDefs={[
{
...getBaseColumnDef(),
+ /**
+ * Support double-click to add all (filtered by search) columns
+ */
headerComponent: (params: CustomCellRendererProps) => (
- {
- // TODO: scope this by the current search
+ // The columns being moved are scoped by the current search
+ const filteredData = getDataForAllFilteredNodes(
+ params.api,
+ );
selector.setSelectedColumns([
...selector.selectedColumns,
- ...selector.availableColumns,
+ ...filteredData,
]);
- selector.setAvailableColumns([]);
+ selector.setAvailableColumns(
+ selector.availableColumns.filter(
+ (column) => !filteredData.includes(column),
+ ),
+ );
params.api.clearFocusedCell();
}}
- >{`[All Columns]`}
+ >
+ {`[All Columns]`}
+ ) => {
const data = params.data;
@@ -252,7 +380,7 @@ export const DataCubeEditorColumnsSelector = observer(
}
return (
{
selector.setSelectedColumns([
@@ -267,7 +395,15 @@ export const DataCubeEditorColumnsSelector = observer(
params.api.clearFocusedCell();
}}
>
- {data.name}
+
+ {data.name}
+
+
+ {extraColumnComponent?.({
+ selector,
+ column: data,
+ }) ?? null}
+
{
- // TODO: scope this by the current search
+ if (!availableColumnsGridApi) {
+ return;
+ }
+ // The columns being moved are scoped by the current search
+ const filteredData = getDataForAllFilteredNodes(
+ availableColumnsGridApi,
+ );
+ const columnsToMove = selectedAvailableColumns.filter(
+ (column) => filteredData.includes(column),
+ );
selector.setSelectedColumns([
...selector.selectedColumns,
- ...selectedAvailableColumns,
+ ...columnsToMove,
]);
selector.setAvailableColumns(
selector.availableColumns.filter(
- (column) => !selectedAvailableColumns.includes(column),
+ (column) => !columnsToMove.includes(column),
),
);
- availableColumnsGridApi?.clearFocusedCell();
+ availableColumnsGridApi.clearFocusedCell();
}}
disabled={selectedAvailableColumns.length === 0}
>
{
- // TODO: scope this by the current search
+ if (!selectedColumnsGridApi) {
+ return;
+ }
+ // The columns being moved are scoped by the current search
+ const filteredData = getDataForAllFilteredNodes(
+ selectedColumnsGridApi,
+ );
+ const columnsToMove = selectedSelectedColumns.filter((column) =>
+ filteredData.includes(column),
+ );
selector.setAvailableColumns([
...selector.availableColumns,
- ...selectedSelectedColumns,
+ ...columnsToMove,
]);
selector.setSelectedColumns(
selector.selectedColumns.filter(
- (column) => !selectedSelectedColumns.includes(column),
+ (column) => !columnsToMove.includes(column),
),
);
- selectedColumnsGridApi?.clearFocusedCell();
+ selectedColumnsGridApi.clearFocusedCell();
}}
disabled={selectedSelectedColumns.length === 0}
>
@@ -327,11 +489,33 @@ export const DataCubeEditorColumnsSelector = observer(
+ selector.setSelectedColumnsSearchText(event.target.value)
+ }
+ onKeyDown={(event) => {
+ if (event.code === 'Escape') {
+ event.stopPropagation();
+ selector.setSelectedColumnsSearchText('');
+ }
+ }}
/>
+
{
+ selector.setSelectedColumnsSearchText('');
+ searchSelectedColumnsInputRef.current?.focus();
+ }}
+ >
+
(),
+ /**
+ * Support double-click to remove all (filtered by search) columns
+ */
headerComponent: (params: CustomCellRendererProps) => (
- {
- // TODO: scope this by the current search
+ // The columns being moved are scoped by the current search
+ const filteredData = getDataForAllFilteredNodes(
+ params.api,
+ );
selector.setAvailableColumns([
...selector.availableColumns,
- ...selector.selectedColumns,
+ ...filteredData,
]);
- selector.setSelectedColumns([]);
+ selector.setSelectedColumns(
+ selector.selectedColumns.filter(
+ (column) => !filteredData.includes(column),
+ ),
+ );
params.api.clearFocusedCell();
}}
- >{`[All Columns]`}
+ >
+ {`[All Columns]`}
+ ) => {
const data = params.data;
@@ -377,7 +583,7 @@ export const DataCubeEditorColumnsSelector = observer(
}
return (
{
selector.setAvailableColumns([
@@ -392,7 +598,15 @@ export const DataCubeEditorColumnsSelector = observer(
params.api.clearFocusedCell();
}}
>
- {data.name}
+
+ {data.name}
+
+
+ {extraColumnComponent?.({
+ selector,
+ column: data,
+ }) ?? null}
+
+
diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorFilterPanel.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorFilterPanel.tsx
index db4292e73c..822e5d4812 100644
--- a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorFilterPanel.tsx
+++ b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorFilterPanel.tsx
@@ -21,12 +21,12 @@ import { useEffect } from 'react';
export const DataCubeEditorFilterPanel = observer(() => {
const replStore = useREPLStore();
- const panel = replStore.dataCubeState.editor.sortsPanel;
+ const panel = replStore.dataCube.editor.sortsPanel;
useEffect(() => {}, [panel]); // TODO: @akphi - remove this dummy useEffect
return (
-
+
diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorGeneralPropertiesPanel.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorGeneralPropertiesPanel.tsx
index 5507ac2d46..0c9ba467ce 100644
--- a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorGeneralPropertiesPanel.tsx
+++ b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorGeneralPropertiesPanel.tsx
@@ -16,14 +16,69 @@
import { observer } from 'mobx-react-lite';
import { useREPLStore } from '../../REPLStoreProvider.js';
-import { DataCubeIcon } from '@finos/legend-art';
+import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
+import {
+ DataCubeFont,
+ DataCubeFontFormatUnderlinedVariant,
+ DataCubeFontTextAlignment,
+ DataCubeNumberScale,
+ DataCubeSelectionStat,
+ DEFAULT_BACKGROUND_COLOR,
+ DEFAULT_ERROR_FOREGROUND_COLOR,
+ DEFAULT_FOREGROUND_COLOR,
+ DEFAULT_NEGATIVE_FOREGROUND_COLOR,
+ DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR,
+ DEFAULT_ZERO_FOREGROUND_COLOR,
+} from '../../../stores/dataCube/core/DataCubeQueryEngine.js';
+import {
+ DataCubeEditorCheckbox,
+ DataCubeEditorColorPickerButton,
+ DataCubeEditorDropdownMenu,
+ DataCubeEditorDropdownMenuItem,
+ DataCubeEditorDropdownMenuItemSeparator,
+ DataCubeEditorDropdownMenuTrigger,
+ DataCubeEditorTextInput,
+ DataCubeEditorNumberInput,
+ WIP_Badge,
+} from './DataCubeEditorShared.js';
export const DataCubeEditorGeneralPropertiesPanel = observer(() => {
const replStore = useREPLStore();
- const panel = replStore.dataCubeState.editor.generalPropertiesPanel;
+ const panel = replStore.dataCube.editor.generalPropertiesPanel;
+ const configuration = panel.configuration;
+ const [
+ openInitialExpandLevelDropdown,
+ closeInitialExpandLevelDropdown,
+ initialExpandLevelDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openNumberScaleDropdown,
+ closeNumberScaleDropdown,
+ numberScaleDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openSelectionStatDropdown,
+ closeSelectionStatDropdown,
+ selectionStatDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openFontFamilyDropdown,
+ closeFontFamilyDropdown,
+ fontFamilyDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openFontSizeDropdown,
+ closeFontSizeDropdown,
+ openFontSizeDropdownProps,
+ ] = useDropdownMenu();
+ const [
+ openFontFormatUnderlinedVariantDropdown,
+ closeFontFormatUnderlinedVariantDropdown,
+ fontFormatUnderlinedVariantDropdownProps,
+ ] = useDropdownMenu();
return (
-
+
-
-
-
Report Title:
-
{
- panel.setName(event.target.value);
- }}
- />
+
+
+
+
+ Report Title:
+
+
{
+ panel.setName(event.target.value);
+ }}
+ />
+
+
+
+
+ Initially Expand to Level:
+
+
+ {configuration.initialExpandLevel ?? '(None)'}
+
+
+ {[undefined, 1, 2, 3, 4, 5, 6, 7, 8].map((level) => (
+ {
+ configuration.setInitialExpandLevel(level);
+ closeInitialExpandLevelDropdown();
+ }}
+ >
+ {level ?? '(None)'}
+
+ ))}
+
+
+
+
+
+
+ Show Root Aggregation?
+
+
+ configuration.setShowRootAggregation(
+ !configuration.showRootAggregation,
+ )
+ }
+ disabled={true}
+ />
+
+
+
+
+ Show Leaf Count?
+
+
+ configuration.setShowLeafCount(!configuration.showLeafCount)
+ }
+ />
+
+
+
+
+ Show Lines?
+
+
+ configuration.setShowTreeLine(!configuration.showTreeLine)
+ }
+ />
+
+ configuration.setShowHorizontalGridLine(
+ !configuration.showHorizontalGridLine,
+ )
+ }
+ />
+
+ configuration.setShowVerticalGridLine(
+ !configuration.showVerticalGridLine,
+ )
+ }
+ />
+
+
+
+
+ Default Number Scale:
+
+
+ {configuration.numberScale ?? '(None)'}
+
+
+ {[
+ undefined,
+ DataCubeNumberScale.PERCENT,
+ DataCubeNumberScale.BASIS_POINT,
+ DataCubeNumberScale.THOUSANDS,
+ DataCubeNumberScale.MILLIONS,
+ DataCubeNumberScale.BILLIONS,
+ DataCubeNumberScale.AUTO,
+ ].map((scale) => (
+ {
+ configuration.setNumberScale(scale);
+ closeNumberScaleDropdown();
+ }}
+ >
+ {scale ?? '(None)'}
+
+ ))}
+
+
+
+
+
+ Show Selection Stats:
+
+
+ {'(None)'}
+
+
+ {[
+ DataCubeSelectionStat.SUM,
+ DataCubeSelectionStat.AVERAGE,
+ DataCubeSelectionStat.COUNT,
+ DataCubeSelectionStat.MIN,
+ DataCubeSelectionStat.MAX,
+ ].map((operation) => (
+ {
+ // TODO
+ closeSelectionStatDropdown();
+ }}
+ >
+ ))}
+
+
+
+
+
+
+ Row Limit:
+
+
+ value !== undefined && (value === -1 || value > 0)
+ }
+ setValue={(value) => panel.setLimit(value ?? -1)}
+ />
+
+ Truncate result to this many rows at every level. Use -1 for
+ unlimited.
+
+
+
+
+
+
+ configuration.setShowWarningForTruncatedResult(
+ !configuration.showWarningForTruncatedResult,
+ )
+ }
+ />
+
+
+
+
+
+
+ Default Font:
+
+
+ {configuration.defaultFontFamily}
+
+
+ {[
+ DataCubeFont.ARIAL,
+ DataCubeFont.ROBOTO,
+ DataCubeFont.ROBOTO_CONDENSED,
+ ].map((font) => (
+ {
+ configuration.setDefaultFontFamily(font);
+ closeFontFamilyDropdown();
+ }}
+ >
+ {font}
+
+ ))}
+ {
+ configuration.setDefaultFontFamily(font);
+ closeFontFamilyDropdown();
+ }}
+ >
+ {font}
+
+ ))}
+ {
+ configuration.setDefaultFontFamily(font);
+ closeFontFamilyDropdown();
+ }}
+ >
+ {font}
+
+ ))}
+
+
+
+ {configuration.defaultFontSize}
+
+
+ {[
+ 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28,
+ 32, 36, 48, 72,
+ ].map((size) => (
+ {
+ configuration.setDefaultFontSize(size);
+ closeFontSizeDropdown();
+ }}
+ >
+ {size}
+
+ ))}
+
+
+
+
+ configuration.setDefaultFontBold(
+ !configuration.defaultFontBold,
+ )
+ }
+ >
+
+
+ configuration.setDefaultFontItalic(
+ !configuration.defaultFontItalic,
+ )
+ }
+ >
+
+
+ configuration.setDefaultFontUnderlined(
+ configuration.defaultFontUnderlined === undefined
+ ? DataCubeFontFormatUnderlinedVariant.SOLID
+ : undefined,
+ )
+ }
+ >
+
+
+
+
+ {[
+ DataCubeFontFormatUnderlinedVariant.SOLID,
+ DataCubeFontFormatUnderlinedVariant.DASHED,
+ DataCubeFontFormatUnderlinedVariant.DOTTED,
+ DataCubeFontFormatUnderlinedVariant.DOUBLE,
+ DataCubeFontFormatUnderlinedVariant.WAVY,
+ ].map((variant) => (
+ {
+ configuration.setDefaultFontUnderlined(variant);
+ closeFontFormatUnderlinedVariantDropdown();
+ }}
+ >
+
+
+
+
+ ))}
+
+
+ configuration.setDefaultFontStrikethrough(
+ !configuration.defaultFontStrikethrough,
+ )
+ }
+ >
+
+
+
+
+
+ configuration.setDefaultTextAlign(
+ DataCubeFontTextAlignment.LEFT,
+ )
+ }
+ >
+
+
+ configuration.setDefaultTextAlign(
+ DataCubeFontTextAlignment.CENTER,
+ )
+ }
+ >
+
+
+ configuration.setDefaultTextAlign(
+ DataCubeFontTextAlignment.RIGHT,
+ )
+ }
+ >
+
+
+
+
+
+
+ Default Colors:
+
+
+
+
+
+ Normal
+
+
+ Negative
+
+
+ Zero
+
+
+ Error
+
+
+
+
+ Foreground:
+
+
+
+ configuration.setDefaultForegroundColor(value)
+ }
+ />
+
+
+
+ configuration.setDefaultForegroundNegativeColor(value)
+ }
+ />
+
+
+
+ configuration.setDefaultForegroundZeroColor(value)
+ }
+ />
+
+
+
+ configuration.setDefaultForegroundErrorColor(value)
+ }
+ />
+
+
+
+
+ Background:
+
+
+
+ configuration.setDefaultBackgroundColor(value)
+ }
+ />
+
+
+
+ configuration.setDefaultBackgroundNegativeColor(value)
+ }
+ />
+
+
+
+ configuration.setDefaultBackgroundZeroColor(value)
+ }
+ />
+
+
+
+ configuration.setDefaultBackgroundErrorColor(value)
+ }
+ />
+
+
+
+
+
+
+
+ Hightlight Rows:
+
+
+ configuration.setAlternateRows(!configuration.alternateRows)
+ }
+ />
+ value !== undefined && value > 0}
+ value={configuration.alternateRowsCount}
+ setValue={(value) =>
+ configuration.setAlternateRowsCount(value ?? 1)
+ }
+ />
+ {`row(s)`}
+
+ configuration.setDefaultBackgroundErrorColor(value)
+ }
+ />
+
+
);
diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorHPivotsPanel.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorHPivotsPanel.tsx
index e39df680d2..6350180d5c 100644
--- a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorHPivotsPanel.tsx
+++ b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorHPivotsPanel.tsx
@@ -21,12 +21,12 @@ import { useEffect } from 'react';
export const DataCubeEditorHPivotsPanel = observer(() => {
const replStore = useREPLStore();
- const panel = replStore.dataCubeState.editor.sortsPanel;
+ const panel = replStore.dataCube.editor.sortsPanel;
useEffect(() => {}, [panel]); // TODO: @akphi - remove this dummy useEffect
return (
-
+
diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorShared.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorShared.tsx
new file mode 100644
index 0000000000..73ba560fec
--- /dev/null
+++ b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorShared.tsx
@@ -0,0 +1,448 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+ BasePopover,
+ Checkbox,
+ cn,
+ DataCubeIcon,
+ DropdownMenu,
+ DropdownMenuItem,
+ HexAlphaColorPicker,
+ HexColorInput,
+ TailwindCSSPalette,
+ type CheckboxProps,
+ type DropdownMenuItemProps,
+ type DropdownMenuProps,
+ type TailwindCSSColorScale,
+ type TailwindCSSColorScaleKey,
+} from '@finos/legend-art';
+import { toNumber } from '@finos/legend-shared';
+import React, { forwardRef, useEffect, useState } from 'react';
+
+export function WIP_Badge() {
+ return (
+
+ WIP
+
+ );
+}
+
+export const DataCubeEditorNumberInput = forwardRef(
+ function DataCubeEditorBaseNumberInput(
+ props: React.InputHTMLAttributes
& {
+ min?: number | undefined;
+ max?: number | undefined;
+ step?: number | undefined;
+ isValid?: (value: number | undefined) => boolean;
+ isDecimal?: boolean | undefined;
+ defaultValue?: number | undefined;
+ value: number | undefined;
+ setValue: (value?: number | undefined) => void;
+ className?: string | undefined;
+ },
+ ref: React.Ref,
+ ) {
+ const {
+ min,
+ max,
+ step,
+ value,
+ setValue,
+ isValid,
+ isDecimal,
+ defaultValue,
+ disabled,
+ className,
+ } = props;
+ const [inputValue, setInputValue] = useState(value ?? '');
+
+ useEffect(() => {
+ setInputValue(value ?? '');
+ }, [value]);
+
+ return (
+ ,
+) {
+ const { className, ...otherProps } = props;
+ return (
+
+ {label}
+
+ )}
+
+ );
+}
+
+export function DataCubeEditorDropdownMenuTrigger(
+ props: React.ButtonHTMLAttributes,
+) {
+ const { children, className, ...otherProps } = props;
+ return (
+
+ {props.children}
+
+
+
+ );
+}
+
+export function DataCubeEditorDropdownMenu(props: DropdownMenuProps) {
+ const { className, ...otherProps } = props;
+ return (
+
;
+}
+
+function DataCubeEditorColorPicker(props: {
+ color: string;
+ onChange: (value: string) => void;
+ onClose: () => void;
+ defaultColor?: string | undefined;
+}) {
+ const { onChange, onClose, defaultColor } = props;
+ const [color, setColor] = useState(props.color);
+
+ return (
+
+
+
+
+ {(
+ [
+ 'slate',
+ 'neutral',
+ 'red',
+ 'orange',
+ 'amber',
+ 'yellow',
+ 'lime',
+ 'green',
+ 'emerald',
+ 'teal',
+ 'sky',
+ 'blue',
+ 'indigo',
+ 'violet',
+ 'purple',
+ 'fuchsia',
+ 'pink',
+ 'rose',
+ ] as TailwindCSSColorScaleKey[]
+ ).map((scale) => (
+
+ {(
+ [
+ 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950,
+ ] as (keyof TailwindCSSColorScale)[]
+ ).map((level) => (
+ {
+ setColor(TailwindCSSPalette[scale][level]);
+ }}
+ />
+ ))}
+
+ ))}
+
+
+
+ {[
+ // Colors from Better Colors - https://clrs.cc/
+ '#000000',
+ '#111111',
+ '#AAAAAA',
+ '#DDDDDD',
+ '#FFFFFF',
+ '#FF4136',
+ '#FF851B',
+ '#FFDC00',
+ '#01FF70',
+ '#2ECC40',
+ '#3D9970',
+ '#39CCCC',
+ '#7FDBFF',
+ '#0074D9',
+ '#001F3F',
+ '#B10DC9',
+ '#F012BE',
+ '#85144B',
+ ].map((_color) => (
+
+ {
+ setColor(_color);
+ }}
+ />
+
+ ))}
+
+
+
+
+
+
+ {defaultColor !== undefined && (
+ {
+ setColor(defaultColor);
+ }}
+ >
+ Reset
+
+ )}
+ {
+ onClose();
+ }}
+ >
+ Cancel
+
+ {
+ onChange(color);
+ onClose();
+ }}
+ >
+ OK
+
+
+
+
(null);
+ return (
+ <>
+ {
+ setAnchorEl(event.currentTarget);
+ }}
+ disabled={disabled}
+ >
+
+
+ {Boolean(anchorEl) && (
+ setAnchorEl(null)}
+ >
+ setAnchorEl(null)}
+ defaultColor={defaultColor}
+ />
+
+ )}
+
+ );
+}
diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorSortsPanel.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorSortsPanel.tsx
index 073852b44d..9b17dafb8a 100644
--- a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorSortsPanel.tsx
+++ b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorSortsPanel.tsx
@@ -15,16 +15,112 @@
*/
import { observer } from 'mobx-react-lite';
-import { DataCubeIcon } from '@finos/legend-art';
+import {
+ DataCubeIcon,
+ useDropdownMenu,
+ DropdownMenuItem,
+ DropdownMenu,
+} from '@finos/legend-art';
import { useREPLStore } from '../../REPLStoreProvider.js';
import { DataCubeEditorColumnsSelector } from './DataCubeEditorColumnsSelector.js';
+import type { DataCubeEditorColumnsSelectorState } from '../../../stores/dataCube/editor/DataCubeEditorColumnsSelectorState.js';
+import type { DataCubeEditorSortColumnState } from '../../../stores/dataCube/editor/DataCubeEditorSortsPanelState.js';
+import { DataCubeQuerySnapshotSortOperation } from '../../../stores/dataCube/core/DataCubeQuerySnapshot.js';
+import { IllegalStateError } from '@finos/legend-shared';
+import { WIP_Badge } from './DataCubeEditorShared.js';
+
+function getSortDirectionLabel(operation: DataCubeQuerySnapshotSortOperation) {
+ switch (operation) {
+ case DataCubeQuerySnapshotSortOperation.ASCENDING:
+ return 'Ascending';
+ case DataCubeQuerySnapshotSortOperation.DESCENDING:
+ return 'Descending';
+ default:
+ throw new IllegalStateError(`Unsupported sort operation '${operation}'`);
+ }
+}
+
+const SortDirectionDropdown = observer(
+ (props: {
+ selector: DataCubeEditorColumnsSelectorState;
+ column: DataCubeEditorSortColumnState;
+ }) => {
+ const { column } = props;
+ const [openMenu, closeMenu, menuProps] = useDropdownMenu();
+
+ return (
+
+
+ {getSortDirectionLabel(column.operation)}
+
+
{
+ event.stopPropagation();
+ openMenu(event);
+ }}
+ onClick={(event) => event.stopPropagation()}
+ >
+ {getSortDirectionLabel(column.operation)}
+
+
+
+
+ {
+ column.setOperation(DataCubeQuerySnapshotSortOperation.ASCENDING);
+ closeMenu();
+ }}
+ >
+ Ascending
+
+
+ {`Ascending (abs)`}
+
+ {
+ column.setOperation(
+ DataCubeQuerySnapshotSortOperation.DESCENDING,
+ );
+ closeMenu();
+ }}
+ >
+ Descending
+
+
+ {`Descending (abs)`}
+
+
+
+
-
);
diff --git a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorVPivotsPanel.tsx b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorVPivotsPanel.tsx
index 778a0aab07..496aab524d 100644
--- a/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorVPivotsPanel.tsx
+++ b/packages/legend-application-repl/src/components/dataCube/editor/DataCubeEditorVPivotsPanel.tsx
@@ -21,12 +21,12 @@ import { useEffect } from 'react';
export const DataCubeEditorVPivotsPanel = observer(() => {
const replStore = useREPLStore();
- const panel = replStore.dataCubeState.editor.sortsPanel;
+ const panel = replStore.dataCube.editor.sortsPanel;
useEffect(() => {}, [panel]); // TODO: @akphi - remove this dummy useEffect
return (
-
+
diff --git a/packages/legend-application-repl/src/components/dataCube/grid/DataCubeGrid.tsx b/packages/legend-application-repl/src/components/dataCube/grid/DataCubeGrid.tsx
index 8500efb449..c334b3e072 100644
--- a/packages/legend-application-repl/src/components/dataCube/grid/DataCubeGrid.tsx
+++ b/packages/legend-application-repl/src/components/dataCube/grid/DataCubeGrid.tsx
@@ -19,6 +19,7 @@ import { LicenseManager } from '@ag-grid-enterprise/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
+import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
import { MenuModule } from '@ag-grid-enterprise/menu';
import { AgGridReact } from '@ag-grid-community/react';
import { useEffect, useState } from 'react';
@@ -26,9 +27,11 @@ import { useREPLStore } from '../../REPLStoreProvider.js';
import { DataCubeIcon, Switch, cn } from '@finos/legend-art';
import {
INTERNAL__GRID_CLIENT_HEADER_HEIGHT,
- INTERNAL__GRID_CLIENT_ROW_BUFFER,
INTERNAL__GRID_CLIENT_ROW_HEIGHT,
} from '../../../stores/dataCube/grid/DataCubeGridClientEngine.js';
+import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
+import { buildGridMenu } from './menu/DataCubeGridMenu.js';
+import { DEFAULT_ROW_BUFFER } from '../../../stores/dataCube/core/DataCubeQueryEngine.js';
// NOTE: This is a workaround to prevent ag-grid license key check from flooding the console screen
// with its stack trace in Chrome.
@@ -42,9 +45,8 @@ console.error = (message?: unknown, ...agrs: unknown[]): void => {
export const DataCubeGrid = observer(() => {
const replStore = useREPLStore();
- const dataCubeState = replStore.dataCubeState;
- const grid = dataCubeState.grid;
-
+ const dataCube = replStore.dataCube;
+ const grid = dataCube.grid;
const [scrollHintText, setScrollHintText] = useState('');
useEffect(() => {
@@ -57,44 +59,46 @@ export const DataCubeGrid = observer(() => {
{
- grid.configureClient(params.api);
- // restore original error logging
- console.error = __INTERNAL__original_console_error; // eslint-disable-line no-console
- }}
// -------------------------------------- ROW GROUPING --------------------------------------
rowGroupPanelShow="always"
suppressScrollOnNewData={true}
groupDisplayType="custom" // keeps the column set stable even when row grouping is used
suppressRowGroupHidesColumns={true} // keeps the column set stable even when row grouping is used
+ // Keeps the columns stable even when aggregation is used
+ suppressAggFuncInHeader={true}
// -------------------------------------- PIVOT --------------------------------------
// pivotPanelShow="always"
// pivotMode={true}
- // -------------------------------------- SERVER SIDE ROW MODEL --------------------------------------
- rowModelType="serverSide"
- serverSideDatasource={grid.clientDataSource}
- // -------------------------------------- GENERIC --------------------------------------
- suppressBrowserResizeObserver={true}
- animateRows={false} // improve performance
- // NOTE: since we shrink the spacing, more rows can be shown, as such, setting higher row
- // buffer will improve scrolling performance, but compromise initial load and various
- // actions performance
- rowBuffer={INTERNAL__GRID_CLIENT_ROW_BUFFER}
- rowHeight={INTERNAL__GRID_CLIENT_ROW_HEIGHT}
- headerHeight={INTERNAL__GRID_CLIENT_HEADER_HEIGHT}
+ // -------------------------------------- SORT --------------------------------------
// Force multi-sorting since this is what the query supports anyway
alwaysMultiSort={true}
- // Keeps the columns stable even when aggregation is used
- suppressAggFuncInHeader={true}
+ // -------------------------------------- DISPLAY & INTERACTION --------------------------------------
+ className="ag-theme-balham"
+ rowHeight={INTERNAL__GRID_CLIENT_ROW_HEIGHT}
+ headerHeight={INTERNAL__GRID_CLIENT_HEADER_HEIGHT}
+ suppressBrowserResizeObserver={true}
+ reactiveCustomComponents={true} // TODO: remove on v32 as this would be default to `true` then
+ noRowsOverlayComponent={() => (
+
+ )}
+ loadingOverlayComponent={() => (
+
+ )}
+ preventDefaultOnContextMenu={true}
+ columnMenu="new" // ensure context menu works on header
+ getContextMenuItems={buildGridMenu}
+ getMainMenuItems={buildGridMenu}
+ enableRangeSelection={true}
// Show cursor position when scrolling
onBodyScroll={(event) => {
const rowCount = event.api.getDisplayedRowCount();
@@ -108,8 +112,37 @@ export const DataCubeGrid = observer(() => {
Math.floor(range.bottom / INTERNAL__GRID_CLIENT_ROW_HEIGHT),
);
setScrollHintText(`${start}-${end}/${rowCount}`);
+ event.api.hidePopupMenu(); // hide context-menu while scrolling
}}
onBodyScrollEnd={() => setScrollHintText('')}
+ // -------------------------------------- SERVER SIDE ROW MODEL --------------------------------------
+ rowModelType="serverSide"
+ serverSideDatasource={grid.clientDataSource}
+ // -------------------------------------- PERFORMANCE --------------------------------------
+ // NOTE: since we shrink the spacing, more rows can be shown, as such, setting higher row
+ // buffer will improve scrolling performance, but compromise initial load and various
+ // actions performance
+ rowBuffer={DEFAULT_ROW_BUFFER}
+ animateRows={false} // improve performance
+ // -------------------------------------- SETUP --------------------------------------
+ modules={[
+ // community
+ ClientSideRowModelModule,
+ // enterprise
+ ServerSideRowModelModule,
+ RowGroupingModule,
+ MenuModule,
+ ClipboardModule,
+ RangeSelectionModule,
+ ]}
+ onGridReady={(params): void => {
+ grid.configureClient(params.api);
+ // restore original error logging
+ console.error = __INTERNAL__original_console_error; // eslint-disable-line no-console
+ }}
+ context={{
+ dataCube,
+ }}
/>
diff --git a/packages/legend-application-repl/src/components/dataCube/grid/DataCubeGridShared.tsx b/packages/legend-application-repl/src/components/dataCube/grid/DataCubeGridShared.tsx
new file mode 100644
index 0000000000..2e5c4a06ba
--- /dev/null
+++ b/packages/legend-application-repl/src/components/dataCube/grid/DataCubeGridShared.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+ useGridMenuItem,
+ type CustomMenuItemProps,
+} from '@ag-grid-community/react';
+import { WIP_Badge } from '../editor/DataCubeEditorShared.js';
+
+export function WIP_GridMenuItem({ name, subMenu }: CustomMenuItemProps) {
+ useGridMenuItem({
+ configureDefaults: () => true,
+ });
+
+ return (
+
+
+ {name}
+
+
+ {subMenu &&
+
+ );
+}
diff --git a/packages/legend-application-repl/src/components/dataCube/grid/menu/DataCubeGridMenu.tsx b/packages/legend-application-repl/src/components/dataCube/grid/menu/DataCubeGridMenu.tsx
new file mode 100644
index 0000000000..bdcdf24c69
--- /dev/null
+++ b/packages/legend-application-repl/src/components/dataCube/grid/menu/DataCubeGridMenu.tsx
@@ -0,0 +1,394 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {
+ GetContextMenuItemsParams,
+ GetMainMenuItemsParams,
+ MenuItemDef,
+} from '@ag-grid-community/core';
+import type { DataCubeState } from '../../../../stores/dataCube/DataCubeState.js';
+import { buildGridSortsMenu } from './DataCubeGridSortsMenu.js';
+import { WIP_GridMenuItem } from '../DataCubeGridShared.js';
+
+export function buildGridMenu(
+ params:
+ | GetContextMenuItemsParams
+ | GetMainMenuItemsParams,
+): (string | MenuItemDef)[] {
+ const context = params.context;
+ const dataCube = context.dataCube;
+ const editor = dataCube.editor;
+ const column = params.column ?? undefined;
+ const value: unknown = 'value' in params ? params.value : undefined;
+
+ const result: (string | MenuItemDef)[] = [
+ {
+ name: 'Export',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ subMenu: [
+ {
+ name: 'HTML',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Plain Text',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'PDF',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Excel',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'CSV',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ 'separator',
+ {
+ name: 'DataCube Specification',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ ],
+ },
+ {
+ name: 'Email',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ subMenu: [
+ {
+ name: 'HTML',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Plain Text',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ 'separator',
+ {
+ name: 'HTML Attachment',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Plain Text',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'PDF Attachment',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Excel Attachment',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'CSV Attachment',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'DataCube Specification Attachment',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ ],
+ },
+ {
+ name: 'Copy',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ subMenu: [
+ {
+ name: 'Plain Text',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Selected Row(s) as Plain Text',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Selected Column as Plain Text',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ ],
+ },
+ 'separator',
+ buildGridSortsMenu(editor, column, value),
+ {
+ name: 'Filter',
+ menuItem: WIP_GridMenuItem,
+ disabled: true,
+ cssClasses: ['!opacity-100'],
+ subMenu: [
+ ...(column && value
+ ? [
+ {
+ name: `Add Filter: ${column.getColId()} = {value}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `More Filters on ${column.getColId()}...`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ subMenu: [], // TODO
+ },
+ 'separator',
+ ]
+ : []),
+ {
+ name: 'Filters...',
+ },
+ {
+ name: 'Clear All Filters',
+ },
+ ],
+ },
+ {
+ name: 'Pivot',
+ menuItem: WIP_GridMenuItem,
+ disabled: true,
+ cssClasses: ['!opacity-100'],
+ subMenu: [
+ ...(column
+ ? [
+ {
+ name: `VPivot on ${column.getColId()}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `Add VPivot on ${column.getColId()}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `Remove VPivot on ${column.getColId()}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ 'separator',
+ ]
+ : []),
+ {
+ name: `Clear All VPivots`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ ],
+ },
+ {
+ name: 'Heatmap',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: !column,
+ subMenu: column
+ ? [
+ {
+ name: `Add to ${column.getColId()}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `Remove from ${column.getColId()}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ ]
+ : [],
+ },
+ {
+ name: 'Extended Columns',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ subMenu: [
+ {
+ name: `Add New Column...`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `Edit {column}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `Remove {column}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ ],
+ },
+ {
+ name: 'Custom Groupings',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ subMenu: [
+ {
+ name: `Add New Grouping...`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `Edit {column}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `Remove {column}`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ ],
+ },
+ 'separator',
+ {
+ name: 'Resize',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ subMenu: [
+ {
+ name: `Size to Fit Content`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `Autosize`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ 'separator',
+ {
+ name: `Autosize All Columns`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ ],
+ },
+ {
+ name: 'Pin',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ subMenu: [
+ {
+ name: `Pin Left`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: `Pin Right`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ 'separator',
+ {
+ name: `Remove Pinning`,
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ ],
+ },
+ {
+ name: 'Hide',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ 'separator',
+ {
+ name: 'Show Plot...',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Show TreeMap...',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ 'separator',
+ {
+ name: 'Properties...',
+ disabled: editor.isPanelOpen,
+ action: () => {
+ if (!editor.isPanelOpen) {
+ editor.openPanel();
+ }
+ },
+ },
+ ];
+ return result;
+}
diff --git a/packages/legend-application-repl/src/components/dataCube/grid/menu/DataCubeGridSortsMenu.tsx b/packages/legend-application-repl/src/components/dataCube/grid/menu/DataCubeGridSortsMenu.tsx
new file mode 100644
index 0000000000..113ccfc69c
--- /dev/null
+++ b/packages/legend-application-repl/src/components/dataCube/grid/menu/DataCubeGridSortsMenu.tsx
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Column, MenuItemDef } from '@ag-grid-community/core';
+import type { DataCubeEditorState } from '../../../../stores/dataCube/editor/DataCubeEditorState.js';
+import { DataCubeQuerySnapshotSortOperation } from '../../../../stores/dataCube/core/DataCubeQuerySnapshot.js';
+import { WIP_GridMenuItem } from '../DataCubeGridShared.js';
+
+export function buildGridSortsMenu(
+ editor: DataCubeEditorState,
+ column: Column | undefined,
+ value: unknown,
+): MenuItemDef {
+ if (!column) {
+ return {
+ name: 'Sort',
+ disabled: true,
+ subMenu: [],
+ };
+ }
+
+ return {
+ name: 'Sort',
+ subMenu: [
+ {
+ name: 'Ascending',
+ disabled: !editor.sortsPanel.getActionableSortColumn(
+ column.getColId(),
+ DataCubeQuerySnapshotSortOperation.ASCENDING,
+ ),
+ action: () =>
+ editor.sortsPanel.sortByColumn(
+ column.getColId(),
+ DataCubeQuerySnapshotSortOperation.ASCENDING,
+ ),
+ },
+ {
+ name: 'Ascending Absolute',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Descending',
+ disabled: !editor.sortsPanel.getActionableSortColumn(
+ column.getColId(),
+ DataCubeQuerySnapshotSortOperation.DESCENDING,
+ ),
+ action: () =>
+ editor.sortsPanel.sortByColumn(
+ column.getColId(),
+ DataCubeQuerySnapshotSortOperation.DESCENDING,
+ ),
+ },
+ {
+ name: 'Descending Absolute',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ 'separator',
+ {
+ name: 'Add Ascending',
+ disabled: !editor.sortsPanel.getActionableSortColumn(
+ column.getColId(),
+ DataCubeQuerySnapshotSortOperation.ASCENDING,
+ ),
+ action: () =>
+ editor.sortsPanel.addSortByColumn(
+ column.getColId(),
+ DataCubeQuerySnapshotSortOperation.ASCENDING,
+ ),
+ },
+ {
+ name: 'Add Ascending Absolute',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ {
+ name: 'Add Descending',
+ disabled: !editor.sortsPanel.getActionableSortColumn(
+ column.getColId(),
+ DataCubeQuerySnapshotSortOperation.DESCENDING,
+ ),
+ action: () =>
+ editor.sortsPanel.addSortByColumn(
+ column.getColId(),
+ DataCubeQuerySnapshotSortOperation.DESCENDING,
+ ),
+ },
+ {
+ name: 'Add Descending Absolute',
+ menuItem: WIP_GridMenuItem,
+ cssClasses: ['!opacity-100'],
+ disabled: true,
+ },
+ 'separator',
+ {
+ name: 'Clear All Sorts',
+ disabled:
+ editor.sortsPanel.columnsSelector.selectedColumns.length === 0,
+ action: () => editor.sortsPanel.clearAllSorts(),
+ },
+ ],
+ };
+}
diff --git a/packages/legend-application-repl/src/server/models/DataCubeQuery.ts b/packages/legend-application-repl/src/server/models/DataCubeQuery.ts
index 5cb08b1bd6..09924c5b0f 100644
--- a/packages/legend-application-repl/src/server/models/DataCubeQuery.ts
+++ b/packages/legend-application-repl/src/server/models/DataCubeQuery.ts
@@ -97,21 +97,17 @@ function serializeQuerySource(
);
}
-export class DataCubeConfiguration {
- // TODO
-}
-
export class DataCubeQuery {
name!: string;
query!: string;
partialQuery!: string;
source!: DataCubeQuerySource;
- configuration!: DataCubeConfiguration;
+ configuration?: PlainObject | undefined;
constructor(
name: string,
query: string,
- configuration: DataCubeConfiguration,
+ configuration?: PlainObject | undefined,
) {
this.name = name;
this.query = query;
diff --git a/packages/legend-application-repl/src/stores/dataCube/DataCubeState.ts b/packages/legend-application-repl/src/stores/dataCube/DataCubeState.ts
index f7d39711c8..a7b0c42943 100644
--- a/packages/legend-application-repl/src/stores/dataCube/DataCubeState.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/DataCubeState.ts
@@ -17,12 +17,28 @@
import type { REPLStore } from './REPLStore.js';
import { DataCubeGridState } from './grid/DataCubeGridState.js';
import { DataCubeEditorState } from './editor/DataCubeEditorState.js';
-import { ActionState, assertErrorThrown } from '@finos/legend-shared';
+import { assertErrorThrown, uuid } from '@finos/legend-shared';
import { DataCubeEngine } from './core/DataCubeEngine.js';
import { DataCubeQuerySnapshotManager } from './core/DataCubeQuerySnapshotManager.js';
import type { LegendREPLApplicationStore } from '../LegendREPLBaseStore.js';
import { DataCubeCoreState } from './core/DataCubeCoreState.js';
import { validateAndBuildQuerySnapshot } from './core/DataCubeQuerySnapshotBuilder.js';
+import { action, makeObservable, observable } from 'mobx';
+
+export class DataCubeTask {
+ uuid = uuid();
+ name: string;
+ startTime = Date.now();
+ endTime?: number | undefined;
+
+ constructor(name: string) {
+ this.name = name;
+ }
+
+ end(): void {
+ this.endTime = Date.now();
+ }
+}
export class DataCubeState {
readonly replStore: REPLStore;
@@ -34,9 +50,15 @@ export class DataCubeState {
readonly grid: DataCubeGridState;
readonly editor: DataCubeEditorState;
- readonly initState = ActionState.create();
+ readonly runningTaskes = new Map();
constructor(replStore: REPLStore) {
+ makeObservable(this, {
+ runningTaskes: observable,
+ newTask: action,
+ endTask: action,
+ });
+
this.replStore = replStore;
this.application = replStore.applicationStore;
this.engine = new DataCubeEngine(this.replStore.client);
@@ -48,8 +70,20 @@ export class DataCubeState {
this.editor = new DataCubeEditorState(this);
}
+ newTask(name: string): DataCubeTask {
+ const task = new DataCubeTask(name);
+ this.runningTaskes.set(task.uuid, task);
+ return task;
+ }
+
+ endTask(task: DataCubeTask): DataCubeTask {
+ task.end();
+ this.runningTaskes.delete(task.uuid);
+ return task;
+ }
+
async initialize(): Promise {
- this.initState.inProgress();
+ const task = this.newTask('Initializing');
try {
await Promise.all(
[this.core, this.editor, this.grid].map(async (state) => {
@@ -65,11 +99,11 @@ export class DataCubeState {
);
initialSnapshot.timestamp = result.timestamp;
this.snapshotManager.broadcastSnapshot(initialSnapshot);
- this.initState.complete();
} catch (error: unknown) {
assertErrorThrown(error);
this.application.notificationService.notifyError(error);
- this.initState.fail();
+ } finally {
+ this.endTask(task);
}
}
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/REPLStore.ts b/packages/legend-application-repl/src/stores/dataCube/REPLStore.ts
index ae1fd4d73d..b03f21bb87 100644
--- a/packages/legend-application-repl/src/stores/dataCube/REPLStore.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/REPLStore.ts
@@ -25,11 +25,11 @@ export class REPLStore {
readonly client: REPLServerClient;
// TODO: when we support multi-view, we would need to support multiple states
- dataCubeState!: DataCubeState;
+ dataCube!: DataCubeState;
constructor(applicationStore: LegendREPLApplicationStore) {
makeObservable(this, {
- dataCubeState: observable,
+ dataCube: observable,
});
this.applicationStore = applicationStore;
this.client = new REPLServerClient(
@@ -40,6 +40,6 @@ export class REPLStore {
: this.applicationStore.config.replUrl,
}),
);
- this.dataCubeState = new DataCubeState(this);
+ this.dataCube = new DataCubeState(this);
}
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeConfiguration.ts b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeConfiguration.ts
new file mode 100644
index 0000000000..bbcc6327d9
--- /dev/null
+++ b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeConfiguration.ts
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TailwindCSSPalette } from '@finos/legend-art';
+import {
+ DataCubeColumnKind,
+ DataCubeFont,
+ DataCubeFontTextAlignment,
+ DEFAULT_ROW_BUFFER,
+ DEFAULT_BACKGROUND_COLOR,
+ DEFAULT_ERROR_FOREGROUND_COLOR,
+ DEFAULT_FOREGROUND_COLOR,
+ DEFAULT_NEGATIVE_FOREGROUND_COLOR,
+ DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR,
+ DEFAULT_ZERO_FOREGROUND_COLOR,
+ type DataCubeFontFormatUnderlinedVariant,
+ type DataCubeNumberScale,
+ type DataCubeSelectionStat,
+ type DataCubeColumnPinPlacement,
+} from './DataCubeQueryEngine.js';
+import { SerializationFactory, usingModelSchema } from '@finos/legend-shared';
+import { createModelSchema, list, optional, primitive } from 'serializr';
+
+export class DataCubeColumnConfiguration {
+ name: string;
+ type: string;
+
+ kind: DataCubeColumnKind = DataCubeColumnKind.DIMENSION;
+ displayName?: string | undefined;
+
+ decimals?: number | undefined;
+ displayCommas = false;
+ negativeNumberInParens = false;
+ numberScale?: DataCubeNumberScale | undefined;
+
+ hPivotSortFunction?: string | undefined;
+
+ fontFamily = DataCubeFont.ROBOTO;
+ fontSize = 8;
+ fontBold = false;
+ fontItalic = false;
+ fontUnderlined?: DataCubeFontFormatUnderlinedVariant | undefined = undefined;
+ fontStrikethrough = false;
+ textAlign = DataCubeFontTextAlignment.LEFT;
+ foregroundColor = TailwindCSSPalette.black;
+ foregroundNegativeColor = DEFAULT_NEGATIVE_FOREGROUND_COLOR;
+ foregroundZeroColor = DEFAULT_ZERO_FOREGROUND_COLOR;
+ foregroundErrorColor = DEFAULT_ERROR_FOREGROUND_COLOR;
+ backgroundColor = DEFAULT_BACKGROUND_COLOR;
+ backgroundNegativeColor = DEFAULT_BACKGROUND_COLOR;
+ backgroundZeroColor = DEFAULT_BACKGROUND_COLOR;
+ backgroundErrorColor = DEFAULT_BACKGROUND_COLOR;
+
+ blur = false;
+ hideFromView = false;
+
+ fixedWidth?: number | undefined;
+ minWidth?: number | undefined;
+ maxWidth?: number | undefined;
+ pinned?: DataCubeColumnPinPlacement | undefined;
+ displayAsLink = false;
+
+ constructor(name: string, type: string) {
+ this.name = name;
+ this.type = type;
+ }
+
+ static readonly serialization = new SerializationFactory(
+ createModelSchema(DataCubeColumnConfiguration, {
+ backgroundColor: primitive(),
+ backgroundErrorColor: primitive(),
+ backgroundNegativeColor: primitive(),
+ backgroundZeroColor: primitive(),
+ decimals: optional(primitive()),
+ displayAsLink: primitive(),
+ displayCommas: primitive(),
+ displayName: optional(primitive()),
+ fixedWidth: optional(primitive()),
+ foregroundColor: primitive(),
+ foregroundErrorColor: primitive(),
+ foregroundNegativeColor: primitive(),
+ foregroundZeroColor: primitive(),
+ fontBold: primitive(),
+ fontFamily: primitive(),
+ fontItalic: primitive(),
+ fontSize: primitive(),
+ fontStrikethrough: primitive(),
+ fontUnderlined: optional(primitive()),
+ hPivotSortFunction: optional(primitive()),
+ kind: primitive(),
+ maxWidth: optional(primitive()),
+ minWidth: optional(primitive()),
+ name: primitive(),
+ negativeNumberInParens: primitive(),
+ numberScale: optional(primitive()),
+ pinned: optional(primitive()),
+ textAlign: primitive(),
+ type: primitive(),
+ }),
+ );
+}
+
+export class DataCubeConfiguration {
+ description?: string | undefined;
+ columns: DataCubeColumnConfiguration[] = [];
+
+ showTreeLine = true;
+ showHorizontalGridLine = false;
+ showVerticalGridLine = false;
+ defaultFontFamily = DataCubeFont.ROBOTO;
+ defaultFontSize = 12;
+ defaultFontBold = false;
+ defaultFontItalic = false;
+ defaultFontUnderlined?: DataCubeFontFormatUnderlinedVariant | undefined =
+ undefined;
+ defaultFontStrikethrough = false;
+ defaultTextAlign = DataCubeFontTextAlignment.LEFT;
+ defaultForegroundColor = DEFAULT_FOREGROUND_COLOR;
+ defaultForegroundNegativeColor = DEFAULT_NEGATIVE_FOREGROUND_COLOR;
+ defaultForegroundZeroColor = DEFAULT_ZERO_FOREGROUND_COLOR;
+ defaultForegroundErrorColor = DEFAULT_ERROR_FOREGROUND_COLOR;
+ defaultBackgroundColor = DEFAULT_BACKGROUND_COLOR;
+ defaultBackgroundNegativeColor = DEFAULT_BACKGROUND_COLOR;
+ defaultBackgroundZeroColor = DEFAULT_BACKGROUND_COLOR;
+ defaultBackgroundErrorColor = DEFAULT_BACKGROUND_COLOR;
+ alternateRows = true;
+ alternateRowsColor = DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR;
+ alternateRowsCount = 1;
+
+ // manualRefresh: boolean;
+ numberScale?: DataCubeNumberScale | undefined;
+ selectionStats: DataCubeSelectionStat[] = [];
+
+ showWarningForTruncatedResult = true;
+
+ // aggregation
+ initialExpandLevel?: number | undefined;
+ showRootAggregation = false;
+ showLeafCount = true;
+ addPivotTotalColumn = true;
+ addPivotTotalColumnOnLeft = true;
+ treeGroupSortFunction?: string | undefined;
+
+ // advanced
+ rowBuffer = DEFAULT_ROW_BUFFER;
+
+ static readonly serialization = new SerializationFactory(
+ createModelSchema(DataCubeConfiguration, {
+ addPivotTotalColumn: primitive(),
+ addPivotTotalColumnOnLeft: primitive(),
+ alternateRows: primitive(),
+ alternateRowsColor: primitive(),
+ alternateRowsCount: primitive(),
+ columns: list(
+ usingModelSchema(DataCubeColumnConfiguration.serialization.schema),
+ ),
+ defaultBackgroundColor: primitive(),
+ defaultBackgroundErrorColor: primitive(),
+ defaultBackgroundNegativeColor: primitive(),
+ defaultBackgroundZeroColor: primitive(),
+ defaultFontBold: primitive(),
+ defaultFontFamily: primitive(),
+ defaultFontItalic: primitive(),
+ defaultFontSize: primitive(),
+ defaultFontStrikethrough: primitive(),
+ defaultFontUnderlined: optional(primitive()),
+ defaultForegroundColor: primitive(),
+ defaultForegroundErrorColor: primitive(),
+ defaultForegroundNegativeColor: primitive(),
+ defaultForegroundZeroColor: primitive(),
+ defaultTextAlign: primitive(),
+ description: optional(primitive()),
+ initialExpandLevel: optional(primitive()),
+
+ numberScale: optional(primitive()),
+ rowBuffer: primitive(),
+ selectionStats: list(primitive()),
+ showHorizontalGridLine: primitive(),
+ showLeafCount: primitive(),
+ showRootAggregation: primitive(),
+ showTreeLine: primitive(),
+ showVerticalGridLine: primitive(),
+ showWarningForTruncatedResult: primitive(),
+ treeGroupSortFunction: optional(primitive()),
+ }),
+ );
+}
diff --git a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeConfigurationBuilder.ts b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeConfigurationBuilder.ts
new file mode 100644
index 0000000000..0469265056
--- /dev/null
+++ b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeConfigurationBuilder.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PRIMITIVE_TYPE } from '@finos/legend-graph';
+import {
+ DataCubeColumnConfiguration,
+ DataCubeConfiguration,
+} from './DataCubeConfiguration.js';
+import { DataCubeColumnKind } from './DataCubeQueryEngine.js';
+
+export function buildDefaultColumnConfiguration(column: {
+ name: string;
+ type: string;
+}): DataCubeColumnConfiguration {
+ const { name, type } = column;
+ const config = new DataCubeColumnConfiguration(name, type);
+ switch (type) {
+ case PRIMITIVE_TYPE.NUMBER:
+ case PRIMITIVE_TYPE.INTEGER:
+ case PRIMITIVE_TYPE.DECIMAL:
+ case PRIMITIVE_TYPE.FLOAT: {
+ config.kind = DataCubeColumnKind.MEASURE;
+ config.decimals = type === PRIMITIVE_TYPE.INTEGER ? 0 : 2;
+ config.displayCommas = true;
+ config.negativeNumberInParens = true;
+ break;
+ }
+ default: {
+ break;
+ }
+ }
+ return config;
+}
+
+export function buildDefaultConfiguration(
+ columns: { name: string; type: string }[],
+): DataCubeConfiguration {
+ const configuration = new DataCubeConfiguration();
+ configuration.columns = columns.map((column) =>
+ buildDefaultColumnConfiguration(column),
+ );
+ return configuration;
+}
diff --git a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeCoreState.ts b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeCoreState.ts
index e7b0abfb7c..bec83196c3 100644
--- a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeCoreState.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeCoreState.ts
@@ -18,13 +18,13 @@ import { action, makeObservable, observable } from 'mobx';
import type { DataCubeState } from '../DataCubeState.js';
import { DataCubeQuerySnapshotSubscriber } from './DataCubeQuerySnapshotSubscriber.js';
import type { DataCubeQuerySnapshot } from './DataCubeQuerySnapshot.js';
-import { DATA_CUBE_DEFAULT_REPORT_NAME } from '../DataCubeDefaultConfig.js';
import type { DataCubeQuery } from '../../../server/models/DataCubeQuery.js';
import { formatDate } from '@finos/legend-shared';
+import { DEFAULT_REPORT_NAME } from './DataCubeQueryEngine.js';
export class DataCubeCoreState extends DataCubeQuerySnapshotSubscriber {
baseQuery!: DataCubeQuery;
- name = DATA_CUBE_DEFAULT_REPORT_NAME;
+ name = DEFAULT_REPORT_NAME;
private startTime?: number | undefined;
constructor(dataCube: DataCubeState) {
@@ -47,7 +47,7 @@ export class DataCubeCoreState extends DataCubeQuerySnapshotSubscriber {
this.startTime = snapshot.timestamp;
}
this.application.layoutService.setWindowTitle(
- `\u25A6 ${data.name}${this.startTime ? ` - ${formatDate(new Date(this.startTime), 'HH:mm:ss EEE MMM dd yyyy')}` : ''}`,
+ `\u229E ${data.name}${this.startTime ? ` - ${formatDate(new Date(this.startTime), 'HH:mm:ss EEE MMM dd yyyy')}` : ''}`,
);
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQueryBuilder.ts b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQueryBuilder.ts
index dd99acebb1..dd803bccfd 100644
--- a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQueryBuilder.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQueryBuilder.ts
@@ -51,7 +51,7 @@ import {
type DataCubeQuerySnapshotFilterCondition,
type DataCubeQuerySnapshotFilter,
type DataCubeQuerySnapshot,
- DataCubeQuerySnapshotSortDirection,
+ DataCubeQuerySnapshotSortOperation,
DataCubeQuerySnapshotFilterOperation,
DataCubeQueryFilterGroupOperation,
_findCol,
@@ -347,6 +347,17 @@ export function buildExecutableQuery(
);
}
+ // --------------------------------- SELECT ---------------------------------
+
+ if (data.selectColumns.length) {
+ _process(
+ 'select',
+ _function(_name(DataCubeFunction.SELECT), [
+ _cols(data.selectColumns.map((col) => _colSpec(col.name))),
+ ]),
+ );
+ }
+
// --------------------------------- FILTER ---------------------------------
if (data.filter) {
@@ -398,17 +409,6 @@ export function buildExecutableQuery(
);
}
- // --------------------------------- SELECT ---------------------------------
-
- if (data.selectColumns.length) {
- _process(
- 'select',
- _function(_name(DataCubeFunction.SELECT), [
- _cols(data.selectColumns.map((col) => _colSpec(col.name))),
- ]),
- );
- }
-
// --------------------------------- SORT ---------------------------------
if (data.sortColumns.length) {
@@ -419,7 +419,7 @@ export function buildExecutableQuery(
data.sortColumns.map((col) =>
_function(
_name(
- col.direction === DataCubeQuerySnapshotSortDirection.ASCENDING
+ col.operation === DataCubeQuerySnapshotSortOperation.ASCENDING
? DataCubeFunction.ASC
: DataCubeFunction.DESC,
),
diff --git a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQueryEngine.ts b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQueryEngine.ts
index 080c8c5adc..9136fbf8ab 100644
--- a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQueryEngine.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQueryEngine.ts
@@ -14,7 +14,8 @@
* limitations under the License.
*/
-import type { V1_AppliedFunction } from '@finos/legend-graph';
+import { TailwindCSSPalette } from '@finos/legend-art';
+import { PRIMITIVE_TYPE, type V1_AppliedFunction } from '@finos/legend-graph';
export enum DataCubeFunction {
// relation
@@ -62,11 +63,15 @@ export enum DataCubeFunction {
MAX = 'meta::pure::functions::collection::max',
MIN = 'meta::pure::functions::collection::min',
SUM = 'meta::pure::functions::math::sum',
- STD_DEV_POPULATION = 'meta::pure::functions::math::stdDevPopulation',
- STD_DEV_SAMPLE = 'meta::pure::functions::math::stdDevSample',
- UNIQUE_VALUE_ONLY = 'meta::pure::functions::collection::uniqueValueOnly',
+ STDDEV_POP = 'meta::pure::functions::math::stdDevPopulation',
+ STDDEV_SAMP = 'meta::pure::functions::math::stdDevSample',
+ VAR_POP = 'meta::pure::functions::math::variancePopulation',
+ VAR_SAMP = 'meta::pure::functions::math::varianceSample',
+ // UNIQUE_VALUE_ONLY = 'meta::pure::functions::collection::uniqueValueOnly',
+ // PERCENTILE = 'meta::pure::functions::math::percentile',
}
+export const DEFAULT_REPORT_NAME = 'New Report';
export const DEFAULT_LAMBDA_VARIABLE_NAME = 'x';
export const PIVOT_COLUMN_NAME_VALUE_SEPARATOR = '__|__';
@@ -74,6 +79,7 @@ export const PIVOT_COLUMN_NAME_VALUE_SEPARATOR = '__|__';
// when no aggregate is specified in groupBy() or pivot()
export const INTERNAL__FILLER_COUNT_AGG_COLUMN_NAME =
'INTERNAL__filler_count_agg_column';
+export const DEFAULT_ROW_BUFFER = 50;
export type DataCubeQueryFunctionMap = {
leafExtend?: V1_AppliedFunction | undefined;
@@ -88,3 +94,129 @@ export type DataCubeQueryFunctionMap = {
sort?: V1_AppliedFunction | undefined;
limit?: V1_AppliedFunction | undefined;
};
+
+export enum DataCubeNumberScale {
+ BASIS_POINT = 'Basis Points (bp)',
+ PERCENT = 'Percent (%)',
+ THOUSANDS = 'Thousands (k)',
+ MILLIONS = 'Millions (m)',
+ BILLIONS = 'Billions (b)',
+ AUTO = 'Auto (k/m/b)',
+}
+
+export enum DataCubeSelectionStat {
+ COUNT = 'Count',
+ SUM = 'Sum',
+ MIN = 'Min',
+ MAX = 'Max',
+ AVERAGE = 'Average',
+}
+
+export enum DataCubeFont {
+ // sans-serif
+ ARIAL = 'Arial',
+ ROBOTO = 'Roboto',
+ ROBOTO_CONDENSED = 'Roboto Condensed',
+
+ // serif
+ TIMES_NEW_ROMAN = 'Times New Roman',
+ GEORGIA = 'Georgia',
+ ROBOTO_SERIF = 'Roboto Serif',
+
+ // monospaced
+ JERBRAINS_MONO = 'Jetbrains Mono',
+ ROBOTO_MONO = 'Roboto Mono',
+ UBUNTU_MONO = 'Ubuntu Mono',
+}
+
+export enum DataCubeFontTextAlignment {
+ CENTER = 'Center',
+ LEFT = 'Left',
+ RIGHT = 'Right',
+}
+
+export enum DataCubeColumnPinPlacement {
+ LEFT = 'Left',
+ RIGHT = 'Right',
+}
+
+export enum DataCubeColumnDataType {
+ NUMBER = 'number',
+ DATE = 'date',
+ TEXT = 'text',
+}
+
+export function getDataType(type: string): DataCubeColumnDataType {
+ switch (type) {
+ case PRIMITIVE_TYPE.NUMBER:
+ case PRIMITIVE_TYPE.INTEGER:
+ case PRIMITIVE_TYPE.DECIMAL:
+ case PRIMITIVE_TYPE.FLOAT:
+ return DataCubeColumnDataType.NUMBER;
+ case PRIMITIVE_TYPE.DATE:
+ case PRIMITIVE_TYPE.DATETIME:
+ case PRIMITIVE_TYPE.STRICTDATE:
+ return DataCubeColumnDataType.DATE;
+ case PRIMITIVE_TYPE.STRING:
+ default:
+ return DataCubeColumnDataType.TEXT;
+ }
+}
+
+export const DEFAULT_FOREGROUND_COLOR = TailwindCSSPalette.black;
+export const DEFAULT_BACKGROUND_COLOR = TailwindCSSPalette.white;
+export const DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR =
+ TailwindCSSPalette.sky[100];
+export const DEFAULT_NEGATIVE_FOREGROUND_COLOR = TailwindCSSPalette.red[500];
+export const DEFAULT_ZERO_FOREGROUND_COLOR = TailwindCSSPalette.neutral[400];
+export const DEFAULT_ERROR_FOREGROUND_COLOR = TailwindCSSPalette.blue[600];
+export const DEFAULT_COLUMN_WIDTH = 300;
+export const DEFAULT_COLUMN_MIN_WIDTH = 100;
+export const DEFAULT_COLUMN_MAX_WIDTH = undefined;
+
+export enum DataCubeFontFormatUnderlinedVariant {
+ SOLID = 'Solid',
+ DASHED = 'Dashed',
+ DOTTED = 'Dotted',
+ DOUBLE = 'Double',
+ WAVY = 'Wavy',
+}
+
+export enum DataCubeColumnKind {
+ MEASURE = 'Measure',
+ DIMENSION = 'Dimension',
+}
+
+export enum DataCubeAggregateFunction {
+ SUM = 'sum',
+ AVERAGE = 'avg',
+ COUNT = 'count',
+ MIN = 'min',
+ MAX = 'max',
+ // UNIQUE = 'uniq',
+ FIRST = 'first',
+ LAST = 'last',
+ MEDIAN = 'median',
+ VAR_POP = 'var_samp',
+ VAR_SAMP = 'var_pop',
+ STDDEV_POP = 'stddev_pop',
+ STDDEV_SAMP = 'stddev_samp',
+ // STANDARD_ERROR = 'stderr',
+ // NULL = 'null',
+ // ssq
+ // countvalid
+ // countnull
+ // uniqunstrict
+ // minmagnitude
+ // maxmagnitude
+ // commonprefix
+ // commonprefixunstrict
+ // strjoin
+ // strjoinuniq
+ // splitjoin
+ // daterange
+ // wavg
+ // wstderr
+ // wsum
+ // custom
+}
diff --git a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshot.ts b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshot.ts
index b176ad16b4..af277344ec 100644
--- a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshot.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshot.ts
@@ -15,10 +15,12 @@
*/
import type { V1_Lambda, V1_ValueSpecification } from '@finos/legend-graph';
-import type { DataCubeConfiguration } from '../../../server/models/DataCubeQuery.js';
+import type { DataCubeConfiguration } from './DataCubeConfiguration.js';
import {
IllegalStateError,
guaranteeNonNullable,
+ hashObject,
+ pruneObject,
uuid,
type PlainObject,
type Writable,
@@ -54,7 +56,7 @@ export enum DataCubeQuerySnapshotFilterOperation {
ENDS_WITH = 'endsWith',
}
-export enum DataCubeQuerySnapshotSortDirection {
+export enum DataCubeQuerySnapshotSortOperation {
ASCENDING = 'ascending',
DESCENDING = 'descending',
}
@@ -90,7 +92,7 @@ export type DataCubeQuerySnapshotExtendedColumn =
};
export type DataCubeQuerySnapshotSortColumn = DataCubeQuerySnapshotColumn & {
- direction: DataCubeQuerySnapshotSortDirection;
+ operation: DataCubeQuerySnapshotSortOperation;
};
export type DataCubeQuerySnapshotAggregateColumn =
@@ -113,7 +115,7 @@ export type DataCubeQuerySnapshotData = {
name: string;
runtime: string;
sourceQuery: PlainObject;
- configuration: DataCubeConfiguration;
+ configuration: PlainObject;
originalColumns: DataCubeQuerySnapshotColumn[];
leafExtendedColumns: DataCubeQuerySnapshotExtendedColumn[];
filter?: DataCubeQuerySnapshotFilter | undefined;
@@ -138,11 +140,14 @@ export class DataCubeQuerySnapshot {
timestamp = Date.now();
readonly data: DataCubeQuerySnapshotData;
+ private _finalized = false;
+ private _hashCode?: string | undefined;
+
private constructor(
name: string,
runtime: string,
sourceQuery: PlainObject,
- configuration: DataCubeConfiguration,
+ configuration: PlainObject,
) {
this.data = {
name,
@@ -165,7 +170,7 @@ export class DataCubeQuerySnapshot {
name: string,
runtime: string,
sourceQuery: PlainObject,
- configuration: DataCubeConfiguration,
+ configuration: PlainObject,
) {
return new DataCubeQuerySnapshot(name, runtime, sourceQuery, configuration);
}
@@ -204,6 +209,38 @@ export class DataCubeQuerySnapshot {
throw new IllegalStateError(`Unknown stage '${stage}'`);
}
}
+
+ isFinalized(): boolean {
+ return this._finalized;
+ }
+
+ finalize(): DataCubeQuerySnapshot {
+ if (this._finalized) {
+ return this;
+ }
+ this._hashCode = this.computeHashCode();
+ this._finalized = true;
+ return this;
+ }
+
+ get hashCode(): string {
+ if (!this._finalized || !this._hashCode) {
+ throw new IllegalStateError('Snapshot is not finalized');
+ }
+ return this._hashCode;
+ }
+
+ /**
+ * NOTE: if this becomes a performance bottleneck, we can consider
+ * more granular hashing strategy
+ *
+ * Here, we are just hashing the raw object, but we must ensure
+ * to properly prune the snapshot data object before hashing
+ * else there would be mismatch
+ */
+ private computeHashCode(): string {
+ return hashObject(pruneObject(this.data));
+ }
}
export function _findCol(
diff --git a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshotBuilder.ts b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshotBuilder.ts
index 7bb351e38f..10d896d189 100644
--- a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshotBuilder.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshotBuilder.ts
@@ -36,7 +36,7 @@ import {
import type { DataCubeQuery } from '../../../server/models/DataCubeQuery.js';
import {
DataCubeQuerySnapshot,
- DataCubeQuerySnapshotSortDirection,
+ DataCubeQuerySnapshotSortOperation,
type DataCubeQuerySnapshotColumn,
} from './DataCubeQuerySnapshot.js';
import {
@@ -50,6 +50,8 @@ import {
DataCubeFunction,
type DataCubeQueryFunctionMap,
} from './DataCubeQueryEngine.js';
+import { DataCubeConfiguration } from './DataCubeConfiguration.js';
+import { buildDefaultConfiguration } from './DataCubeConfigurationBuilder.js';
// --------------------------------- UTILITIES ---------------------------------
@@ -133,12 +135,12 @@ const _FUNCTION_SEQUENCE_COMPOSITION_PATTERN: {
required?: boolean | undefined;
}[] = [
{ func: DataCubeFunction.EXTEND },
+ { func: DataCubeFunction.SELECT },
{ func: DataCubeFunction.FILTER },
{ func: DataCubeFunction.GROUP_BY },
{ func: DataCubeFunction.PIVOT },
{ func: DataCubeFunction.CAST },
{ func: DataCubeFunction.EXTEND },
- { func: DataCubeFunction.SELECT },
{ func: DataCubeFunction.SORT },
{ func: DataCubeFunction.LIMIT },
];
@@ -269,19 +271,19 @@ function extractFunctionMap(
}
}
+ const select = sequence.find((func) =>
+ matchFunctionName(func.function, DataCubeFunction.SELECT),
+ );
const filter = sequence.find((func) =>
matchFunctionName(func.function, DataCubeFunction.FILTER),
);
const groupBy = sequence.find((func) =>
matchFunctionName(func.function, DataCubeFunction.GROUP_BY),
);
- const select = sequence.find((func) =>
- matchFunctionName(func.function, DataCubeFunction.SELECT),
- );
const pivot = sequence.find((func) =>
matchFunctionName(func.function, DataCubeFunction.PIVOT),
);
- const cast = sequence.find((func) =>
+ const pivotCast = sequence.find((func) =>
matchFunctionName(func.function, DataCubeFunction.CAST),
);
const sort = sequence.find((func) =>
@@ -292,12 +294,12 @@ function extractFunctionMap(
);
return {
leafExtend,
+ select,
filter,
groupBy,
pivot,
- pivotCast: cast,
+ pivotCast,
groupExtend,
- select,
sort,
limit,
};
@@ -326,7 +328,7 @@ export function validateAndBuildQuerySnapshot(
baseQuery.name,
baseQuery.source.runtime,
V1_serializeValueSpecification(sourceQuery, []),
- baseQuery.configuration,
+ {},
);
const data = snapshot.data;
const colsMap = new Map();
@@ -335,12 +337,25 @@ export function validateAndBuildQuerySnapshot(
// --------------------------------- SOURCE ---------------------------------
- data.originalColumns = baseQuery.source.columns;
+ data.originalColumns = baseQuery.source.columns.map((col) => ({
+ name: col.name,
+ type: col.type,
+ }));
data.originalColumns.map((col) => colsMap.set(col.name, col));
// --------------------------------- LEAF EXTEND ---------------------------------
// TODO: @akphi - implement this
+ // --------------------------------- SELECT ---------------------------------
+
+ if (funcMap.select) {
+ data.selectColumns = _colSpecArrayParam(funcMap.select, 0).colSpecs.map(
+ (colSpec) => ({
+ ..._col(colSpec),
+ }),
+ );
+ }
+
// --------------------------------- FILTER ---------------------------------
// TODO: @akphi - implement this
@@ -367,25 +382,15 @@ export function validateAndBuildQuerySnapshot(
]);
return {
..._col(_colSpecParam(sortColFunc, 0)),
- direction:
+ operation:
_name(sortColFunc.function) === DataCubeFunction.ASC
- ? DataCubeQuerySnapshotSortDirection.ASCENDING
- : DataCubeQuerySnapshotSortDirection.DESCENDING,
+ ? DataCubeQuerySnapshotSortOperation.ASCENDING
+ : DataCubeQuerySnapshotSortOperation.DESCENDING,
};
},
);
}
- // --------------------------------- SELECT ---------------------------------
-
- if (funcMap.select) {
- data.selectColumns = _colSpecArrayParam(funcMap.select, 0).colSpecs.map(
- (colSpec) => ({
- ..._col(colSpec),
- }),
- );
- }
-
// --------------------------------- LIMIT ---------------------------------
if (funcMap.limit) {
@@ -394,5 +399,21 @@ export function validateAndBuildQuerySnapshot(
data.limit = value.value;
}
- return snapshot;
+ // --------------------------------- CONFIGURATION ---------------------------------
+ // The data query takes precedence over the configuration, we do this for 2 reasons
+ // 1. The purpose of the configuration is to provide the layout and styling
+ // customization on top of the data query result grid. If conflicts happen between
+ // the configuration and the query, we will reconciliate by modifying the configuration
+ // 2. The configuration when missing, can be generated from default presets. This helps
+ // helps with use cases where the query might comes from a different source, such as
+ // Studio or Query, or another part of Engine.
+
+ const configuration = baseQuery.configuration
+ ? DataCubeConfiguration.serialization.fromJson(baseQuery.configuration)
+ : buildDefaultConfiguration(baseQuery.source.columns);
+ // TODO: @akphi - implement this
+ data.configuration =
+ DataCubeConfiguration.serialization.toJson(configuration);
+
+ return snapshot.finalize();
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshotManager.ts b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshotManager.ts
index 4edd4ce5dd..4fcf3453a3 100644
--- a/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshotManager.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/core/DataCubeQuerySnapshotManager.ts
@@ -26,7 +26,7 @@ import {
} from '@finos/legend-shared';
import type { DataCubeQuery } from '../../../server/models/DataCubeQuery.js';
-// TODO: use this when we implement undo/redo
+// TODO: set a stack depth when we implement undo/redo
// const DATA_CUBE_MAX_SNAPSHOT_COUNT = 100;
export class DataCubeQuerySnapshotManager {
@@ -77,6 +77,13 @@ export class DataCubeQuerySnapshotManager {
}
broadcastSnapshot(snapshot: DataCubeQuerySnapshot): void {
+ if (!snapshot.isFinalized()) {
+ this.dataCube.application.logService.error(
+ LogEvent.create(APPLICATION_EVENT.ILLEGAL_APPLICATION_STATE_OCCURRED),
+ `Snapshot must be finalized before broadcasting`,
+ );
+ return;
+ }
this.snapshots.push(snapshot);
this.subscribers.forEach((subscriber) => {
const currentSnapshot = subscriber.getLatestSnapshot();
@@ -87,7 +94,7 @@ export class DataCubeQuerySnapshotManager {
LogEvent.create(
APPLICATION_EVENT.ILLEGAL_APPLICATION_STATE_OCCURRED,
),
- `Subscribers receiving and applying new snapshot should be handled gracefully`,
+ `Error occured while subscribers receiving and applying new snapshot should be handled gracefully`,
error,
);
});
diff --git a/packages/legend-application-repl/src/stores/dataCube/core/__tests__/DataCubeQueryAnalyzer.repl-test.ts b/packages/legend-application-repl/src/stores/dataCube/core/__tests__/DataCubeQueryAnalyzer.repl-test.ts
index 6ec469eadf..7d94b53ff9 100644
--- a/packages/legend-application-repl/src/stores/dataCube/core/__tests__/DataCubeQueryAnalyzer.repl-test.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/core/__tests__/DataCubeQueryAnalyzer.repl-test.ts
@@ -57,8 +57,8 @@ const cases: BaseSnapshotAnalysisTestCase[] = [
'',
],
[
- 'Valid: Usage - Column Selection: extend()->filter()->select()->sort()->limit()',
- 'extend(~[a:x|1])->filter(x|$x.a==1)->select(~[a])->sort([ascending(~a)])->limit(10)',
+ 'Valid: Usage - Column Selection: extend()->select()->filter()->sort()->limit()',
+ 'extend(~[a:x|1])->select(~[a])->filter(x|$x.a==1)->sort([ascending(~a)])->limit(10)',
['a:Integer'],
'',
],
@@ -106,7 +106,7 @@ const cases: BaseSnapshotAnalysisTestCase[] = [
'Invalid: Unsupported function composition: filter()->extend()->filter()',
'filter(x|$x.a==1)->extend(~[a:x|1])->filter(x|$x.a==1)',
[],
- 'Unsupported function composition filter()->extend()->filter() (supported composition: extend()->filter()->groupBy()->pivot()->cast()->extend()->select()->sort()->limit())',
+ 'Unsupported function composition filter()->extend()->filter() (supported composition: extend()->select()->filter()->groupBy()->pivot()->cast()->extend()->sort()->limit())',
],
[
'Invalid: Group-level extend() used when no aggregation/grouping presents',
@@ -145,7 +145,7 @@ describe(unitTest('Analyze and build base snapshot'), () => {
await ENGINE_TEST_SUPPORT__grammarToJSON_valueSpecification(code),
[],
);
- const baseQuery = new DataCubeQuery('', '', {});
+ const baseQuery = new DataCubeQuery('', '', undefined);
baseQuery.source = new DataCubeQuerySourceREPLExecutedQuery();
baseQuery.partialQuery = code;
baseQuery.source.query = '';
diff --git a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorCodePanelState.ts b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorCodePanelState.ts
index 64b360123c..1347813a4e 100644
--- a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorCodePanelState.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorCodePanelState.ts
@@ -29,6 +29,7 @@ import {
SourceInformation,
V1_ParserError,
} from '@finos/legend-graph';
+import type { DataCubeEditorState } from './DataCubeEditorState.js';
class DataCubeQueryEditorState {
uuid = uuid();
@@ -79,11 +80,12 @@ class DataCubeQueryEditorState {
export class DataCubeEditorCodePanelState {
readonly dataCube!: DataCubeState;
+ readonly editor: DataCubeEditorState;
queryEditorState!: DataCubeQueryEditorState;
currentSubQuery?: string | undefined;
- constructor(dataCube: DataCubeState) {
+ constructor(editor: DataCubeEditorState) {
makeObservable(this, {
currentSubQuery: observable,
queryEditorState: observable,
@@ -91,7 +93,8 @@ export class DataCubeEditorCodePanelState {
parseQuery: flow,
});
- this.dataCube = dataCube;
+ this.editor = editor;
+ this.dataCube = editor.dataCube;
this.queryEditorState = new DataCubeQueryEditorState('');
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorColumnPropertiesPanelState.ts b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorColumnPropertiesPanelState.ts
new file mode 100644
index 0000000000..0d7ad991f9
--- /dev/null
+++ b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorColumnPropertiesPanelState.ts
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { action, computed, makeObservable, observable } from 'mobx';
+import type { DataCubeState } from '../DataCubeState.js';
+import type { DataCubeQuerySnapshot } from '../core/DataCubeQuerySnapshot.js';
+import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
+import type { DataCubeEditorState } from './DataCubeEditorState.js';
+import { DataCubeMutableColumnConfiguration } from './DataCubeMutableConfiguration.js';
+import { getNonNullableEntry, type PlainObject } from '@finos/legend-shared';
+
+export class DataCubeEditorColumnPropertiesPanelState
+ implements DataCubeQueryEditorPanelState
+{
+ readonly dataCube!: DataCubeState;
+ readonly editor!: DataCubeEditorState;
+
+ columns: DataCubeMutableColumnConfiguration[] = [];
+ selectedColumnName?: string | undefined;
+
+ constructor(editor: DataCubeEditorState) {
+ makeObservable(this, {
+ columns: observable,
+ setColumns: action,
+
+ selectedColumnName: observable,
+ setSelectedColumnName: action,
+ selectedColumn: computed,
+ });
+
+ this.editor = editor;
+ this.dataCube = editor.dataCube;
+ }
+
+ setColumns(val: DataCubeMutableColumnConfiguration[]): void {
+ this.columns = val;
+ }
+
+ setSelectedColumnName(val: string | undefined): void {
+ this.selectedColumnName = val;
+ }
+
+ get selectedColumn(): DataCubeMutableColumnConfiguration | undefined {
+ return this.columns.find(
+ (column) => column.name === this.selectedColumnName,
+ );
+ }
+
+ applySnaphot(snapshot: DataCubeQuerySnapshot): void {
+ this.setColumns(
+ (snapshot.data.configuration as { columns: PlainObject[] }).columns.map(
+ (column) => DataCubeMutableColumnConfiguration.create(column),
+ ),
+ );
+ if (!this.selectedColumn && this.columns.length) {
+ this.setSelectedColumnName(getNonNullableEntry(this.columns, 0).name);
+ }
+ }
+
+ buildSnapshot(
+ newSnapshot: DataCubeQuerySnapshot,
+ baseSnapshot: DataCubeQuerySnapshot,
+ ): void {
+ newSnapshot.data.configuration = {
+ ...newSnapshot.data.configuration,
+ columns: this.columns.map((column) => column.serialize()),
+ };
+ }
+}
diff --git a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorColumnsSelectorState.ts b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorColumnsSelectorState.ts
index 948dd9d7d3..937895942a 100644
--- a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorColumnsSelectorState.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorColumnsSelectorState.ts
@@ -18,6 +18,9 @@ import { makeObservable, observable, action } from 'mobx';
export abstract class DataCubeEditorColumnsSelectorColumnState {
abstract get name(): string;
+ resetWhenMadeAvailable(): void {
+ // do nothing
+ }
}
export class DataCubeEditorColumnsSelectorState<
@@ -45,6 +48,7 @@ export class DataCubeEditorColumnsSelectorState<
this.availableColumns = val
.slice()
.sort((a, b) => a.name.localeCompare(b.name));
+ this.availableColumns.forEach((column) => column.resetWhenMadeAvailable());
}
setSelectedColumns(val: T[]): void {
@@ -58,4 +62,12 @@ export class DataCubeEditorColumnsSelectorState<
setSelectedColumnsSearchText(val: string): void {
this.selectedColumnsSearchText = val;
}
+
+ getAvailableColumn(colName: string): T | undefined {
+ return this.availableColumns.find((col) => col.name === colName);
+ }
+
+ getSelectedColumn(colName: string): T | undefined {
+ return this.selectedColumns.find((col) => col.name === colName);
+ }
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorGeneralPropertiesPanelState.ts b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorGeneralPropertiesPanelState.ts
index e0e0d78add..6a37ba11ee 100644
--- a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorGeneralPropertiesPanelState.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorGeneralPropertiesPanelState.ts
@@ -18,63 +18,66 @@ import { action, makeObservable, observable } from 'mobx';
import type { DataCubeState } from '../DataCubeState.js';
import type { DataCubeQuerySnapshot } from '../core/DataCubeQuerySnapshot.js';
import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
+import type { DataCubeEditorState } from './DataCubeEditorState.js';
+import { DataCubeMutableConfiguration } from './DataCubeMutableConfiguration.js';
export class DataCubeEditorGeneralPropertiesPanelState
implements DataCubeQueryEditorPanelState
{
readonly dataCube!: DataCubeState;
+ readonly editor!: DataCubeEditorState;
+
name = '';
limit = -1;
+ configuration = new DataCubeMutableConfiguration();
- constructor(dataCube: DataCubeState) {
- this.dataCube = dataCube;
-
+ constructor(editor: DataCubeEditorState) {
makeObservable(this, {
name: observable,
setName: action,
limit: observable,
setLimit: action,
+
+ configuration: observable,
+ setConfiguration: action,
});
+
+ this.editor = editor;
+ this.dataCube = editor.dataCube;
}
setName(val: string): void {
this.name = val;
}
- setLimit(val: number | undefined): void {
- this.limit = Math.round(val === undefined || val < 0 ? -1 : val);
+ setLimit(val: number): void {
+ this.limit = val;
+ }
+
+ setConfiguration(val: DataCubeMutableConfiguration): void {
+ this.configuration = val;
}
applySnaphot(snapshot: DataCubeQuerySnapshot): void {
this.setName(snapshot.data.name);
- this.setLimit(snapshot.data.limit);
+ this.setLimit(
+ snapshot.data.limit !== undefined && snapshot.data.limit > 0
+ ? snapshot.data.limit
+ : -1,
+ );
+ this.setConfiguration(
+ DataCubeMutableConfiguration.create(snapshot.data.configuration),
+ );
}
buildSnapshot(
newSnapshot: DataCubeQuerySnapshot,
baseSnapshot: DataCubeQuerySnapshot,
- ): boolean {
- const data = baseSnapshot.data;
- // name
- if (this.name !== data.name) {
- data.name = this.name;
- return true;
- }
-
- // limit
- if (data.limit === undefined) {
- if (this.limit !== -1) {
- data.limit = this.limit;
- return true;
- }
- } else {
- if (this.limit !== data.limit) {
- data.limit = this.limit;
- return true;
- }
- }
-
- return false;
+ ): void {
+ const data = newSnapshot.data;
+ data.name = this.name;
+ data.limit = this.limit <= 0 ? undefined : this.limit;
+ data.configuration = this.configuration.serialize();
}
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorHPivotPanelState.ts b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorHPivotPanelState.ts
new file mode 100644
index 0000000000..719028a302
--- /dev/null
+++ b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorHPivotPanelState.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DataCubeState } from '../DataCubeState.js';
+import type { DataCubeQuerySnapshot } from '../core/DataCubeQuerySnapshot.js';
+import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
+import type { DataCubeEditorState } from './DataCubeEditorState.js';
+
+export class DataCubeEditorGeneralPropertiesPanelState
+ implements DataCubeQueryEditorPanelState
+{
+ readonly dataCube!: DataCubeState;
+ readonly editor!: DataCubeEditorState;
+
+ constructor(editor: DataCubeEditorState) {
+ this.editor = editor;
+ this.dataCube = editor.dataCube;
+ }
+
+ applySnaphot(snapshot: DataCubeQuerySnapshot): void {
+ // TODO
+ }
+
+ buildSnapshot(
+ newSnapshot: DataCubeQuerySnapshot,
+ baseSnapshot: DataCubeQuerySnapshot,
+ ): void {
+ // TODO
+ }
+}
diff --git a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorPanelState.ts b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorPanelState.ts
index a2f39df9f5..7804f6b446 100644
--- a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorPanelState.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorPanelState.ts
@@ -29,5 +29,5 @@ export interface DataCubeQueryEditorPanelState {
buildSnapshot(
newSnapshot: DataCubeQuerySnapshot,
baseSnapshot: DataCubeQuerySnapshot,
- ): boolean;
+ ): void;
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorSortsPanelState.ts b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorSortsPanelState.ts
index 6763fdb2f0..4bdcd778f2 100644
--- a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorSortsPanelState.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorSortsPanelState.ts
@@ -17,44 +17,47 @@
import { action, makeObservable, observable } from 'mobx';
import type { DataCubeState } from '../DataCubeState.js';
import {
- DataCubeQuerySnapshotSortDirection,
+ DataCubeQuerySnapshotSortOperation,
_getCol,
type DataCubeQuerySnapshot,
type DataCubeQuerySnapshotColumn,
- type DataCubeQuerySnapshotSortColumn,
} from '../core/DataCubeQuerySnapshot.js';
import type { DataCubeQueryEditorPanelState } from './DataCubeEditorPanelState.js';
-import { deepEqual } from '@finos/legend-shared';
import {
DataCubeEditorColumnsSelectorColumnState,
DataCubeEditorColumnsSelectorState,
} from './DataCubeEditorColumnsSelectorState.js';
+import type { DataCubeEditorState } from './DataCubeEditorState.js';
export class DataCubeEditorSortColumnState extends DataCubeEditorColumnsSelectorColumnState {
readonly column: DataCubeQuerySnapshotColumn;
- direction: DataCubeQuerySnapshotSortDirection;
+ operation: DataCubeQuerySnapshotSortOperation;
constructor(
column: DataCubeQuerySnapshotColumn,
- direction: DataCubeQuerySnapshotSortDirection,
+ direction: DataCubeQuerySnapshotSortOperation,
) {
super();
makeObservable(this, {
- direction: observable,
- setDirection: action,
+ operation: observable,
+ setOperation: action,
});
this.column = column;
- this.direction = direction;
+ this.operation = direction;
}
get name(): string {
return this.column.name;
}
- setDirection(val: DataCubeQuerySnapshotSortDirection): void {
- this.direction = val;
+ override resetWhenMadeAvailable(): void {
+ this.setOperation(DataCubeQuerySnapshotSortOperation.ASCENDING);
+ }
+
+ setOperation(val: DataCubeQuerySnapshotSortOperation): void {
+ this.operation = val;
}
}
@@ -62,13 +65,82 @@ export class DataCubeEditorSortsPanelState
implements DataCubeQueryEditorPanelState
{
readonly dataCube!: DataCubeState;
+ readonly editor!: DataCubeEditorState;
readonly columnsSelector!: DataCubeEditorColumnsSelectorState;
- constructor(dataCube: DataCubeState) {
- this.dataCube = dataCube;
+ constructor(editor: DataCubeEditorState) {
+ this.editor = editor;
+ this.dataCube = editor.dataCube;
this.columnsSelector = new DataCubeEditorColumnsSelectorState();
}
+ getActionableSortColumn(
+ colName: string,
+ operation: DataCubeQuerySnapshotSortOperation,
+ ): DataCubeEditorSortColumnState | undefined {
+ let column = this.columnsSelector.getAvailableColumn(colName);
+ if (!column) {
+ const selectedColumn = this.columnsSelector.getSelectedColumn(colName);
+ if (selectedColumn && selectedColumn.operation !== operation) {
+ column = selectedColumn;
+ }
+ }
+ return column;
+ }
+
+ sortByColumn(
+ colName: string,
+ operation: DataCubeQuerySnapshotSortOperation,
+ ): void {
+ const column = this.getActionableSortColumn(colName, operation);
+ if (!column) {
+ return;
+ }
+ column.setOperation(operation);
+
+ this.columnsSelector.setAvailableColumns(
+ [
+ ...this.columnsSelector.availableColumns,
+ ...this.columnsSelector.selectedColumns,
+ ].filter((col) => col.name !== colName),
+ );
+ this.columnsSelector.setSelectedColumns([column]);
+ this.editor.applyChanges();
+ }
+
+ addSortByColumn(
+ colName: string,
+ operation: DataCubeQuerySnapshotSortOperation,
+ ): void {
+ const column = this.getActionableSortColumn(colName, operation);
+ if (!column) {
+ return;
+ }
+ column.setOperation(operation);
+
+ this.columnsSelector.setAvailableColumns(
+ this.columnsSelector.availableColumns.filter(
+ (col) => col.name !== colName,
+ ),
+ );
+ this.columnsSelector.setSelectedColumns([
+ ...this.columnsSelector.selectedColumns,
+ column,
+ ]);
+ this.editor.applyChanges();
+ }
+
+ clearAllSorts(): void {
+ if (this.columnsSelector.selectedColumns.length !== 0) {
+ this.columnsSelector.setAvailableColumns([
+ ...this.columnsSelector.availableColumns,
+ ...this.columnsSelector.selectedColumns,
+ ]);
+ this.columnsSelector.setSelectedColumns([]);
+ this.editor.applyChanges();
+ }
+ }
+
applySnaphot(snapshot: DataCubeQuerySnapshot): void {
const columns = snapshot.stageCols('sort');
const sortColumns = snapshot.data.sortColumns;
@@ -81,7 +153,7 @@ export class DataCubeEditorSortsPanelState
(col) =>
new DataCubeEditorSortColumnState(
_getCol(columns, col.name),
- DataCubeQuerySnapshotSortDirection.ASCENDING,
+ DataCubeQuerySnapshotSortOperation.ASCENDING,
),
),
);
@@ -90,7 +162,7 @@ export class DataCubeEditorSortsPanelState
(col) =>
new DataCubeEditorSortColumnState(
_getCol(columns, col.name),
- col.direction,
+ col.operation,
),
),
);
@@ -99,18 +171,13 @@ export class DataCubeEditorSortsPanelState
buildSnapshot(
newSnapshot: DataCubeQuerySnapshot,
baseSnapshot: DataCubeQuerySnapshot,
- ): boolean {
- const newSortColumns: DataCubeQuerySnapshotSortColumn[] =
- this.columnsSelector.selectedColumns.map((sortInfo) => ({
+ ): void {
+ newSnapshot.data.sortColumns = this.columnsSelector.selectedColumns.map(
+ (sortInfo) => ({
name: sortInfo.column.name,
type: sortInfo.column.type,
- direction: sortInfo.direction,
- }));
-
- if (!deepEqual(newSortColumns, baseSnapshot.data.sortColumns)) {
- newSnapshot.data.sortColumns = newSortColumns;
- return true;
- }
- return false;
+ operation: sortInfo.operation,
+ }),
+ );
}
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorState.ts b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorState.ts
index 81d268eea0..73d4fe9814 100644
--- a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorState.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeEditorState.ts
@@ -22,6 +22,7 @@ import { DataCubeQuerySnapshotSubscriber } from '../core/DataCubeQuerySnapshotSu
import { type DataCubeQuerySnapshot } from '../core/DataCubeQuerySnapshot.js';
import { guaranteeNonNullable } from '@finos/legend-shared';
import { DataCubeEditorGeneralPropertiesPanelState } from './DataCubeEditorGeneralPropertiesPanelState.js';
+import { DataCubeEditorColumnPropertiesPanelState } from './DataCubeEditorColumnPropertiesPanelState.js';
export enum DATA_CUBE_EDITOR_TAB {
COLUMNS = 'Columns',
@@ -33,13 +34,13 @@ export enum DATA_CUBE_EDITOR_TAB {
GENERAL_PROPERTIES = 'General Properties',
COLUMN_PROPERTIES = 'Column Properties',
CODE = 'Code',
- // DEVELOPER_OPTIONS = 'Developer',
- // PIVOT_LAYOUT = 'Pivot Layout',
+ DEVELOPER = 'Developer',
}
export class DataCubeEditorState extends DataCubeQuerySnapshotSubscriber {
readonly sortsPanel: DataCubeEditorSortsPanelState;
readonly generalPropertiesPanel: DataCubeEditorGeneralPropertiesPanelState;
+ readonly columnPropertiesPanel: DataCubeEditorColumnPropertiesPanelState;
readonly codePanel: DataCubeEditorCodePanelState;
isPanelOpen = false;
@@ -59,11 +60,14 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotSubscriber {
closePanel: action,
});
- this.sortsPanel = new DataCubeEditorSortsPanelState(this.dataCube);
+ this.sortsPanel = new DataCubeEditorSortsPanelState(this);
this.generalPropertiesPanel = new DataCubeEditorGeneralPropertiesPanelState(
- this.dataCube,
+ this,
);
- this.codePanel = new DataCubeEditorCodePanelState(this.dataCube);
+ this.columnPropertiesPanel = new DataCubeEditorColumnPropertiesPanelState(
+ this,
+ );
+ this.codePanel = new DataCubeEditorCodePanelState(this);
}
openPanel(): void {
@@ -82,12 +86,14 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotSubscriber {
const baseSnapshot = guaranteeNonNullable(this.getLatestSnapshot());
const snapshot = baseSnapshot.clone();
- const createNew = [
- this.sortsPanel.buildSnapshot(snapshot, baseSnapshot),
- this.generalPropertiesPanel.buildSnapshot(snapshot, baseSnapshot),
- ].some(Boolean);
+ this.sortsPanel.buildSnapshot(snapshot, baseSnapshot);
+ // NOTE: snapshot must be processed first to build the container configuration
+ // before proceeding to process the columns' configuration
+ this.generalPropertiesPanel.buildSnapshot(snapshot, baseSnapshot);
+ this.columnPropertiesPanel.buildSnapshot(snapshot, baseSnapshot);
- if (createNew) {
+ snapshot.finalize();
+ if (snapshot.hashCode !== baseSnapshot.hashCode) {
this.publishSnapshot(snapshot);
}
}
@@ -95,6 +101,7 @@ export class DataCubeEditorState extends DataCubeQuerySnapshotSubscriber {
override async applySnapshot(snapshot: DataCubeQuerySnapshot): Promise {
this.sortsPanel.applySnaphot(snapshot);
this.generalPropertiesPanel.applySnaphot(snapshot);
+ this.columnPropertiesPanel.applySnaphot(snapshot);
}
override async initialize(): Promise {
diff --git a/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeMutableConfiguration.ts b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeMutableConfiguration.ts
new file mode 100644
index 0000000000..f540b4568b
--- /dev/null
+++ b/packages/legend-application-repl/src/stores/dataCube/editor/DataCubeMutableConfiguration.ts
@@ -0,0 +1,533 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+ getDataType,
+ type DataCubeColumnKind,
+ type DataCubeFont,
+ type DataCubeAggregateFunction,
+ type DataCubeNumberScale,
+ type DataCubeSelectionStat,
+ type DataCubeFontFormatUnderlinedVariant,
+ type DataCubeFontTextAlignment,
+ type DataCubeColumnDataType,
+ type DataCubeColumnPinPlacement,
+} from '../core/DataCubeQueryEngine.js';
+import { type PlainObject, type Writable } from '@finos/legend-shared';
+import { makeObservable, observable, action } from 'mobx';
+import {
+ DataCubeColumnConfiguration,
+ DataCubeConfiguration,
+} from '../core/DataCubeConfiguration.js';
+
+export class DataCubeMutableColumnConfiguration extends DataCubeColumnConfiguration {
+ aggregateFunction?: DataCubeAggregateFunction | undefined;
+ weightColumn?: string | undefined;
+ excludedFromHPivot = true;
+
+ readonly dataType!: DataCubeColumnDataType;
+
+ static create(
+ json: PlainObject,
+ ): DataCubeMutableColumnConfiguration {
+ const configuration = Object.assign(
+ new DataCubeMutableColumnConfiguration('', ''),
+ DataCubeColumnConfiguration.serialization.fromJson(json),
+ );
+ (configuration as Writable).dataType =
+ getDataType(configuration.type);
+
+ makeObservable(configuration, {
+ kind: observable,
+ setKind: action,
+
+ displayName: observable,
+ setDisplayName: action,
+
+ decimals: observable,
+ setDecimals: action,
+
+ displayCommas: observable,
+ setDisplayCommas: action,
+
+ negativeNumberInParens: observable,
+ setNegativeNumberInParens: action,
+
+ numberScale: observable,
+ setNumberScale: action,
+
+ hPivotSortFunction: observable,
+ setHPivotSortFunction: action,
+
+ fontFamily: observable,
+ setFontFamily: action,
+
+ fontSize: observable,
+ setFontSize: action,
+
+ fontBold: observable,
+ setFontBold: action,
+
+ fontItalic: observable,
+ setFontItalic: action,
+
+ fontUnderlined: observable,
+ setFontUnderlined: action,
+
+ fontStrikethrough: observable,
+ setFontStrikethrough: action,
+
+ textAlign: observable,
+ setTextAlign: action,
+
+ foregroundColor: observable,
+ setForegroundColor: action,
+
+ foregroundNegativeColor: observable,
+ setForegroundNegativeColor: action,
+
+ foregroundZeroColor: observable,
+ setForegroundZeroColor: action,
+
+ foregroundErrorColor: observable,
+ setForegroundErrorColor: action,
+
+ backgroundColor: observable,
+ setBackgroundColor: action,
+
+ backgroundNegativeColor: observable,
+ setBackgroundNegativeColor: action,
+
+ backgroundZeroColor: observable,
+ setBackgroundZeroColor: action,
+
+ backgroundErrorColor: observable,
+ setBackgroundErrorColor: action,
+
+ blur: observable,
+ setBlur: action,
+
+ hideFromView: observable,
+ setHideFromView: action,
+
+ aggregateFunction: observable,
+ setAggregateFunction: action,
+
+ weightColumn: observable,
+ setWeightColumn: action,
+
+ excludedFromHPivot: observable,
+ setExcludedFromHPivot: action,
+
+ fixedWidth: observable,
+ setFixedWidth: action,
+
+ minWidth: observable,
+ setMinWidth: action,
+
+ maxWidth: observable,
+ setMaxWidth: action,
+
+ pinned: observable,
+ setPinned: action,
+
+ displayAsLink: observable,
+ setDisplayAsLink: action,
+ });
+
+ return configuration;
+ }
+
+ serialize(): PlainObject {
+ return DataCubeColumnConfiguration.serialization.toJson(this);
+ }
+
+ setKind(value: DataCubeColumnKind): void {
+ this.kind = value;
+ }
+
+ setDisplayName(value: string | undefined): void {
+ this.displayName = value;
+ }
+
+ setDecimals(value: number | undefined): void {
+ this.decimals = value;
+ }
+
+ setDisplayCommas(value: boolean): void {
+ this.displayCommas = value;
+ }
+
+ setNegativeNumberInParens(value: boolean): void {
+ this.negativeNumberInParens = value;
+ }
+
+ setNumberScale(value: DataCubeNumberScale | undefined): void {
+ this.numberScale = value;
+ }
+
+ setHPivotSortFunction(value: string | undefined): void {
+ this.hPivotSortFunction = value;
+ }
+
+ setFontFamily(value: DataCubeFont): void {
+ this.fontFamily = value;
+ }
+
+ setFontSize(value: number): void {
+ this.fontSize = value;
+ }
+
+ setFontBold(value: boolean): void {
+ this.fontBold = value;
+ }
+
+ setFontItalic(value: boolean): void {
+ this.fontItalic = value;
+ }
+
+ setFontUnderlined(
+ value: DataCubeFontFormatUnderlinedVariant | undefined,
+ ): void {
+ this.fontUnderlined = value;
+ }
+
+ setTextAlign(value: DataCubeFontTextAlignment): void {
+ this.textAlign = value;
+ }
+
+ setFontStrikethrough(value: boolean): void {
+ this.fontStrikethrough = value;
+ }
+
+ setForegroundColor(value: string): void {
+ this.foregroundColor = value;
+ }
+
+ setForegroundNegativeColor(value: string): void {
+ this.foregroundNegativeColor = value;
+ }
+
+ setForegroundZeroColor(value: string): void {
+ this.foregroundZeroColor = value;
+ }
+
+ setForegroundErrorColor(value: string): void {
+ this.foregroundErrorColor = value;
+ }
+
+ setBackgroundColor(value: string): void {
+ this.backgroundColor = value;
+ }
+
+ setBackgroundNegativeColor(value: string): void {
+ this.backgroundNegativeColor = value;
+ }
+
+ setBackgroundZeroColor(value: string): void {
+ this.backgroundZeroColor = value;
+ }
+
+ setBackgroundErrorColor(value: string): void {
+ this.backgroundErrorColor = value;
+ }
+
+ setBlur(value: boolean): void {
+ this.blur = value;
+ }
+
+ setHideFromView(value: boolean): void {
+ this.hideFromView = value;
+ }
+
+ setFixedWidth(value: number | undefined): void {
+ this.fixedWidth = value;
+ }
+
+ setMinWidth(value: number | undefined): void {
+ this.minWidth = value;
+ }
+
+ setMaxWidth(value: number | undefined): void {
+ this.maxWidth = value;
+ }
+
+ setPinned(value: DataCubeColumnPinPlacement | undefined): void {
+ this.pinned = value;
+ }
+
+ setDisplayAsLink(value: boolean): void {
+ this.displayAsLink = value;
+ }
+
+ setAggregateFunction(value: DataCubeAggregateFunction | undefined): void {
+ this.aggregateFunction = value;
+ }
+
+ setWeightColumn(value: string | undefined): void {
+ this.weightColumn = value;
+ }
+
+ setExcludedFromHPivot(value: boolean): void {
+ this.excludedFromHPivot = value;
+ }
+}
+
+export class DataCubeMutableConfiguration extends DataCubeConfiguration {
+ static create(
+ json: PlainObject,
+ ): DataCubeMutableConfiguration {
+ const configuration = Object.assign(
+ new DataCubeMutableConfiguration(),
+ DataCubeConfiguration.serialization.fromJson(json),
+ );
+ configuration.columns = [];
+
+ makeObservable(configuration, {
+ description: observable,
+ setDescription: action,
+
+ showTreeLine: observable,
+ setShowTreeLine: action,
+
+ showHorizontalGridLine: observable,
+ setShowHorizontalGridLine: action,
+
+ showVerticalGridLine: observable,
+ setShowVerticalGridLine: action,
+
+ defaultFontFamily: observable,
+ setDefaultFontFamily: action,
+
+ defaultFontSize: observable,
+ setDefaultFontSize: action,
+
+ defaultFontBold: observable,
+ setDefaultFontBold: action,
+
+ defaultFontItalic: observable,
+ setDefaultFontItalic: action,
+
+ defaultFontUnderlined: observable,
+ setDefaultFontUnderlined: action,
+
+ defaultFontStrikethrough: observable,
+ setDefaultFontStrikethrough: action,
+
+ defaultTextAlign: observable,
+ setDefaultTextAlign: action,
+
+ defaultForegroundColor: observable,
+ setDefaultForegroundColor: action,
+
+ defaultForegroundNegativeColor: observable,
+ setDefaultForegroundNegativeColor: action,
+
+ defaultForegroundZeroColor: observable,
+ setDefaultForegroundZeroColor: action,
+
+ defaultForegroundErrorColor: observable,
+ setDefaultForegroundErrorColor: action,
+
+ defaultBackgroundColor: observable,
+ setDefaultBackgroundColor: action,
+
+ defaultBackgroundNegativeColor: observable,
+ setDefaultBackgroundNegativeColor: action,
+
+ defaultBackgroundZeroColor: observable,
+ setDefaultBackgroundZeroColor: action,
+
+ defaultBackgroundErrorColor: observable,
+ setDefaultBackgroundErrorColor: action,
+
+ alternateRows: observable,
+ setAlternateRows: action,
+
+ alternateRowsColor: observable,
+ setAlternateRowsColor: action,
+
+ alternateRowsCount: observable,
+ setAlternateRowsCount: action,
+
+ numberScale: observable,
+ setNumberScale: action,
+
+ selectionStats: observable,
+ setSelectionStats: action,
+
+ rowBuffer: observable,
+ setRowBuffer: action,
+
+ showWarningForTruncatedResult: observable,
+ setShowWarningForTruncatedResult: action,
+
+ initialExpandLevel: observable,
+ setInitialExpandLevel: action,
+
+ showRootAggregation: observable,
+ setShowRootAggregation: action,
+
+ showLeafCount: observable,
+ setShowLeafCount: action,
+
+ addPivotTotalColumn: observable,
+ setAddPivotTotalColumn: action,
+
+ addPivotTotalColumnOnLeft: observable,
+ setAddPivotTotalColumnOnLeft: action,
+
+ treeGroupSortFunction: observable,
+ setTreeGroupSortFunction: action,
+ });
+
+ return configuration;
+ }
+
+ serialize(): PlainObject {
+ return DataCubeConfiguration.serialization.toJson(this);
+ }
+
+ setDescription(value: string | undefined): void {
+ this.description = value;
+ }
+
+ setShowTreeLine(value: boolean): void {
+ this.showTreeLine = value;
+ }
+
+ setShowHorizontalGridLine(value: boolean): void {
+ this.showHorizontalGridLine = value;
+ }
+
+ setShowVerticalGridLine(value: boolean): void {
+ this.showVerticalGridLine = value;
+ }
+
+ setDefaultFontFamily(value: DataCubeFont): void {
+ this.defaultFontFamily = value;
+ }
+
+ setDefaultFontSize(value: number): void {
+ this.defaultFontSize = value;
+ }
+
+ setDefaultFontBold(value: boolean): void {
+ this.defaultFontBold = value;
+ }
+
+ setDefaultFontItalic(value: boolean): void {
+ this.defaultFontItalic = value;
+ }
+
+ setDefaultFontUnderlined(
+ value: DataCubeFontFormatUnderlinedVariant | undefined,
+ ): void {
+ this.defaultFontUnderlined = value;
+ }
+
+ setDefaultFontStrikethrough(value: boolean): void {
+ this.defaultFontStrikethrough = value;
+ }
+
+ setDefaultTextAlign(value: DataCubeFontTextAlignment): void {
+ this.defaultTextAlign = value;
+ }
+
+ setDefaultForegroundColor(value: string): void {
+ this.defaultForegroundColor = value;
+ }
+
+ setDefaultForegroundNegativeColor(value: string): void {
+ this.defaultForegroundNegativeColor = value;
+ }
+
+ setDefaultForegroundZeroColor(value: string): void {
+ this.defaultForegroundZeroColor = value;
+ }
+
+ setDefaultForegroundErrorColor(value: string): void {
+ this.defaultForegroundErrorColor = value;
+ }
+
+ setDefaultBackgroundColor(value: string): void {
+ this.defaultBackgroundColor = value;
+ }
+
+ setDefaultBackgroundNegativeColor(value: string): void {
+ this.defaultBackgroundNegativeColor = value;
+ }
+
+ setDefaultBackgroundZeroColor(value: string): void {
+ this.defaultBackgroundZeroColor = value;
+ }
+
+ setDefaultBackgroundErrorColor(value: string): void {
+ this.defaultBackgroundErrorColor = value;
+ }
+
+ setAlternateRows(value: boolean): void {
+ this.alternateRows = value;
+ }
+
+ setAlternateRowsColor(value: string): void {
+ this.alternateRowsColor = value;
+ }
+
+ setAlternateRowsCount(value: number): void {
+ this.alternateRowsCount = value;
+ }
+
+ setNumberScale(value: DataCubeNumberScale | undefined): void {
+ this.numberScale = value;
+ }
+
+ setSelectionStats(value: DataCubeSelectionStat[]): void {
+ this.selectionStats = value;
+ }
+
+ setRowBuffer(value: number): void {
+ this.rowBuffer = value;
+ }
+
+ setShowWarningForTruncatedResult(value: boolean): void {
+ this.showWarningForTruncatedResult = value;
+ }
+
+ setInitialExpandLevel(value: number | undefined): void {
+ this.initialExpandLevel = value;
+ }
+
+ setShowRootAggregation(value: boolean): void {
+ this.showRootAggregation = value;
+ }
+
+ setShowLeafCount(value: boolean): void {
+ this.showLeafCount = value;
+ }
+
+ setAddPivotTotalColumn(value: boolean): void {
+ this.addPivotTotalColumn = value;
+ }
+
+ setAddPivotTotalColumnOnLeft(value: boolean): void {
+ this.addPivotTotalColumnOnLeft = value;
+ }
+
+ setTreeGroupSortFunction(value: string | undefined): void {
+ this.treeGroupSortFunction = value;
+ }
+}
diff --git a/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridClientEngine.ts b/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridClientEngine.ts
index b5e863e4f7..85365903a5 100644
--- a/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridClientEngine.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridClientEngine.ts
@@ -15,6 +15,8 @@
*/
import type {
+ GridApi,
+ IRowNode,
IServerSideDatasource,
IServerSideGetRowsParams,
} from '@ag-grid-community/core';
@@ -39,7 +41,6 @@ type GridClientRowData = {
export const INTERNAL__GRID_CLIENT_HEADER_HEIGHT = 24;
export const INTERNAL__GRID_CLIENT_ROW_HEIGHT = 20;
-export const INTERNAL__GRID_CLIENT_ROW_BUFFER = 50;
export const INTERNAL__GRID_CLIENT_TREE_COLUMN_ID = 'INTERNAL__tree';
export const INTERNAL__GRID_CLIENT_ROW_GROUPING_COUNT_AGG_COLUMN_ID =
'INTERNAL__count';
@@ -57,6 +58,30 @@ export enum GridClientAggregateOperation {
AVERAGE = 'avg',
}
+export function getDataForAllNodes(client: GridApi): T[] {
+ const rows: T[] = [];
+ client.forEachNode((node: IRowNode) => {
+ if (node.data) {
+ rows.push(node.data);
+ }
+ });
+ return rows;
+}
+
+/**
+ * NOTE: this method does not work for server-side row model.
+ * It only works when client-side filter is being applied
+ */
+export function getDataForAllFilteredNodes(client: GridApi): T[] {
+ const rows: T[] = [];
+ client.forEachNodeAfterFilter((node: IRowNode) => {
+ if (node.data) {
+ rows.push(node.data);
+ }
+ });
+ return rows;
+}
+
function TDStoRowData(tds: TabularDataSet): GridClientRowData[] {
return tds.rows.map((_row, rowIdx) => {
const row: GridClientRowData = {};
@@ -88,6 +113,8 @@ export class DataCubeGridClientServerSideDataSource
async fetchRows(
params: IServerSideGetRowsParams,
): Promise {
+ const task = this.grid.dataCube.newTask('Fetching data');
+
// ------------------------------ GRID OPTIONS ------------------------------
// Here, we make adjustments to the grid display in response to the new
// request, in case the grid action has not impacted the layout in an
@@ -109,8 +136,10 @@ export class DataCubeGridClientServerSideDataSource
// ------------------------------ SNAPSHOT ------------------------------
const currentSnapshot = guaranteeNonNullable(this.grid.getLatestSnapshot());
+ // TODO: when we support pivoting, we should make a quick call to check for columns
+ // created by pivots and specify them as cast columns when pivot is activated
const syncedSnapshot = buildQuerySnapshot(params.request, currentSnapshot);
- if (syncedSnapshot.uuid !== currentSnapshot.uuid) {
+ if (syncedSnapshot.hashCode !== currentSnapshot.hashCode) {
this.grid.publishSnapshot(syncedSnapshot);
}
@@ -161,6 +190,8 @@ export class DataCubeGridClientServerSideDataSource
assertErrorThrown(error);
this.grid.dataCube.application.notificationService.notifyError(error);
params.fail();
+ } finally {
+ this.grid.dataCube.endTask(task);
}
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQueryBuilder.ts b/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQueryBuilder.ts
index 92502932ce..a28a6ea9ac 100644
--- a/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQueryBuilder.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQueryBuilder.ts
@@ -139,16 +139,6 @@ export function generateRowGroupingDrilldownExecutableQueryPostProcessor(
// --------------------------------- PIVOT ---------------------------------
// TODO: @akphi - implement this and CAST
-
- // --------------------------------- SELECT ---------------------------------
- if (funcMap.select && drilldownValues.length < groupBy.columns.length) {
- funcMap.select.parameters = [
- _cols([
- ...data.selectColumns.map((col) => _colSpec(col.name)),
- _colSpec(INTERNAL__GRID_CLIENT_ROW_GROUPING_COUNT_AGG_COLUMN_ID),
- ]),
- ];
- }
}
};
}
diff --git a/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQuerySnapshotAnalyzer.tsx b/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQuerySnapshotAnalyzer.tsx
index e523414b12..edd2fcd4f5 100644
--- a/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQuerySnapshotAnalyzer.tsx
+++ b/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQuerySnapshotAnalyzer.tsx
@@ -23,7 +23,7 @@
import {
DataCubeQuerySnapshotAggregateFunction,
- DataCubeQuerySnapshotSortDirection,
+ DataCubeQuerySnapshotSortOperation,
_findCol,
type DataCubeQuerySnapshot,
type DataCubeQuerySnapshotColumn,
@@ -95,7 +95,7 @@ function _sortSpec(snapshot: DataCubeQuerySnapshot, colName: string) {
}
return {
sort:
- sortCol.direction === DataCubeQuerySnapshotSortDirection.ASCENDING
+ sortCol.operation === DataCubeQuerySnapshotSortOperation.ASCENDING
? GridClientSortDirection.ASCENDING
: GridClientSortDirection.DESCENDING,
sortIndex: sortColumns.indexOf(sortCol),
@@ -161,9 +161,10 @@ export function generateGridOptionsFromSnapshot(
lockPosition: true,
cellStyle: {
flex: 1,
- 'justify-content': 'space-between',
+ justifyContent: 'space-between',
display: 'flex',
},
+ sortable: false, // TODO: @akphi - we can support this in the configuration
} satisfies ColDef,
...data.selectColumns.map(
(col) =>
diff --git a/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQuerySnapshotBuilder.ts b/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQuerySnapshotBuilder.ts
index 620c4848a4..ede914c35c 100644
--- a/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQuerySnapshotBuilder.ts
+++ b/packages/legend-application-repl/src/stores/dataCube/grid/DataCubeGridQuerySnapshotBuilder.ts
@@ -24,15 +24,12 @@
import type { IServerSideGetRowsRequest } from '@ag-grid-community/core';
import {
type DataCubeQuerySnapshot,
- type DataCubeQuerySnapshotSortColumn,
- DataCubeQuerySnapshotSortDirection,
+ DataCubeQuerySnapshotSortOperation,
_getCol,
DataCubeQuerySnapshotAggregateFunction,
- type DataCubeQuerySnapshotGroupBy,
} from '../core/DataCubeQuerySnapshot.js';
import {
IllegalStateError,
- deepEqual,
guaranteeNonNullable,
isNonNullable,
} from '@finos/legend-shared';
@@ -68,15 +65,16 @@ export function buildQuerySnapshot(
request: IServerSideGetRowsRequest,
baseSnapshot: DataCubeQuerySnapshot,
): DataCubeQuerySnapshot {
- let createNew = false;
+ const snapshot = baseSnapshot.clone();
- // --------------------------------- GROUP BY ---------------------------------
+ // --------------------------------- SELECT ---------------------------------
+ // TODO: @akphi - Implement this
- let groupBy: undefined | DataCubeQuerySnapshotGroupBy = undefined;
+ // --------------------------------- GROUP BY ---------------------------------
if (request.rowGroupCols.length) {
const availableCols = baseSnapshot.stageCols('aggregation');
- groupBy = {
+ snapshot.data.groupBy = {
columns: request.rowGroupCols.map((col) => ({
name: col.id,
type: _getCol(availableCols, col.id).type,
@@ -89,39 +87,21 @@ export function buildQuerySnapshot(
function: _aggFunc(col.aggFunc as GridClientAggregateOperation),
})),
};
+ } else {
+ snapshot.data.groupBy = undefined;
}
// --------------------------------- SORT ---------------------------------
- let sortColumns: DataCubeQuerySnapshotSortColumn[] = [];
- if (request.sortModel.length) {
- const availableCols = baseSnapshot.stageCols('sort');
- sortColumns = request.sortModel.map((item) => ({
- ..._getCol(availableCols, item.colId),
- direction:
- item.sort === GridClientSortDirection.ASCENDING
- ? DataCubeQuerySnapshotSortDirection.ASCENDING
- : DataCubeQuerySnapshotSortDirection.DESCENDING,
- }));
- }
-
- // --------------------------------- SELECT ---------------------------------
- // TODO: @akphi - Implement this
+ snapshot.data.sortColumns = request.sortModel.map((item) => ({
+ ..._getCol(baseSnapshot.stageCols('sort'), item.colId),
+ operation:
+ item.sort === GridClientSortDirection.ASCENDING
+ ? DataCubeQuerySnapshotSortOperation.ASCENDING
+ : DataCubeQuerySnapshotSortOperation.DESCENDING,
+ }));
// --------------------------------- FINALIZE ---------------------------------
- if (
- !deepEqual(sortColumns, baseSnapshot.data.sortColumns) ||
- !deepEqual(groupBy, baseSnapshot.data.groupBy)
- ) {
- createNew = true;
- }
-
- if (createNew) {
- const newSnapshot = baseSnapshot.clone();
- newSnapshot.data.sortColumns = sortColumns;
- newSnapshot.data.groupBy = groupBy;
- return newSnapshot;
- }
- return baseSnapshot;
+ return snapshot.finalize();
}
diff --git a/packages/legend-application-repl/style/_repl.scss b/packages/legend-application-repl/style/_repl.scss
new file mode 100644
index 0000000000..97e89501d4
--- /dev/null
+++ b/packages/legend-application-repl/style/_repl.scss
@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import url('@ag-grid-community/styles/ag-grid.css');
+@import url('@ag-grid-community/styles/ag-theme-balham.css');
+
+// ---------------------------------------- NORMALIZE ----------------------------------------
+
+html {
+ box-sizing: border-box;
+ font-family: Roboto, sans-serif;
+}
+
+body {
+ // default font size is 12px everywhere to make the app more compact
+ font-size: 12px;
+}
+
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+::-webkit-scrollbar-corner {
+ background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #00000010;
+ border: 0.2rem solid transparent;
+ background-clip: content-box;
+ border-radius: 0.4rem;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #00000020;
+ border: 0.2rem solid transparent;
+ background-clip: content-box;
+ border-radius: 0.4rem;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+ background: #00000005;
+}
+
+// ---------------------------------------- RESET ----------------------------------------
+
+input:focus-visible,
+button:focus-visible {
+ outline-color: var(--tw-color-sky-600);
+ outline-offset: -1px;
+ outline-width: 1.5px;
+ outline-style: solid;
+}
+
+.MuiCheckbox-root.Mui-focusVisible svg {
+ outline-color: var(--tw-color-sky-600);
+ outline-offset: -2px;
+ outline-width: 1.5px;
+ outline-style: solid;
+}
+
+.data-cube-editor-checkbox--checked svg {
+ color: var(--tw-color-neutral-600);
+}
+
+.data-cube-editor-checkbox--disabled svg {
+ color: var(--tw-color-neutral-300);
+}
+
+// ---------------------------------------- CUSTOMIZE ----------------------------------------
+
+.data-cube-color-picker {
+ .react-colorful {
+ width: 270px;
+ height: 100px;
+ border-radius: 2px;
+ border: 0.5px solid var(--tw-color-neutral-600);
+ }
+
+ .react-colorful__saturation {
+ border-radius: 2px 2px 0 0;
+ }
+
+ .react-colorful__pointer {
+ width: 12px;
+ height: 12px;
+ }
+
+ .react-colorful__hue {
+ height: 12px;
+ }
+
+ .react-colorful__last-control {
+ border-radius: 0 0 2px 2px;
+ height: 12px;
+ }
+}
+
+.data-cube-color-picker--disabled {
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100' %3E%3Cpath d='M1 0 L0 1 L99 100 L100 99' stroke-width='4' stroke='%23e5e5e5' /%3E%3C/svg%3E");
+}
+
+.data-cube-grid .ag-theme-balham {
+ --ag-input-focus-border-color: var(--tw-color-sky-600);
+ --ag-balham-active-color: var(--tw-color-sky-600);
+ --ag-range-selection-border-color: var(--tw-color-sky-600);
+ --ag-range-selection-highlight-color: var(
+ --tw-color-sky-50
+ ); // color for the brief highlight animation when cells are copied
+
+ --ag-border-color: var(--tw-color-neutral-200);
+ --ag-header-background-color: var(--tw-color-neutral-100);
+ --ag-header-height: 24px;
+ --ag-row-height: 20px;
+ --ag-font-size: 12px;
+ --ag-grid-size: 1px;
+ --ag-icon-size: 12px;
+ --ag-font-family: 'Roboto', sans-serif;
+ --ag-icon-font-color: var(--tw-color-neutral-500);
+ --ag-row-border-color: transparent;
+ --ag-header-foreground-color: var(--tw-color-black);
+ --ag-odd-row-background-color: var(--tw-color-white);
+ --ag-row-hover-color: #d4d4d415; // tailwind neutral 300
+ // NOTE: These are icons taken from Tabler and URI encoded
+ // See https://yoksel.github.io/url-encoder/
+ // See https://tablericons.com/
+ // See https://github.com/tabler/tabler-icons
+ --ag-icon-font-code-group: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-table-column' width='12' height='12' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000000' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z' /%3E%3Cpath d='M10 10h11' /%3E%3Cpath d='M10 3v18' /%3E%3Cpath d='M9 3l-6 6' /%3E%3Cpath d='M10 7l-7 7' /%3E%3Cpath d='M10 12l-7 7' /%3E%3Cpath d='M10 17l-4 4' /%3E%3C/svg%3E");
+ --ag-icon-font-code-pivot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-table-row' width='12' height='12' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000000' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z' /%3E%3Cpath d='M9 3l-6 6' /%3E%3Cpath d='M14 3l-7 7' /%3E%3Cpath d='M19 3l-7 7' /%3E%3Cpath d='M21 6l-4 4' /%3E%3Cpath d='M3 10h18' /%3E%3Cpath d='M10 10v11' /%3E%3C/svg%3E");
+
+ .ag-column-drop-cell {
+ height: 16px;
+ display: flex;
+ align-items: center;
+
+ .ag-column-drop-cell-text {
+ height: 16px;
+ }
+ }
+
+ .ag-column-drop-empty-message.ag-column-drop-horizontal-empty-message {
+ font-size: 0;
+ }
+
+ .ag-column-drop-list.ag-column-drop-horizontal-list[aria-label='Row Groups']
+ .ag-column-drop-empty-message.ag-column-drop-horizontal-empty-message::after {
+ content: 'Drag columns here to set vertical pivots';
+ font-size: 11px;
+ }
+
+ .ag-column-drop-list.ag-column-drop-horizontal-list[aria-label='Column Labels']
+ .ag-column-drop-empty-message.ag-column-drop-horizontal-empty-message::after {
+ content: 'Drag columns here to set horizontal pivots';
+ font-size: 11px;
+ }
+
+ .ag-header-cell-label .ag-sort-order {
+ font-size: 10px;
+ margin-left: 5px;
+ margin-right: -2px;
+ color: var(--tw-color-neutral-500);
+ font-weight: 500;
+ }
+
+ .ag-menu-list {
+ min-width: 120px;
+ }
+
+ .ag-menu-option-icon {
+ padding: 5px 5px 0;
+ }
+
+ .ag-menu-option-part {
+ padding: 5px 2px;
+ }
+
+ .ag-menu-option-popup-pointer {
+ padding: 5px 5px 5px 0;
+ }
+
+ // TODO: cell/range selection color
+}
+
+.data-cube-column-selector .ag-theme-balham {
+ --ag-balham-active-color: var(--tw-color-sky-600);
+ --ag-input-focus-border-color: var(--tw-color-sky-600);
+ --ag-range-selection-border-color: var(--tw-color-sky-600);
+ --ag-selected-row-background-color: var(--tw-color-sky-200);
+ --ag-border-color: var(--tw-color-white);
+ --ag-header-background-color: var(--tw-color-white);
+ --ag-header-height: 20px;
+ --ag-row-height: 20px;
+ --ag-font-size: 12px;
+ --ag-grid-size: 1px;
+ --ag-icon-size: 12px;
+ --ag-font-family: 'Roboto', sans-serif;
+ --ag-icon-font-color: var(--tw-color-neutral-500);
+ --ag-row-border-color: transparent;
+ --ag-header-foreground-color: var(--tw-color-black);
+ --ag-row-hover-color: #d4d4d415; // tailwind neutral 300
+ --ag-header-column-separator-display: none;
+
+ .ag-header-cell {
+ padding-left: 20px;
+ }
+
+ // ag-grid header always comes with a big padding, we want to suppress that
+ .ag-header-cell:focus-visible::after {
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ .ag-drag-handle.ag-row-drag {
+ margin-right: 5px;
+ }
+}
diff --git a/packages/legend-application-repl/style/index.scss b/packages/legend-application-repl/style/index.scss
index d10f639d76..716d5b1ace 100644
--- a/packages/legend-application-repl/style/index.scss
+++ b/packages/legend-application-repl/style/index.scss
@@ -14,131 +14,4 @@
* limitations under the License.
*/
-@import url('@ag-grid-community/styles/ag-grid.css');
-@import url('@ag-grid-community/styles/ag-theme-balham.css');
-
-input:focus-visible,
-button:focus-visible {
- outline-color: var(--tw-color-sky-600);
- outline-offset: -1px;
- outline-width: 1.5px;
- outline-style: solid;
-}
-
-body {
- // default font size is 12px everywhere to make the app more compact
- font-size: 12px;
-}
-
-::-webkit-scrollbar-track {
- background: transparent;
-}
-
-::-webkit-scrollbar-corner {
- background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
- background: #00000010;
- border: 0.2rem solid transparent;
- background-clip: content-box;
- border-radius: 0.4rem;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: #00000020;
- border: 0.2rem solid transparent;
- background-clip: content-box;
- border-radius: 0.4rem;
-}
-
-::-webkit-scrollbar-thumb:window-inactive {
- background: #00000005;
-}
-
-.data-cube-grid .ag-theme-balham {
- --ag-input-focus-border-color: var(--tw-color-sky-600);
- --ag-balham-active-color: var(--tw-color-sky-600);
- --ag-range-selection-border-color: var(--tw-color-sky-600);
- --ag-border-color: var(--tw-color-neutral-200);
- --ag-header-background-color: var(--tw-color-neutral-100);
- --ag-header-height: 24px;
- --ag-row-height: 20px;
- --ag-font-size: 12px;
- --ag-grid-size: 1px;
- --ag-icon-size: 12px;
- --ag-icon-font-color: var(--tw-color-neutral-500);
- --ag-row-border-color: transparent;
- --ag-header-foreground-color: var(--tw-color-black);
- --ag-odd-row-background-color: var(--tw-color-white);
- --ag-row-hover-color: #d4d4d415; // tailwind neutral 300
- // NOTE: These are icons taken from Tabler and URI encoded
- // See https://yoksel.github.io/url-encoder/
- // See https://tablericons.com/
- // See https://github.com/tabler/tabler-icons
- --ag-icon-font-code-group: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-table-column' width='12' height='12' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000000' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z' /%3E%3Cpath d='M10 10h11' /%3E%3Cpath d='M10 3v18' /%3E%3Cpath d='M9 3l-6 6' /%3E%3Cpath d='M10 7l-7 7' /%3E%3Cpath d='M10 12l-7 7' /%3E%3Cpath d='M10 17l-4 4' /%3E%3C/svg%3E");
- --ag-icon-font-code-pivot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-table-row' width='12' height='12' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000000' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z' /%3E%3Cpath d='M9 3l-6 6' /%3E%3Cpath d='M14 3l-7 7' /%3E%3Cpath d='M19 3l-7 7' /%3E%3Cpath d='M21 6l-4 4' /%3E%3Cpath d='M3 10h18' /%3E%3Cpath d='M10 10v11' /%3E%3C/svg%3E");
-
- .ag-column-drop-cell {
- height: 16px;
- display: flex;
- align-items: center;
-
- .ag-column-drop-cell-text {
- height: 16px;
- }
- }
-
- .ag-column-drop-empty-message.ag-column-drop-horizontal-empty-message {
- font-size: 0;
- }
-
- .ag-column-drop-list.ag-column-drop-horizontal-list[aria-label='Row Groups']
- .ag-column-drop-empty-message.ag-column-drop-horizontal-empty-message::after {
- content: 'Drag columns here to set vertical pivots';
- font-size: 11px;
- }
-
- .ag-column-drop-list.ag-column-drop-horizontal-list[aria-label='Column Labels']
- .ag-column-drop-empty-message.ag-column-drop-horizontal-empty-message::after {
- content: 'Drag columns here to set horizontal pivots';
- font-size: 11px;
- }
-
- // TODO: cell/range selection color
-}
-
-.data-cube-column-selector .ag-theme-balham {
- --ag-balham-active-color: var(--tw-color-sky-600);
- --ag-input-focus-border-color: var(--tw-color-sky-600);
- --ag-range-selection-border-color: var(--tw-color-sky-600);
- --ag-selected-row-background-color: var(--tw-color-sky-200);
- --ag-border-color: var(--tw-color-white);
- --ag-header-background-color: var(--tw-color-white);
- --ag-header-height: 20px;
- --ag-row-height: 20px;
- --ag-font-size: 12px;
- --ag-grid-size: 1px;
- --ag-icon-size: 12px;
- --ag-icon-font-color: var(--tw-color-neutral-500);
- --ag-row-border-color: transparent;
- --ag-header-foreground-color: var(--tw-color-black);
- --ag-row-hover-color: #d4d4d415; // tailwind neutral 300
- --ag-header-column-separator-display: none;
-
- .ag-header-cell {
- padding-left: 20px;
- }
-
- // ag-grid header always comes with a big padding, we want to suppress that
- .ag-header-cell:focus-visible::after {
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
-
- .ag-drag-handle.ag-row-drag {
- margin-right: 5px;
- }
-}
+@forward 'repl';
diff --git a/packages/legend-application-studio/package.json b/packages/legend-application-studio/package.json
index 62ca613152..b6f8ac403f 100644
--- a/packages/legend-application-studio/package.json
+++ b/packages/legend-application-studio/package.json
@@ -60,7 +60,7 @@
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"fast-xml-parser": "4.4.0",
- "mobx": "6.12.4",
+ "mobx": "6.12.5",
"mobx-react-lite": "4.0.7",
"mobx-utils": "6.0.8",
"monaco-editor": "0.50.0",
diff --git a/packages/legend-application-studio/src/components/editor/ActivityBar.tsx b/packages/legend-application-studio/src/components/editor/ActivityBar.tsx
index 8f67918a3e..d00fffcd47 100644
--- a/packages/legend-application-studio/src/components/editor/ActivityBar.tsx
+++ b/packages/legend-application-studio/src/components/editor/ActivityBar.tsx
@@ -24,7 +24,7 @@ import {
import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
import {
clsx,
- DropdownMenu,
+ ControlledDropdownMenu,
RepoIcon,
MenuContent,
MenuContentItem,
@@ -115,7 +115,7 @@ export const ActivityBarMenu: React.FC = () => {
return (
<>
- {
}
>
+
);
});
diff --git a/packages/legend-application-studio/src/components/editor/command-center/ProjectSearchCommand.tsx b/packages/legend-application-studio/src/components/editor/command-center/ProjectSearchCommand.tsx
index 570e61419a..711c0b93bb 100644
--- a/packages/legend-application-studio/src/components/editor/command-center/ProjectSearchCommand.tsx
+++ b/packages/legend-application-studio/src/components/editor/command-center/ProjectSearchCommand.tsx
@@ -19,7 +19,7 @@ import { observer } from 'mobx-react-lite';
import {
type SelectComponent,
compareLabelFn,
- DropdownMenu,
+ ControlledDropdownMenu,
NonBlockingDialog,
createFilter,
CustomSelectorInput,
@@ -106,7 +106,7 @@ export const ProjectSearchCommand = observer(() => {
className="search-modal"
>
{currentTabState instanceof ElementEditorState && (
- {
{currentTabState.generationModeState?.label ??
currentTabState.editMode}
-
+
)}
{currentTabState instanceof EntityDiffViewState && (
-
{
{currentTabState.diffMode}
-
+
)}
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/GrammarTextEditor.tsx b/packages/legend-application-studio/src/components/editor/editor-group/GrammarTextEditor.tsx
index 1f967930f9..0a9feb3bbe 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/GrammarTextEditor.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/GrammarTextEditor.tsx
@@ -30,7 +30,7 @@ import {
MenuContentItem,
PanelLoadingIndicator,
CaretDownIcon,
- DropdownMenu,
+ ControlledDropdownMenu,
MenuContentItemIcon,
CheckIcon,
MenuContentItemLabel,
@@ -1251,7 +1251,7 @@ export const GrammarTextEditor = observer(() => {
- {
Advanced
-
+
-
@@ -317,7 +317,7 @@ export const ModelImporter = observer(() => {
-
+
{modelImportEditorState.allowHardReplace && (
-
+
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/connection-editor/post-processor-editor/MapperPostProcessorEditor.tsx b/packages/legend-application-studio/src/components/editor/editor-group/connection-editor/post-processor-editor/MapperPostProcessorEditor.tsx
index 0e80205968..368b9908c5 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/connection-editor/post-processor-editor/MapperPostProcessorEditor.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/connection-editor/post-processor-editor/MapperPostProcessorEditor.tsx
@@ -24,7 +24,7 @@ import {
ContextMenu,
MenuContent,
MenuContentItem,
- DropdownMenu,
+ ControlledDropdownMenu,
PanelListSelectorItem,
BlankPanelContent,
ResizablePanelSplitterLine,
@@ -137,7 +137,7 @@ export const MapperPostProcessorEditor = observer(
-
+
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/data-editor/DataElementEditor.tsx b/packages/legend-application-studio/src/components/editor/editor-group/data-editor/DataElementEditor.tsx
index 93d57bbdf3..bfc8b830b3 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/data-editor/DataElementEditor.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/data-editor/DataElementEditor.tsx
@@ -24,7 +24,7 @@ import {
import {
CaretDownIcon,
clsx,
- DropdownMenu,
+ ControlledDropdownMenu,
InfoCircleIcon,
LockIcon,
MenuContent,
@@ -123,7 +123,7 @@ export const ExternalFormatDataEditor = observer(
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx b/packages/legend-application-studio/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx
index d35b50ec75..fd6c940ac9 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx
@@ -21,7 +21,7 @@ import {
CaretDownIcon,
clsx,
CustomSelectorInput,
- DropdownMenu,
+ ControlledDropdownMenu,
LockIcon,
LongArrowRightIcon,
MenuContent,
@@ -122,7 +122,7 @@ export const ExternalFormatDataEditor = observer(
>
-
-
+
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/function-activator/FunctionEditor.tsx b/packages/legend-application-studio/src/components/editor/editor-group/function-activator/FunctionEditor.tsx
index 5a6a56fd44..1e077e052f 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/function-activator/FunctionEditor.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/function-activator/FunctionEditor.tsx
@@ -51,7 +51,7 @@ import {
ModalBody,
ModalFooter,
CaretDownIcon,
- DropdownMenu,
+ ControlledDropdownMenu,
BlankPanelContent,
MenuContent,
MenuContentItem,
@@ -1377,7 +1377,7 @@ export const FunctionEditor = observer(() => {
Run
-
{
}}
>
+
)}
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/MappingExecutionBuilder.tsx b/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/MappingExecutionBuilder.tsx
index 91738f4646..ac7dee2c1b 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/MappingExecutionBuilder.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/MappingExecutionBuilder.tsx
@@ -31,7 +31,7 @@ import {
FlaskIcon,
ResizablePanelSplitterLine,
compareLabelFn,
- DropdownMenu,
+ ControlledDropdownMenu,
MenuContent,
MenuContentItem,
CaretDownIcon,
@@ -560,7 +560,7 @@ const RelationalMappingExecutionInputDataTypeSelector = observer(
};
return (
-
-
+
);
},
);
@@ -819,7 +819,7 @@ export const MappingExecutionBuilder = observer(
Run Query
-
+
)}
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/MappingTestableEditor.tsx b/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/MappingTestableEditor.tsx
index 4aa475cb18..ca87fd08f0 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/MappingTestableEditor.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/MappingTestableEditor.tsx
@@ -42,7 +42,7 @@ import {
compareLabelFn,
CustomSelectorInput,
Dialog,
- DropdownMenu,
+ ControlledDropdownMenu,
MenuContent,
MenuContentItem,
Modal,
@@ -704,7 +704,7 @@ const MappingTestSuiteQueryEditor = observer(
Edit Query
-
@@ -728,7 +728,7 @@ const MappingTestSuiteQueryEditor = observer(
}}
>
+
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/legacy/DEPRECATED__MappingTestEditor.tsx b/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/legacy/DEPRECATED__MappingTestEditor.tsx
index 62fe845a2d..aaf830bd16 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/legacy/DEPRECATED__MappingTestEditor.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/mapping-editor/legacy/DEPRECATED__MappingTestEditor.tsx
@@ -34,7 +34,7 @@ import {
ResizablePanel,
ResizablePanelSplitter,
ResizablePanelSplitterLine,
- DropdownMenu,
+ ControlledDropdownMenu,
MenuContent,
MenuContentItem,
CaretDownIcon,
@@ -274,7 +274,7 @@ const MappingTestQueryEditor = observer(
Edit Query
@@ -298,7 +298,7 @@ const MappingTestQueryEditor = observer(
}}
>
+
@@ -434,7 +434,7 @@ const RelationalMappingTestInputDataTypeSelector = observer(
relationalInputData_setInputType(inputDataState.inputData, val);
};
return (
-
-
+
);
},
);
@@ -814,7 +814,7 @@ export const DEPRECATED__MappingTestEditor = observer(
Run Test
-
+
)}
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx b/packages/legend-application-studio/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx
index 13d2baa582..e033bde7a8 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx
@@ -27,7 +27,7 @@ import {
CustomSelectorInput,
TimesIcon,
Dialog,
- DropdownMenu,
+ ControlledDropdownMenu,
CaretDownIcon,
MenuContentItem,
MenuContent,
@@ -932,7 +932,7 @@ const ProjectVersionDependencyEditor = observer(
!applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
}
/>
-
@@ -958,7 +958,7 @@ const ProjectVersionDependencyEditor = observer(
}
>
Go to...
+
-
@@ -336,7 +336,7 @@ export const ServiceExecutionQueryEditor = observer(
}}
>
+
{executionState.isRunningQuery ? (
@@ -366,7 +366,7 @@ export const ServiceExecutionQueryEditor = observer(
Run Query
-
+
)}
-
diff --git a/packages/legend-application-studio/src/components/editor/editor-group/service-editor/testable/ServiceTestDataEditor.tsx b/packages/legend-application-studio/src/components/editor/editor-group/service-editor/testable/ServiceTestDataEditor.tsx
index f1ba81e319..e689f2358e 100644
--- a/packages/legend-application-studio/src/components/editor/editor-group/service-editor/testable/ServiceTestDataEditor.tsx
+++ b/packages/legend-application-studio/src/components/editor/editor-group/service-editor/testable/ServiceTestDataEditor.tsx
@@ -21,7 +21,7 @@ import {
ContextMenu,
CustomSelectorInput,
Dialog,
- DropdownMenu,
+ ControlledDropdownMenu,
InfoCircleIcon,
MaskIcon,
MenuContent,
@@ -549,7 +549,7 @@ export const ConnectionTestDataEditor = observer(
Generate
-
@@ -581,7 +581,7 @@ export const ConnectionTestDataEditor = observer(
}}
>
+
-
+
{renderSaveAsModal()}
);
diff --git a/packages/legend-application-studio/src/components/editor/side-bar/Explorer.tsx b/packages/legend-application-studio/src/components/editor/side-bar/Explorer.tsx
index 2ad678491e..a74c7ac714 100644
--- a/packages/legend-application-studio/src/components/editor/side-bar/Explorer.tsx
+++ b/packages/legend-application-studio/src/components/editor/side-bar/Explorer.tsx
@@ -32,7 +32,7 @@ import {
MenuContentItemIcon,
MenuContentItemLabel,
ContextMenu,
- DropdownMenu,
+ ControlledDropdownMenu,
PanelLoadingIndicator,
BlankPanelContent,
TreeView,
@@ -405,7 +405,7 @@ const SampleDataGenerator = observer(() => {
>
-
{
-
+
{
)}
{!editorStore.disableGraphEditing && (
-
{
}}
>
+
)}
-
+
{(globalTestRunnerState.testableStates ?? []).map((testableState) => {
diff --git a/packages/legend-application-studio/src/components/project-reviewer/ProjectReviewerPanel.tsx b/packages/legend-application-studio/src/components/project-reviewer/ProjectReviewerPanel.tsx
index 67e765f1da..70995ba71c 100644
--- a/packages/legend-application-studio/src/components/project-reviewer/ProjectReviewerPanel.tsx
+++ b/packages/legend-application-studio/src/components/project-reviewer/ProjectReviewerPanel.tsx
@@ -17,7 +17,7 @@
import { observer } from 'mobx-react-lite';
import {
clsx,
- DropdownMenu,
+ ControlledDropdownMenu,
ContextMenu,
TimesIcon,
MenuContentItem,
@@ -154,7 +154,7 @@ export const ProjectReviewerPanel = observer(() => {
{currentTabState instanceof EntityDiffViewState && (
-
{
{currentTabState.diffMode}
-
+
)}
diff --git a/packages/legend-application/package.json b/packages/legend-application/package.json
index b0e7d82e6a..dd59060934 100644
--- a/packages/legend-application/package.json
+++ b/packages/legend-application/package.json
@@ -51,7 +51,7 @@
"@types/react-dom": "18.3.0",
"@types/react-router-dom": "5.3.3",
"history": "5.3.0",
- "mobx": "6.12.4",
+ "mobx": "6.12.5",
"mobx-react-lite": "4.0.7",
"react": "18.3.1",
"react-dnd": "16.0.1",
diff --git a/packages/legend-art/package.json b/packages/legend-art/package.json
index 6beaeaafe2..6c425975ac 100644
--- a/packages/legend-art/package.json
+++ b/packages/legend-art/package.json
@@ -26,7 +26,8 @@
"./markdown/test/MockedReactMarkdown.js": "./lib/markdown/__test-utils__/MockedReactMarkdown.js",
"./markdown/test/MockedRemarkGFM.js": "./lib/markdown/__test-utils__/MockedRemarkGFM.js",
"./lib/index.css": "./lib/index.css",
- "./lib/normalize.css": "./lib/normalize.css"
+ "./lib/normalize.css": "./lib/normalize.css",
+ "./lib/fonts.css": "./lib/fonts.css"
},
"module": "lib/index.js",
"types": "lib/index.d.ts",
@@ -50,19 +51,24 @@
"@emotion/react": "11.11.4",
"@emotion/styled": "11.11.5",
"@finos/legend-shared": "workspace:*",
+ "@fontsource/jetbrains-mono": "5.0.20",
"@fontsource/raleway": "5.0.19",
"@fontsource/roboto": "5.0.13",
"@fontsource/roboto-condensed": "5.0.16",
"@fontsource/roboto-mono": "5.0.18",
- "@mui/material": "5.15.20",
+ "@fontsource/roboto-serif": "5.0.13",
+ "@fontsource/ubuntu-mono": "5.0.20",
+ "@mui/material": "5.15.21",
"@types/react": "18.3.3",
"@types/react-select": "4.0.18",
"@types/react-window": "1.8.8",
"clsx": "2.1.1",
+ "color-parse": "2.0.2",
"mermaid": "10.9.1",
- "mobx": "6.12.4",
+ "mobx": "6.12.5",
"mobx-react-lite": "4.0.7",
"react": "18.3.1",
+ "react-colorful": "5.6.1",
"react-dnd": "16.0.1",
"react-dnd-html5-backend": "16.0.1",
"react-dom": "18.3.1",
diff --git a/packages/legend-art/src/button/Button.tsx b/packages/legend-art/src/button/Button.tsx
index 9604518aea..7a62f2f2ca 100644
--- a/packages/legend-art/src/button/Button.tsx
+++ b/packages/legend-art/src/button/Button.tsx
@@ -66,3 +66,5 @@ export const Button: React.FC<{
);
};
+
+export { Checkbox, type CheckboxProps } from '@mui/material';
diff --git a/packages/legend-application-repl/src/stores/dataCube/DataCubeDefaultConfig.ts b/packages/legend-art/src/color/ColorPicker.ts
similarity index 86%
rename from packages/legend-application-repl/src/stores/dataCube/DataCubeDefaultConfig.ts
rename to packages/legend-art/src/color/ColorPicker.ts
index eafd69f266..874554f806 100644
--- a/packages/legend-application-repl/src/stores/dataCube/DataCubeDefaultConfig.ts
+++ b/packages/legend-art/src/color/ColorPicker.ts
@@ -14,4 +14,8 @@
* limitations under the License.
*/
-export const DATA_CUBE_DEFAULT_REPORT_NAME = 'New Report';
+export {
+ HexColorPicker,
+ HexAlphaColorPicker,
+ HexColorInput,
+} from 'react-colorful';
diff --git a/packages/legend-art/src/color/TailwindCSSPalette.ts b/packages/legend-art/src/color/TailwindCSSPalette.ts
index 98008d6c9e..c4ba61dc4c 100644
--- a/packages/legend-art/src/color/TailwindCSSPalette.ts
+++ b/packages/legend-art/src/color/TailwindCSSPalette.ts
@@ -16,9 +16,13 @@
// Clone Tailwind CSS color palette to use for component code
// Source: https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js
+
+export type TailwindCSSColorScaleKey = keyof typeof TailwindCSSPalette;
+export type TailwindCSSColorScale = (typeof TailwindCSSPalette)['slate'];
+
export const TailwindCSSPalette = {
- black: '#000',
- white: '#fff',
+ black: '#000000',
+ white: '#ffffff',
slate: {
50: '#f8fafc',
100: '#f1f5f9',
diff --git a/packages/legend-art/src/icon/DataCubeIcon.tsx b/packages/legend-art/src/icon/DataCubeIcon.tsx
index d00ffd80d8..67119e8691 100644
--- a/packages/legend-art/src/icon/DataCubeIcon.tsx
+++ b/packages/legend-art/src/icon/DataCubeIcon.tsx
@@ -18,8 +18,20 @@
// merging them in the main icon registry, we should review them
import { GoBrowser, GoPin, GoX } from 'react-icons/go';
-import { MdOutlineInsertPageBreak } from 'react-icons/md';
-import { PiMouseScroll } from 'react-icons/pi';
+import { GrCheckbox, GrCheckboxSelected } from 'react-icons/gr';
+import {
+ MdOutlineFormatBold,
+ MdOutlineFormatItalic,
+ MdOutlineStrikethroughS,
+ MdOutlineFormatUnderlined,
+ MdOutlineInsertPageBreak,
+} from 'react-icons/md';
+import {
+ PiMouseScroll,
+ PiTextAlignCenter,
+ PiTextAlignLeft,
+ PiTextAlignRight,
+} from 'react-icons/pi';
import {
TbBook,
TbCube,
@@ -44,17 +56,33 @@ import {
TbChevronLeft,
TbChevronRight,
TbSearch,
+ TbAlertTriangle,
+ TbExclamationCircle,
+ TbCaretDownFilled,
+ TbLoader2,
+ TbSettingsBolt,
+ TbSettings,
} from 'react-icons/tb';
export const DataCubeIcon = {
+ AdvancedSettings: TbSettingsBolt,
+ CaretDown: TbCaretDownFilled,
+ Checkbox: GrCheckbox,
+ CheckboxSelected: GrCheckboxSelected,
ChevronLeft: TbChevronLeft,
ChevronRight: TbChevronRight,
Code: TbCode,
Cube: TbCube,
Documentation: TbBook,
+ FontBold: MdOutlineFormatBold,
+ FontItalic: MdOutlineFormatItalic,
+ FontUnderlined: MdOutlineFormatUnderlined,
+ FontStrikethrough: MdOutlineStrikethroughS,
+ Loader: TbLoader2,
Note: TbNote,
Pin: GoPin,
Search: TbSearch,
+ Settings: TbSettings,
Table: TbTable,
TableColumn: TbFreezeColumn,
TableColumnOptions__Settings: TbSettingsFilled,
@@ -73,6 +101,11 @@ export const DataCubeIcon = {
TableRowColumn: TbFreezeRowColumn,
TableScroll: PiMouseScroll,
TableSort: TbTableDown,
+ TextAlignLeft: PiTextAlignLeft,
+ TextAlignCenter: PiTextAlignCenter,
+ TextAlignRight: PiTextAlignRight,
Window: GoBrowser,
X: GoX,
+ Warning: TbAlertTriangle,
+ WarningCircle: TbExclamationCircle,
};
diff --git a/packages/legend-art/src/index.ts b/packages/legend-art/src/index.ts
index cb4295a538..232b9656ad 100644
--- a/packages/legend-art/src/index.ts
+++ b/packages/legend-art/src/index.ts
@@ -42,6 +42,7 @@ export * from './dialog/Modal.js';
export * from './divider/Divider.js';
+export * from './menu/BaseMenu.js';
export * from './menu/MenuContent.js';
export * from './menu/ContextMenu.js';
export * from './menu/DropdownMenu.js';
@@ -78,3 +79,6 @@ export * from './utils/ComponentUtils.js';
export * from './markdown/MarkdownTextViewer.js';
export * from './Interaction.js';
+
+export * from './color/TailwindCSSPalette.js';
+export * from './color/ColorPicker.js';
diff --git a/packages/legend-art/src/menu/BaseMenu.tsx b/packages/legend-art/src/menu/BaseMenu.tsx
index ecf6c51380..a902e53bfa 100644
--- a/packages/legend-art/src/menu/BaseMenu.tsx
+++ b/packages/legend-art/src/menu/BaseMenu.tsx
@@ -14,9 +14,13 @@
* limitations under the License.
*/
-import { type MenuProps as MuiMenuProps, Menu as MuiMenu } from '@mui/material';
+import {
+ type MenuProps as MuiMenuProps,
+ Menu as MuiMenu,
+ MenuItem as MuiMenuItem,
+} from '@mui/material';
-export const BaseMenu: React.FC
= (props) => {
+export const Menu: React.FC = (props) => {
const { children, classes, ...otherProps } = props;
return (
@@ -33,3 +37,5 @@ export const BaseMenu: React.FC = (props) => {
);
};
+
+export { MuiMenuItem as BaseMenuItem, MuiMenu as BaseMenu };
diff --git a/packages/legend-art/src/menu/ContextMenu.tsx b/packages/legend-art/src/menu/ContextMenu.tsx
index 941494815e..ae5052c2a9 100644
--- a/packages/legend-art/src/menu/ContextMenu.tsx
+++ b/packages/legend-art/src/menu/ContextMenu.tsx
@@ -16,7 +16,7 @@
import { useState, useRef } from 'react';
import type { MenuProps as MuiMenuProps } from '@mui/material';
-import { BaseMenu } from './BaseMenu.js';
+import { Menu } from './BaseMenu.js';
export const ContextMenu: React.FC<{
children: React.ReactNode;
@@ -100,7 +100,7 @@ export const ContextMenu: React.FC<{
onContextMenu={onContextMenu}
>
{children}
-
{isOpen && content}
-
+
);
};
diff --git a/packages/legend-art/src/menu/DropdownMenu.tsx b/packages/legend-art/src/menu/DropdownMenu.tsx
index bf05d68205..46f52c39a0 100644
--- a/packages/legend-art/src/menu/DropdownMenu.tsx
+++ b/packages/legend-art/src/menu/DropdownMenu.tsx
@@ -15,10 +15,10 @@
*/
import { useEffect, useRef, useState } from 'react';
-import type { MenuProps as MuiMenuProps } from '@mui/material';
-import { BaseMenu } from './BaseMenu.js';
+import type { MenuItemProps, MenuProps as MuiMenuProps } from '@mui/material';
+import { BaseMenu, BaseMenuItem, Menu } from './BaseMenu.js';
-export const DropdownMenu: React.FC<{
+export const ControlledDropdownMenu: React.FC<{
children: React.ReactNode;
open?: boolean | undefined;
menuProps?: Partial