@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
211 lines (210 loc) • 11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
import { ADAPTABLE_VERSION } from '../../../EnvVars';
import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
import { DataSource, InfiniteTableGrid } from '../../../components/InfiniteTable';
import Panel from '../../../components/Panel';
import { Tabs } from '../../../components/Tabs';
import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
import { getDefaultAdaptableOptions } from '../../../AdaptableOptions/DefaultAdaptableOptions';
import { cn } from '../../../lib/utils';
const adaptableVersion = ADAPTABLE_VERSION;
const agGridVersion = AG_GRID_VERSION;
export const GridInfoPopup = (props) => {
const api = props.api;
const keyValuePairs = [];
const calcColumns = api.calculatedColumnApi
.getCalculatedColumns()
.map((c) => c.ColumnId);
const actionColumns = api.actionColumnApi
.getActionColumns()
.map((ac) => ac.columnId);
const freeTextColumns = api.freeTextColumnApi
.getFreeTextColumns()
.map((c) => c.ColumnId);
const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
const sorts = ArrayExtensions.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
? api.gridApi.getColumnSorts().map((gs) => {
return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
})
: null;
const selectedRowInfo = api.gridApi.getSelectedRowInfo();
if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
keyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
}
if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
}
keyValuePairs.push({ Key: 'License Key', Value: api.optionsApi.getAdaptableOptions().licenseKey });
keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
keyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
keyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
keyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
keyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
keyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
keyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
keyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
? ArrayExtensions.createCommaSeparatedString(calcColumns)
: 'None' });
keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
: 'None' });
keyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
? ArrayExtensions.createCommaSeparatedString(actionColumns)
: 'None' });
const domProps = {
className: 'twa:flex-1 twa:min-h-0 twa:w-full',
};
keyValuePairs.map((keyValuePair) => {
return {
Key: keyValuePair.Key,
Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
};
})
.filter((x) => x.Value);
const columnsMap = {
Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
};
const optionsColumnsMap = {
Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
Value: {
field: 'Value',
header: 'Value',
defaultFlex: 3,
render: ({ value }) => (_jsx("span", { style: {
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
overflowWrap: 'anywhere',
display: 'block',
lineHeight: '18px',
paddingTop: 4,
paddingBottom: 4,
}, children: String(value ?? '') })),
},
};
const titleCase = (camel) => camel
.replace(/([a-z])([A-Z])/g, '$1 $2')
.replace(/^./, (c) => c.toUpperCase())
.replace(/\s./g, (c) => c.toUpperCase());
const ONE_LINE_MAX = 60;
const fnReplacer = (_k, val) => typeof val === 'function' ? '[Function]' : val;
const formatValuePart = (v) => {
if (typeof v === 'function')
return '[Function]';
if (v === undefined)
return 'undefined';
if (v === null)
return 'null';
if (typeof v === 'string')
return JSON.stringify(v);
if (Array.isArray(v) || typeof v === 'object') {
try {
const oneLine = JSON.stringify(v, fnReplacer);
if (oneLine !== undefined && oneLine.length <= ONE_LINE_MAX)
return oneLine;
return JSON.stringify(v, fnReplacer, 2);
}
catch {
return String(v);
}
}
return String(v);
};
const displayValue = (v) => {
if (typeof v === 'function')
return '[Function]';
if (v === undefined)
return '(undefined)';
if (v === null)
return '(null)';
if (Array.isArray(v)) {
return formatValuePart(v);
}
if (typeof v === 'object') {
const entries = Object.entries(v).filter(([, val]) => val !== undefined);
if (entries.length === 0)
return '{}';
return entries.map(([k, val]) => `${k}: ${formatValuePart(val)}`).join('\n');
}
return String(v);
};
const gridOptionsSections = (() => {
const opts = api.optionsApi.getAdaptableOptions();
const defaults = getDefaultAdaptableOptions();
const baseRows = [];
const groupSections = [];
const isUserProvidedFunction = (groupKey, propKey, fn) => {
if (typeof fn !== 'function')
return false;
const defaultGroup = defaults[groupKey];
if (!defaultGroup || typeof defaultGroup !== 'object')
return true;
return defaultGroup[propKey] !== fn;
};
Object.keys(opts).forEach((key) => {
if (key === 'licenseKey' || key === 'initialState')
return;
const value = opts[key];
if (value == null)
return;
if (typeof value === 'object' && !Array.isArray(value)) {
const rows = Object.keys(value)
.filter((sk) => {
const sv = value[sk];
if (sv == null)
return false;
if (typeof sv === 'function' && !isUserProvidedFunction(key, sk, sv)) {
return false;
}
return true;
})
.map((sk) => ({ Key: sk, Value: displayValue(value[sk]) }));
if (rows.length === 0)
return;
groupSections.push({ title: titleCase(key), rows });
}
else {
if (typeof value === 'function' && defaults[key] === value)
return;
baseRows.push({ Key: key, Value: displayValue(value) });
}
});
const sections = [];
if (baseRows.length > 0)
sections.push({ title: 'Base Properties', rows: baseRows });
sections.push(...groupSections);
return sections;
})();
const VALUE_CHARS_PER_LINE = 70;
const visualLineCount = (text) => {
if (!text)
return 1;
return text
.split('\n')
.reduce((acc, line) => acc + Math.max(1, Math.ceil(line.length / VALUE_CHARS_PER_LINE)), 0);
};
const calculateRowHeight = (row) => {
const lines = visualLineCount(String(row?.Value ?? ''));
if (lines <= 1)
return 32;
return lines * 18 + 12;
};
const sectionHeight = (rows) => {
const total = rows.reduce((acc, r) => acc + calculateRowHeight(r), 0);
return Math.min(total + 40, 400);
};
const enabledTabs = api.optionsApi.getSettingsPanelOptions()?.gridInfoTabs ??
['Grid Options', 'Grid Summary', 'Grid State'];
const showSummary = enabledTabs.includes('Grid Summary');
const showState = enabledTabs.includes('Grid State');
const showOptions = enabledTabs.includes('Grid Options');
const baseClassName = 'ab-GridInfo';
return (_jsx(PopupPanel, { className: cn(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Grid Summary" }) : null, showState ? _jsx(Tabs.Tab, { children: "Grid State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
style: { height: sectionHeight(section.rows), width: '100%' },
}, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
};