chart = {
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody().strength(-400))
.force("x", d3.forceX())
.force("y", d3.forceY());
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.style("font", "12px sans-serif");
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(['arrow'])
.join("marker")
.attr("id", "arrow")
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -0.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("fill", '#999')
.attr("d", "M0,-5L10,0L0,5");
const link = svg.append("g")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.selectAll("path")
.data(links)
.join("path")
.attr("stroke", d => '#999')
.attr("marker-end", d => `url(${new URL("#arrow", location)})`);
const node = svg.append("g")
.attr("fill", "#999")
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round")
.selectAll("g")
.data(nodes)
.join("g")
.call(drag(simulation));
node.append("circle")
.attr("stroke", "white")
.attr("stroke-width", 1.5)
.attr("r", 4);
node.append("text")
.attr("x", 8)
.attr("y", "0.31em")
.text(d => d.id)
.clone(true).lower()
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 3);
simulation.on("tick", () => {
link.attr("d", linkArc);
node.attr("transform", d => `translate(${d.x},${d.y})`);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
data = ({
nodes: [
{ id: 'FlowEditor' },
{ id: 'EdgeLabel' },
{ id: 'FlowEditorToolbar' },
{ id: 'FlowEditorProvider' },
{ id: 'useFlowEditor' },
{ id: 'useEdgeComponents' },
{ id: 'useNodeComponents' },
{ id: 'ActionButtons' },
{ id: 'LoadingButton' },
{ id: 'Button' },
{ id: 'CustomButton' },
{ id: 'SquareButton' },
{ id: 'ExportHistory' },
{ id: 'Chip' },
{ id: 'Divider' },
{ id: 'Stack' },
{ id: 'Tooltip' },
{ id: 'Typography' },
{ id: 'AttachmentPreview' },
{ id: 'FixedContent' },
{ id: 'TCDrawer' },
{ id: 'Tip' },
{ id: 'Header' },
{ id: 'AsyncStatus' },
{ id: 'Loading' },
{ id: 'Status' },
{ id: 'AttachmentPreviewItem' },
{ id: 'IconButton' },
{ id: 'ListItem' },
{ id: 'ListItemIcon' },
{ id: 'ListItemText' },
{ id: 'AttachmentIcon' },
{ id: 'FixedList' },
{ id: 'List' },
{ id: 'ListItemButton' },
{ id: 'InstantForm' },
{ id: 'BaseForm' },
{ id: 'NextAttachmentPreview' },
{ id: 'TransferList' },
{ id: 'Paper' },
{ id: 'HEADER_HEIGHT' },
{ id: 'TransferItem' },
{ id: 'useTransfer' },
{ id: 'TCList' },
{ id: 'useList' },
{ id: 'TransferTable' },
{ id: 'TCTable' },
{ id: 'useTable' },
{ id: 'Tree' },
{ id: 'TreeItem' },
{ id: 'useTree' },
{ id: 'Field' },
{ id: 'useFieldNamePrefix' },
{ id: 'FormDialog' },
{ id: 'DialogActions' },
{ id: 'DialogContent' },
{ id: 'TCDialog' },
{ id: 'TCDialogTitle' },
{ id: 'FieldArray' },
{ id: 'TCPopper' },
{ id: 'ClickAwayListener' },
{ id: 'Popper' },
{ id: 'useTrigger' },
{ id: 'CascaderInput' },
{ id: 'CascaderColumn' },
{ id: 'CascaderItem' },
{ id: 'useCascader' },
{ id: 'InputWrapper' },
{ id: 'Autocomplete' },
{ id: 'MenuInputPopper' },
{ id: 'useInputProps' },
{ id: 'VisualizedListbox' },
{ id: 'AttachmentInput' },
{ id: 'useAlert' },
{ id: 'UploadInput' },
{ id: 'CheckboxInput' },
{ id: 'Checkbox' },
{ id: 'FormControlLabel' },
{ id: 'ImageInput' },
{ id: 'ImageList' },
{ id: 'NumberInput' },
{ id: 'OutlinedInput' },
{ id: 'MultiCheckboxInput' },
{ id: 'FormGroup' },
{ id: 'useOptionsProps' },
{ id: 'PasswordInput' },
{ id: 'TextInput' },
{ id: 'NumberRangeInput' },
{ id: 'RadioInput' },
{ id: 'Radio' },
{ id: 'RadioGroup' },
{ id: 'SearchInput' },
{ id: 'InputAdornment' },
{ id: 'SelectInput' },
{ id: 'InfiniteListbox' },
{ id: 'TagInput' },
{ id: 'SwitchInput' },
{ id: 'Switch' },
{ id: 'EntryProvider' },
{ id: 'KeepAlive' },
{ id: 'FileTaskRecord' },
{ id: 'TripleContent' },
{ id: 'useConfirm' },
{ id: 'useDialog' },
{ id: 'useDelete' },
{ id: 'useSuggest' },
{ id: 'usePrimaryPageEnter' },
{ id: 'useMatchedRoutes' },
{ id: 'Routes' },
{ id: 'useEntry' },
{ id: 'TCTableCell' },
{ id: 'TableCell' },
{ id: 'ErrorBoundary' },
{ id: 'DEFAULT_FIXED_COLUMN_WIDTH' },
{ id: 'useFeaturePackDialog' },
{ id: 'SummaryIcon' },
{ id: 'TableColumnSetting' },
{ id: 'Accordion' },
{ id: 'AccordionDetails' },
{ id: 'AccordionSummary' },
{ id: 'MenuItem' },
{ id: 'useDrawer' },
{ id: 'ActionContent' },
{ id: 'DraggableContainer' },
{ id: 'DroppableContainer' },
{ id: 'Menu' },
{ id: 'Sidebar' },
{ id: 'ButtonBase' },
{ id: 'Collapse' },
{ id: 'Drawer' },
{ id: 'useThemeProps' },
{ id: 'Img' },
{ id: 'TreeListItemButton' },
{ id: 'TreeListItemIcon' },
{ id: 'TCProvider' },
{ id: 'CssBaseline' },
{ id: 'ThemeProvider' },
{ id: 'AdapterDateFns' },
{ id: 'LocalizationProvider' },
{ id: 'GlobalDialog' },
{ id: 'GlobalDrawer' },
{ id: 'CustomPage' },
{ id: 'AppBar' },
{ id: 'useSelectContext' },
{ id: 'DndProvider' },
{ id: 'APP_BAR_HEIGHT' },
{ id: 'ESM_PAGE_GAP' },
{ id: 'PAPER_HEIGHT' },
{ id: 'CustomScreen' },
{ id: 'CustomSections' },
{ id: 'EsmFieldSetting' },
{ id: 'CustomStepper' },
{ id: 'HideScreenActions' },
{ id: 'EsmWidgetRepo' },
{ id: 'EsmApplication' },
{ id: 'Alert' },
{ id: 'Preview' },
{ id: 'Fieldset' },
{ id: 'AttachmentField' },
{ id: 'CheckboxField' },
{ id: 'DateField' },
{ id: 'MultiCheckboxField' },
{ id: 'NumberField' },
{ id: 'RadioField' },
{ id: 'SelectField' },
{ id: 'SwitchField' },
{ id: 'TextField' },
{ id: 'EsmSetting' },
{ id: 'SelectProvider' },
{ id: 'TCPagination' },
{ id: 'RawPaginationItem' },
{ id: 'SplitButton' },
{ id: 'ButtonGroup' },
{ id: 'MenuList' },
{ id: 'TCPopover' },
{ id: 'Cascader' },
{ id: 'ImageListAction' },
{ id: 'DataPagination' },
{ id: 'Link' },
{ id: 'Pagination' },
{ id: 'MobileImageDialog' },
{ id: 'Backdrop' },
{ id: 'ImageListItem' },
{ id: 'Avatar' },
{ id: 'SelectList' },
{ id: 'SelectTCList' },
{ id: 'SelectedItem' },
{ id: 'MobileTransferTable' },
{ id: 'Tabs' },
{ id: 'TCTab' },
{ id: 'MobileTable' },
{ id: 'useMobileTable' },
{ id: 'MobileTableBar' },
{ id: 'OnChange' },
{ id: 'MobileTableFilter' },
{ id: 'MobileTableContentItem' },
{ id: 'MobileTableSortSetting' },
{ id: 'FieldValue' },
{ id: 'MobileTableColumnSetting' },
{ id: 'MobileTablePagination' },
{ id: 'MobileTableContent' },
{ id: 'SummaryText' },
{ id: 'SummaryList' },
{ id: 'CascaderField' },
{ id: 'FieldWrapper' },
{ id: 'useFieldProps' },
{ id: 'ArrayField' },
{ id: 'FieldNamePrefixProvider' },
{ id: 'DateRangeField' },
{ id: 'DateRangeInput' },
{ id: 'Joi' },
{ id: 'MobileDateField' },
{ id: 'MobileDateInput' },
{ id: 'ImageField' },
{ id: 'MobileDateRangeField' },
{ id: 'MobileDateRangeInput' },
{ id: 'NumberRangeField' },
{ id: 'PasswordField' },
{ id: 'SearchField' },
{ id: 'TagField' },
{ id: 'ToggleButtonField' },
{ id: 'ToggleButtonInput' },
{ id: 'TreeField' },
{ id: 'TreeInput' },
{ id: 'useFieldValue' },
{ id: 'WhenFieldChanges' },
{ id: 'TableFormContent' },
{ id: 'Table' },
{ id: 'TableBody' },
{ id: 'TableContainer' },
{ id: 'TableHead' },
{ id: 'TCTableRow' },
{ id: 'TableFormFilter' },
{ id: 'Form' },
{ id: 'DateInput' },
{ id: 'CalendarPicker' },
{ id: 'useMaskedInput' },
{ id: 'PickerWrapper' },
{ id: 'PageBar' },
{ id: 'useSticky' },
{ id: 'TableForm' },
{ id: 'TableFormProvider' },
{ id: 'PageHeader' },
{ id: 'usePageContainer' },
{ id: 'useBreadcrumbs' },
{ id: 'LinkedTreeInput' },
{ id: 'useLinkedTree' },
{ id: 'ListboxComponent' },
{ id: 'AtomTreeInput' },
{ id: 'useAtomTree' },
{ id: 'UnLinkedTreeInput' },
{ id: 'useUnLinkedTree' },
{ id: 'LinkedTree' },
{ id: 'AtomTree' },
{ id: 'UnLinkedTree' },
{ id: 'CollapsePaper' },
{ id: 'CollapseContent' },
{ id: 'CollapseProvider' },
{ id: 'useCollapse' },
{ id: 'Title' },
{ id: 'PrefixLine' },
{ id: 'ImportDialogBasic' },
{ id: 'ImportProcess' },
{ id: 'UploadProcess' },
{ id: 'DotsPagination' },
{ id: 'DotsPaginationDots' },
{ id: 'DotsPaginationTrigger' },
{ id: 'DataContainer' },
{ id: 'Badge' },
{ id: 'Skeleton' },
{ id: 'FormConfigItem' },
{ id: 'TableFilterSetting' },
{ id: 'RowHeightSetting' },
{ id: 'TableSort' },
{ id: 'speedDialTheme' },
{ id: 'SpeedDialIcon' },
{ id: 'TCSpeedDial' },
{ id: 'SpeedDial' },
{ id: 'TCSpeedDialAction' },
{ id: 'SpeedDialAction' },
{ id: 'useSpeedDial' },
{ id: 'TCTabList' },
{ id: 'TabList' },
{ id: 'useTab' },
{ id: 'TabProvider' },
{ id: 'TabContext' },
{ id: 'Resizable' },
{ id: 'useResizable' },
{ id: 'autocompleteTheme' },
{ id: 'CircularProgress' },
{ id: 'ConditionalNode' },
{ id: 'TextEllipsis' },
{ id: 'BorderBox' },
{ id: 'useFlowEditorContext' },
{ id: 'BaseNode' },
{ id: 'EndNode' },
{ id: 'EllipseNode' },
{ id: 'GroupNode' },
{ id: 'StartNode' },
{ id: 'StateNode' },
{ id: 'CustomField' },
{ id: 'FlowMenu' },
{ id: 'FlowMenuTrigger' },
{ id: 'MobileTableActions' },
{ id: 'Fab' },
{ id: 'SingleSelectTree' },
{ id: 'ShabbySelectTree' },
{ id: 'MultipleSelectTree' },
{ id: 'AtomTreeField' },
{ id: 'LinkedTreeField' },
{ id: 'UnLinkedTreeField' },
{ id: 'CalendarRangePicker' },
{ id: 'CalendarDay' },
{ id: 'ClockPicker' },
{ id: 'MobileClockPicker' },
{ id: 'CalendarPickerHeader' },
{ id: 'useNextMonthDisabled' },
{ id: 'usePreviousMonthDisabled' },
{ id: 'CustomFieldAction' },
{ id: 'useFieldArrayContext' },
{ id: 'Sortable' },
{ id: 'SortableItem' },
{ id: 'Item' },
{ id: 'ValidationProcess' },
{ id: 'ImportError' },
{ id: 'TreeItemButton' },
{ id: 'useControlled' },
{ id: 'useConstantCallback' },
{ id: 'useSyncState' },
{ id: 'MobilePicker' },
{ id: 'ImportStatus' },
{ id: 'createUseContextValue' },
{ id: 'useContextValue' },
],
links: [
{ source: 'EdgeLabel', target: 'FlowEditor' },
{ source: 'FlowEditorToolbar', target: 'FlowEditor' },
{ source: 'FlowEditorProvider', target: 'FlowEditor' },
{ source: 'useEdgeComponents', target: 'useFlowEditor' },
{ source: 'useNodeComponents', target: 'useFlowEditor' },
{ source: 'LoadingButton', target: 'ActionButtons' },
{ source: 'Button', target: 'ActionButtons' },
{ source: 'SquareButton', target: 'CustomButton' },
{ source: 'Button', target: 'ExportHistory' },
{ source: 'Chip', target: 'ExportHistory' },
{ source: 'Divider', target: 'ExportHistory' },
{ source: 'Stack', target: 'ExportHistory' },
{ source: 'Tooltip', target: 'ExportHistory' },
{ source: 'Typography', target: 'ExportHistory' },
{ source: 'AttachmentPreview', target: 'ExportHistory' },
{ source: 'FixedContent', target: 'ExportHistory' },
{ source: 'TCDrawer', target: 'ExportHistory' },
{ source: 'Tip', target: 'ExportHistory' },
{ source: 'Header', target: 'ExportHistory' },
{ source: 'Loading', target: 'AsyncStatus' },
{ source: 'Status', target: 'AsyncStatus' },
{ source: 'IconButton', target: 'AttachmentPreviewItem' },
{ source: 'ListItem', target: 'AttachmentPreviewItem' },
{ source: 'ListItemIcon', target: 'AttachmentPreviewItem' },
{ source: 'ListItemText', target: 'AttachmentPreviewItem' },
{ source: 'Tooltip', target: 'AttachmentPreviewItem' },
{ source: 'AttachmentIcon', target: 'AttachmentPreviewItem' },
{ source: 'List', target: 'FixedList' },
{ source: 'ListItem', target: 'FixedList' },
{ source: 'ListItemButton', target: 'FixedList' },
{ source: 'Stack', target: 'FixedList' },
{ source: 'AsyncStatus', target: 'FixedList' },
{ source: 'IconButton', target: 'InstantForm' },
{ source: 'Typography', target: 'InstantForm' },
{ source: 'BaseForm', target: 'InstantForm' },
{ source: 'AttachmentPreviewItem', target: 'NextAttachmentPreview' },
{ source: 'Paper', target: 'TransferList' },
{ source: 'HEADER_HEIGHT', target: 'TransferList' },
{ source: 'TransferItem', target: 'TransferList' },
{ source: 'useTransfer', target: 'TransferList' },
{ source: 'Header', target: 'TransferList' },
{ source: 'TCList', target: 'TransferList' },
{ source: 'useList', target: 'TransferList' },
{ source: 'Paper', target: 'TransferTable' },
{ source: 'HEADER_HEIGHT', target: 'TransferTable' },
{ source: 'TransferItem', target: 'TransferTable' },
{ source: 'useTransfer', target: 'TransferTable' },
{ source: 'TCTable', target: 'TransferTable' },
{ source: 'useTable', target: 'TransferTable' },
{ source: 'Header', target: 'TransferTable' },
{ source: 'List', target: 'Tree' },
{ source: 'Stack', target: 'Tree' },
{ source: 'TreeItem', target: 'Tree' },
{ source: 'useTree', target: 'Tree' },
{ source: 'useFieldNamePrefix', target: 'Field' },
{ source: 'LoadingButton', target: 'FormDialog' },
{ source: 'Button', target: 'FormDialog' },
{ source: 'DialogActions', target: 'FormDialog' },
{ source: 'DialogContent', target: 'FormDialog' },
{ source: 'TCDialog', target: 'FormDialog' },
{ source: 'TCDialogTitle', target: 'FormDialog' },
{ source: 'BaseForm', target: 'FormDialog' },
{ source: 'useFieldNamePrefix', target: 'FieldArray' },
{ source: 'ClickAwayListener', target: 'TCPopper' },
{ source: 'Paper', target: 'TCPopper' },
{ source: 'Popper', target: 'TCPopper' },
{ source: 'useTrigger', target: 'TCPopper' },
{ source: 'CascaderColumn', target: 'CascaderInput' },
{ source: 'CascaderItem', target: 'CascaderInput' },
{ source: 'useCascader', target: 'CascaderInput' },
{ source: 'InputWrapper', target: 'CascaderInput' },
{ source: 'Autocomplete', target: 'CascaderInput' },
{ source: 'MenuInputPopper', target: 'CascaderInput' },
{ source: 'useInputProps', target: 'CascaderInput' },
{ source: 'VisualizedListbox', target: 'CascaderInput' },
{ source: 'Button', target: 'AttachmentInput' },
{ source: 'Paper', target: 'AttachmentInput' },
{ source: 'AttachmentPreview', target: 'AttachmentInput' },
{ source: 'useAlert', target: 'AttachmentInput' },
{ source: 'UploadInput', target: 'AttachmentInput' },
{ source: 'InputWrapper', target: 'AttachmentInput' },
{ source: 'useInputProps', target: 'AttachmentInput' },
{ source: 'Checkbox', target: 'CheckboxInput' },
{ source: 'FormControlLabel', target: 'CheckboxInput' },
{ source: 'InputWrapper', target: 'CheckboxInput' },
{ source: 'useInputProps', target: 'CheckboxInput' },
{ source: 'IconButton', target: 'ImageInput' },
{ source: 'ImageList', target: 'ImageInput' },
{ source: 'useAlert', target: 'ImageInput' },
{ source: 'InputWrapper', target: 'ImageInput' },
{ source: 'useInputProps', target: 'ImageInput' },
{ source: 'UploadInput', target: 'ImageInput' },
{ source: 'OutlinedInput', target: 'NumberInput' },
{ source: 'InputWrapper', target: 'NumberInput' },
{ source: 'useInputProps', target: 'NumberInput' },
{ source: 'Checkbox', target: 'MultiCheckboxInput' },
{ source: 'FormControlLabel', target: 'MultiCheckboxInput' },
{ source: 'FormGroup', target: 'MultiCheckboxInput' },
{ source: 'InputWrapper', target: 'MultiCheckboxInput' },
{ source: 'useOptionsProps', target: 'MultiCheckboxInput' },
{ source: 'useInputProps', target: 'MultiCheckboxInput' },
{ source: 'IconButton', target: 'PasswordInput' },
{ source: 'TextInput', target: 'PasswordInput' },
{ source: 'OutlinedInput', target: 'NumberRangeInput' },
{ source: 'Typography', target: 'NumberRangeInput' },
{ source: 'InputWrapper', target: 'NumberRangeInput' },
{ source: 'useInputProps', target: 'NumberRangeInput' },
{ source: 'FormControlLabel', target: 'RadioInput' },
{ source: 'Radio', target: 'RadioInput' },
{ source: 'RadioGroup', target: 'RadioInput' },
{ source: 'InputWrapper', target: 'RadioInput' },
{ source: 'useInputProps', target: 'RadioInput' },
{ source: 'InputAdornment', target: 'SearchInput' },
{ source: 'TextInput', target: 'SearchInput' },
{ source: 'InputWrapper', target: 'SelectInput' },
{ source: 'Autocomplete', target: 'SelectInput' },
{ source: 'InfiniteListbox', target: 'SelectInput' },
{ source: 'useOptionsProps', target: 'SelectInput' },
{ source: 'useInputProps', target: 'SelectInput' },
{ source: 'VisualizedListbox', target: 'SelectInput' },
{ source: 'useAlert', target: 'TagInput' },
{ source: 'InputWrapper', target: 'TagInput' },
{ source: 'Autocomplete', target: 'TagInput' },
{ source: 'useInputProps', target: 'TagInput' },
{ source: 'FormControlLabel', target: 'SwitchInput' },
{ source: 'Switch', target: 'SwitchInput' },
{ source: 'InputWrapper', target: 'SwitchInput' },
{ source: 'useInputProps', target: 'SwitchInput' },
{ source: 'KeepAlive', target: 'EntryProvider' },
{ source: 'Button', target: 'FileTaskRecord' },
{ source: 'Chip', target: 'FileTaskRecord' },
{ source: 'Divider', target: 'FileTaskRecord' },
{ source: 'Stack', target: 'FileTaskRecord' },
{ source: 'Tooltip', target: 'FileTaskRecord' },
{ source: 'Typography', target: 'FileTaskRecord' },
{ source: 'TCDrawer', target: 'FileTaskRecord' },
{ source: 'AttachmentPreview', target: 'FileTaskRecord' },
{ source: 'Tip', target: 'FileTaskRecord' },
{ source: 'FixedContent', target: 'FileTaskRecord' },
{ source: 'Header', target: 'FileTaskRecord' },
{ source: 'Divider', target: 'TripleContent' },
{ source: 'Paper', target: 'TripleContent' },
{ source: 'Header', target: 'TripleContent' },
{ source: 'Button', target: 'useConfirm' },
{ source: 'useDialog', target: 'useConfirm' },
{ source: 'useConfirm', target: 'useDelete' },
{ source: 'Button', target: 'useSuggest' },
{ source: 'useDialog', target: 'useSuggest' },
{ source: 'useMatchedRoutes', target: 'usePrimaryPageEnter' },
{ source: 'useEntry', target: 'Routes' },
{ source: 'TableCell', target: 'TCTableCell' },
{ source: 'ErrorBoundary', target: 'TCTableCell' },
{ source: 'DEFAULT_FIXED_COLUMN_WIDTH', target: 'TCTableCell' },
{ source: 'Paper', target: 'useFeaturePackDialog' },
{ source: 'Stack', target: 'useFeaturePackDialog' },
{ source: 'Typography', target: 'useFeaturePackDialog' },
{ source: 'SummaryIcon', target: 'useFeaturePackDialog' },
{ source: 'useConfirm', target: 'useFeaturePackDialog' },
{ source: 'useDialog', target: 'useFeaturePackDialog' },
{ source: 'useSuggest', target: 'useFeaturePackDialog' },
{ source: 'Accordion', target: 'TableColumnSetting' },
{ source: 'AccordionDetails', target: 'TableColumnSetting' },
{ source: 'AccordionSummary', target: 'TableColumnSetting' },
{ source: 'List', target: 'TableColumnSetting' },
{ source: 'MenuItem', target: 'TableColumnSetting' },
{ source: 'Tooltip', target: 'TableColumnSetting' },
{ source: 'SquareButton', target: 'TableColumnSetting' },
{ source: 'useAlert', target: 'TableColumnSetting' },
{ source: 'useDrawer', target: 'TableColumnSetting' },
{ source: 'ActionContent', target: 'TableColumnSetting' },
{ source: 'DraggableContainer', target: 'TableColumnSetting' },
{ source: 'DroppableContainer', target: 'TableColumnSetting' },
{ source: 'Menu', target: 'TableColumnSetting' },
{ source: 'ButtonBase', target: 'Sidebar' },
{ source: 'Collapse', target: 'Sidebar' },
{ source: 'Drawer', target: 'Sidebar' },
{ source: 'IconButton', target: 'Sidebar' },
{ source: 'List', target: 'Sidebar' },
{ source: 'ListItem', target: 'Sidebar' },
{ source: 'ListItemIcon', target: 'Sidebar' },
{ source: 'ListItemText', target: 'Sidebar' },
{ source: 'Stack', target: 'Sidebar' },
{ source: 'Typography', target: 'Sidebar' },
{ source: 'useThemeProps', target: 'Sidebar' },
{ source: 'Img', target: 'Sidebar' },
{ source: 'TreeListItemButton', target: 'Sidebar' },
{ source: 'TreeListItemIcon', target: 'Sidebar' },
{ source: 'useEntry', target: 'Sidebar' },
{ source: 'CssBaseline', target: 'TCProvider' },
{ source: 'ThemeProvider', target: 'TCProvider' },
{ source: 'AdapterDateFns', target: 'TCProvider' },
{ source: 'LocalizationProvider', target: 'TCProvider' },
{ source: 'GlobalDialog', target: 'TCProvider' },
{ source: 'GlobalDrawer', target: 'TCProvider' },
{ source: 'AppBar', target: 'CustomPage' },
{ source: 'Typography', target: 'CustomPage' },
{ source: 'useSelectContext', target: 'CustomPage' },
{ source: 'BaseForm', target: 'CustomPage' },
{ source: 'DndProvider', target: 'CustomPage' },
{ source: 'APP_BAR_HEIGHT', target: 'CustomPage' },
{ source: 'ESM_PAGE_GAP', target: 'CustomPage' },
{ source: 'PAPER_HEIGHT', target: 'CustomPage' },
{ source: 'CustomScreen', target: 'CustomPage' },
{ source: 'CustomSections', target: 'CustomPage' },
{ source: 'EsmFieldSetting', target: 'CustomPage' },
{ source: 'CustomStepper', target: 'CustomPage' },
{ source: 'HideScreenActions', target: 'CustomPage' },
{ source: 'EsmWidgetRepo', target: 'CustomPage' },
{ source: 'Alert', target: 'EsmApplication' },
{ source: 'Divider', target: 'EsmApplication' },
{ source: 'Paper', target: 'EsmApplication' },
{ source: 'AttachmentPreview', target: 'EsmApplication' },
{ source: 'Preview', target: 'EsmApplication' },
{ source: 'Fieldset', target: 'EsmApplication' },
{ source: 'ErrorBoundary', target: 'EsmApplication' },
{ source: 'Tip', target: 'EsmApplication' },
{ source: 'AttachmentField', target: 'EsmApplication' },
{ source: 'CheckboxField', target: 'EsmApplication' },
{ source: 'DateField', target: 'EsmApplication' },
{ source: 'MultiCheckboxField', target: 'EsmApplication' },
{ source: 'NumberField', target: 'EsmApplication' },
{ source: 'RadioField', target: 'EsmApplication' },
{ source: 'SelectField', target: 'EsmApplication' },
{ source: 'SwitchField', target: 'EsmApplication' },
{ source: 'TextField', target: 'EsmApplication' },
{ source: 'Header', target: 'EsmApplication' },
{ source: 'Button', target: 'EsmSetting' },
{ source: 'SelectProvider', target: 'EsmSetting' },
{ source: 'TCDialog', target: 'EsmSetting' },
{ source: 'CustomPage', target: 'EsmSetting' },
{ source: 'RawPaginationItem', target: 'TCPagination' },
{ source: 'Stack', target: 'TCPagination' },
{ source: 'Typography', target: 'TCPagination' },
{ source: 'Button', target: 'SplitButton' },
{ source: 'ButtonGroup', target: 'SplitButton' },
{ source: 'MenuItem', target: 'SplitButton' },
{ source: 'MenuList', target: 'SplitButton' },
{ source: 'TCPopover', target: 'SplitButton' },
{ source: 'List', target: 'Cascader' },
{ source: 'CascaderColumn', target: 'Cascader' },
{ source: 'CascaderItem', target: 'Cascader' },
{ source: 'useCascader', target: 'Cascader' },
{ source: 'IconButton', target: 'ImageListAction' },
{ source: 'Stack', target: 'ImageListAction' },
{ source: 'Typography', target: 'ImageListAction' },
{ source: 'Link', target: 'DataPagination' },
{ source: 'MenuItem', target: 'DataPagination' },
{ source: 'MenuList', target: 'DataPagination' },
{ source: 'Pagination', target: 'DataPagination' },
{ source: 'Stack', target: 'DataPagination' },
{ source: 'Typography', target: 'DataPagination' },
{ source: 'useAlert', target: 'DataPagination' },
{ source: 'Loading', target: 'DataPagination' },
{ source: 'TCPopper', target: 'DataPagination' },
{ source: 'Backdrop', target: 'MobileImageDialog' },
{ source: 'IconButton', target: 'MobileImageDialog' },
{ source: 'Typography', target: 'MobileImageDialog' },
{ source: 'Img', target: 'MobileImageDialog' },
{ source: 'Avatar', target: 'ImageListItem' },
{ source: 'ButtonBase', target: 'ImageListItem' },
{ source: 'IconButton', target: 'ImageListItem' },
{ source: 'Stack', target: 'ImageListItem' },
{ source: 'Typography', target: 'ImageListItem' },
{ source: 'List', target: 'SelectList' },
{ source: 'Typography', target: 'SelectList' },
{ source: 'Button', target: 'SelectList' },
{ source: 'useTransfer', target: 'SelectList' },
{ source: 'SelectTCList', target: 'SelectList' },
{ source: 'useList', target: 'SelectList' },
{ source: 'SelectedItem', target: 'SelectList' },
{ source: 'Button', target: 'MobileTransferTable' },
{ source: 'Tabs', target: 'MobileTransferTable' },
{ source: 'FixedContent', target: 'MobileTransferTable' },
{ source: 'TCTab', target: 'MobileTransferTable' },
{ source: 'MobileTable', target: 'MobileTransferTable' },
{ source: 'useMobileTable', target: 'MobileTransferTable' },
{ source: 'Stack', target: 'MobileTableBar' },
{ source: 'BaseForm', target: 'MobileTableBar' },
{ source: 'OnChange', target: 'MobileTableBar' },
{ source: 'LoadingButton', target: 'MobileTableFilter' },
{ source: 'Button', target: 'MobileTableFilter' },
{ source: 'DialogActions', target: 'MobileTableFilter' },
{ source: 'DialogContent', target: 'MobileTableFilter' },
{ source: 'SquareButton', target: 'MobileTableFilter' },
{ source: 'TCDrawer', target: 'MobileTableFilter' },
{ source: 'BaseForm', target: 'MobileTableFilter' },
{ source: 'Stack', target: 'MobileTableContentItem' },
{ source: 'Typography', target: 'MobileTableContentItem' },
{ source: 'Button', target: 'MobileTableSortSetting' },
{ source: 'Checkbox', target: 'MobileTableSortSetting' },
{ source: 'FormControlLabel', target: 'MobileTableSortSetting' },
{ source: 'IconButton', target: 'MobileTableSortSetting' },
{ source: 'Radio', target: 'MobileTableSortSetting' },
{ source: 'Stack', target: 'MobileTableSortSetting' },
{ source: 'SquareButton', target: 'MobileTableSortSetting' },
{ source: 'FormDialog', target: 'MobileTableSortSetting' },
{ source: 'FieldValue', target: 'MobileTableSortSetting' },
{ source: 'FieldArray', target: 'MobileTableSortSetting' },
{ source: 'Checkbox', target: 'MobileTableColumnSetting' },
{ source: 'FormControlLabel', target: 'MobileTableColumnSetting' },
{ source: 'Stack', target: 'MobileTableColumnSetting' },
{ source: 'SquareButton', target: 'MobileTableColumnSetting' },
{ source: 'FormDialog', target: 'MobileTableColumnSetting' },
{ source: 'FieldArray', target: 'MobileTableColumnSetting' },
{ source: 'Divider', target: 'MobileTablePagination' },
{ source: 'Stack', target: 'MobileTablePagination' },
{ source: 'Typography', target: 'MobileTablePagination' },
{ source: 'Checkbox', target: 'MobileTableContent' },
{ source: 'Divider', target: 'MobileTableContent' },
{ source: 'Radio', target: 'MobileTableContent' },
{ source: 'Stack', target: 'MobileTableContent' },
{ source: 'Preview', target: 'MobileTableContent' },
{ source: 'MobileTableContentItem', target: 'MobileTableContent' },
{ source: 'Stack', target: 'SummaryText' },
{ source: 'Typography', target: 'SummaryText' },
{ source: 'Stack', target: 'SummaryList' },
{ source: 'Typography', target: 'SummaryList' },
{ source: 'CascaderInput', target: 'CascaderField' },
{ source: 'FieldWrapper', target: 'CascaderField' },
{ source: 'useFieldProps', target: 'CascaderField' },
{ source: 'Button', target: 'ArrayField' },
{ source: 'IconButton', target: 'ArrayField' },
{ source: 'Stack', target: 'ArrayField' },
{ source: 'InputWrapper', target: 'ArrayField' },
{ source: 'FieldNamePrefixProvider', target: 'ArrayField' },
{ source: 'useFieldNamePrefix', target: 'ArrayField' },
{ source: 'DateRangeInput', target: 'DateRangeField' },
{ source: 'Joi', target: 'DateRangeField' },
{ source: 'FieldWrapper', target: 'DateRangeField' },
{ source: 'useFieldProps', target: 'DateRangeField' },
{ source: 'MobileDateInput', target: 'MobileDateField' },
{ source: 'FieldWrapper', target: 'MobileDateField' },
{ source: 'useFieldProps', target: 'MobileDateField' },
{ source: 'ImageInput', target: 'ImageField' },
{ source: 'FieldWrapper', target: 'ImageField' },
{ source: 'useFieldProps', target: 'ImageField' },
{ source: 'MobileDateRangeInput', target: 'MobileDateRangeField' },
{ source: 'FieldWrapper', target: 'MobileDateRangeField' },
{ source: 'useFieldProps', target: 'MobileDateRangeField' },
{ source: 'NumberRangeInput', target: 'NumberRangeField' },
{ source: 'Joi', target: 'NumberRangeField' },
{ source: 'FieldWrapper', target: 'NumberRangeField' },
{ source: 'useFieldProps', target: 'NumberRangeField' },
{ source: 'PasswordInput', target: 'PasswordField' },
{ source: 'FieldWrapper', target: 'PasswordField' },
{ source: 'useFieldProps', target: 'PasswordField' },
{ source: 'SearchInput', target: 'SearchField' },
{ source: 'FieldWrapper', target: 'SearchField' },
{ source: 'useFieldProps', target: 'SearchField' },
{ source: 'TagInput', target: 'TagField' },
{ source: 'FieldWrapper', target: 'TagField' },
{ source: 'useFieldProps', target: 'TagField' },
{ source: 'ToggleButtonInput', target: 'ToggleButtonField' },
{ source: 'FieldWrapper', target: 'ToggleButtonField' },
{ source: 'useFieldProps', target: 'ToggleButtonField' },
{ source: 'TreeInput', target: 'TreeField' },
{ source: 'FieldWrapper', target: 'TreeField' },
{ source: 'useFieldProps', target: 'TreeField' },
{ source: 'useFieldNamePrefix', target: 'useFieldValue' },
{ source: 'OnChange', target: 'WhenFieldChanges' },
{ source: 'Button', target: 'TableFormContent' },
{ source: 'Stack', target: 'TableFormContent' },
{ source: 'Table', target: 'TableFormContent' },
{ source: 'TableBody', target: 'TableFormContent' },
{ source: 'TableContainer', target: 'TableFormContent' },
{ source: 'TableHead', target: 'TableFormContent' },
{ source: 'Tooltip', target: 'TableFormContent' },
{ source: 'CustomButton', target: 'TableFormContent' },
{ source: 'TCTableCell', target: 'TableFormContent' },
{ source: 'TCTableRow', target: 'TableFormContent' },
{ source: 'Stack', target: 'TableFormFilter' },
{ source: 'Tooltip', target: 'TableFormFilter' },
{ source: 'SquareButton', target: 'TableFormFilter' },
{ source: 'Form', target: 'TableFormFilter' },
{ source: 'CalendarPicker', target: 'DateInput' },
{ source: 'useMaskedInput', target: 'DateInput' },
{ source: 'PickerWrapper', target: 'DateInput' },
{ source: 'useThemeProps', target: 'PageBar' },
{ source: 'useSticky', target: 'PageBar' },
{ source: 'Header', target: 'TableForm' },
{ source: 'TableFormProvider', target: 'TableForm' },
{ source: 'TableFormContent', target: 'TableForm' },
{ source: 'TableFormFilter', target: 'TableForm' },
{ source: 'IconButton', target: 'PageHeader' },
{ source: 'Stack', target: 'PageHeader' },
{ source: 'Typography', target: 'PageHeader' },
{ source: 'useThemeProps', target: 'PageHeader' },
{ source: 'usePageContainer', target: 'PageHeader' },
{ source: 'useMatchedRoutes', target: 'PageHeader' },
{ source: 'useBreadcrumbs', target: 'PageHeader' },
{ source: 'InputWrapper', target: 'LinkedTreeInput' },
{ source: 'Autocomplete', target: 'LinkedTreeInput' },
{ source: 'useInputProps', target: 'LinkedTreeInput' },
{ source: 'useLinkedTree', target: 'LinkedTreeInput' },
{ source: 'TreeItem', target: 'LinkedTreeInput' },
{ source: 'ListboxComponent', target: 'LinkedTreeInput' },
{ source: 'InputWrapper', target: 'AtomTreeInput' },
{ source: 'Autocomplete', target: 'AtomTreeInput' },
{ source: 'useInputProps', target: 'AtomTreeInput' },
{ source: 'useAtomTree', target: 'AtomTreeInput' },
{ source: 'TreeItem', target: 'AtomTreeInput' },
{ source: 'ListboxComponent', target: 'AtomTreeInput' },
{ source: 'InputWrapper', target: 'UnLinkedTreeInput' },
{ source: 'Autocomplete', target: 'UnLinkedTreeInput' },
{ source: 'useInputProps', target: 'UnLinkedTreeInput' },
{ source: 'TreeItem', target: 'UnLinkedTreeInput' },
{ source: 'useUnLinkedTree', target: 'UnLinkedTreeInput' },
{ source: 'ListboxComponent', target: 'UnLinkedTreeInput' },
{ source: 'List', target: 'LinkedTree' },
{ source: 'TreeItem', target: 'LinkedTree' },
{ source: 'useLinkedTree', target: 'LinkedTree' },
{ source: 'List', target: 'AtomTree' },
{ source: 'TreeItem', target: 'AtomTree' },
{ source: 'useAtomTree', target: 'AtomTree' },
{ source: 'List', target: 'UnLinkedTree' },
{ source: 'TreeItem', target: 'UnLinkedTree' },
{ source: 'useUnLinkedTree', target: 'UnLinkedTree' },
{ source: 'Divider', target: 'CollapsePaper' },
{ source: 'IconButton', target: 'CollapsePaper' },
{ source: 'Paper', target: 'CollapsePaper' },
{ source: 'CollapseContent', target: 'CollapsePaper' },
{ source: 'CollapseProvider', target: 'CollapsePaper' },
{ source: 'useCollapse', target: 'CollapsePaper' },
{ source: 'Header', target: 'CollapsePaper' },
{ source: 'Typography', target: 'Title' },
{ source: 'useThemeProps', target: 'Title' },
{ source: 'PrefixLine', target: 'Title' },
{ source: 'TCDialog', target: 'ImportDialogBasic' },
{ source: 'ImportProcess', target: 'ImportDialogBasic' },
{ source: 'UploadProcess', target: 'ImportDialogBasic' },
{ source: 'DotsPaginationDots', target: 'DotsPagination' },
{ source: 'DotsPaginationTrigger', target: 'DotsPagination' },
{ source: 'Badge', target: 'DataContainer' },
{ source: 'IconButton', target: 'DataContainer' },
{ source: 'InputAdornment', target: 'DataContainer' },
{ source: 'Skeleton', target: 'DataContainer' },
{ source: 'Stack', target: 'DataContainer' },
{ source: 'Tooltip', target: 'DataContainer' },
{ source: 'SquareButton', target: 'DataContainer' },
{ source: 'FormConfigItem', target: 'DataContainer' },
{ source: 'useAlert', target: 'DataContainer' },
{ source: 'TableFilterSetting', target: 'DataContainer' },
{ source: 'TextField', target: 'DataContainer' },
{ source: 'Form', target: 'DataContainer' },
{ source: 'DataPagination', target: 'DataContainer' },
{ source: 'Tooltip', target: 'RowHeightSetting' },
{ source: 'MenuItem', target: 'RowHeightSetting' },
{ source: 'Menu', target: 'RowHeightSetting' },
{ source: 'SquareButton', target: 'RowHeightSetting' },
{ source: 'Tooltip', target: 'TableSort' },
{ source: 'SquareButton', target: 'TableSort' },
{ source: 'RadioInput', target: 'TableSort' },
{ source: 'TCPopper', target: 'TableSort' },
{ source: 'useAlert', target: 'TableSort' },
{ source: 'ActionContent', target: 'TableSort' },
{ source: 'DraggableContainer', target: 'TableSort' },
{ source: 'DroppableContainer', target: 'TableSort' },
{ source: 'SpeedDialIcon', target: 'speedDialTheme' },
{ source: 'SpeedDial', target: 'TCSpeedDial' },
{ source: 'SpeedDialIcon', target: 'TCSpeedDial' },
{ source: 'SpeedDialAction', target: 'TCSpeedDialAction' },
{ source: 'useSpeedDial', target: 'TCSpeedDialAction' },
{ source: 'TabList', target: 'TCTabList' },
{ source: 'useTab', target: 'TCTabList' },
{ source: 'TabContext', target: 'TabProvider' },
{ source: 'useResizable', target: 'Resizable' },
{ source: 'CircularProgress', target: 'autocompleteTheme' },
{ source: 'Typography', target: 'ConditionalNode' },
{ source: 'TextEllipsis', target: 'ConditionalNode' },
{ source: 'BorderBox', target: 'ConditionalNode' },
{ source: 'useFlowEditorContext', target: 'ConditionalNode' },
{ source: 'BaseNode', target: 'ConditionalNode' },
{ source: 'EllipseNode', target: 'EndNode' },
{ source: 'Typography', target: 'GroupNode' },
{ source: 'BaseNode', target: 'GroupNode' },
{ source: 'EllipseNode', target: 'StartNode' },
{ source: 'Stack', target: 'StateNode' },
{ source: 'Typography', target: 'StateNode' },
{ source: 'BaseNode', target: 'StateNode' },
{ source: 'FieldWrapper', target: 'CustomField' },
{ source: 'useFieldProps', target: 'CustomField' },
{ source: 'MenuItem', target: 'FlowMenu' },
{ source: 'Tooltip', target: 'FlowMenu' },
{ source: 'Typography', target: 'FlowMenu' },
{ source: 'Menu', target: 'FlowMenu' },
{ source: 'FlowMenuTrigger', target: 'FlowMenu' },
{ source: 'Fab', target: 'MobileTableActions' },
{ source: 'TCSpeedDial', target: 'MobileTableActions' },
{ source: 'Tree', target: 'SingleSelectTree' },
{ source: 'Tree', target: 'ShabbySelectTree' },
{ source: 'Tree', target: 'MultipleSelectTree' },
{ source: 'AtomTreeInput', target: 'AtomTreeField' },
{ source: 'FieldWrapper', target: 'AtomTreeField' },
{ source: 'useFieldProps', target: 'AtomTreeField' },
{ source: 'LinkedTreeInput', target: 'LinkedTreeField' },
{ source: 'FieldWrapper', target: 'LinkedTreeField' },
{ source: 'useFieldProps', target: 'LinkedTreeField' },
{ source: 'UnLinkedTreeInput', target: 'UnLinkedTreeField' },
{ source: 'FieldWrapper', target: 'UnLinkedTreeField' },
{ source: 'useFieldProps', target: 'UnLinkedTreeField' },
{ source: 'Button', target: 'CalendarRangePicker' },
{ source: 'Divider', target: 'CalendarRangePicker' },
{ source: 'Stack', target: 'CalendarRangePicker' },
{ source: 'CalendarDay', target: 'CalendarRangePicker' },
{ source: 'CalendarPicker', target: 'CalendarRangePicker' },
{ source: 'ClockPicker', target: 'CalendarRangePicker' },
{ source: 'MobileClockPicker', target: 'CalendarRangePicker' },
{ source: 'Button', target: 'CalendarPickerHeader' },
{ source: 'IconButton', target: 'CalendarPickerHeader' },
{ source: 'Stack', target: 'CalendarPickerHeader' },
{ source: 'Typography', target: 'CalendarPickerHeader' },
{ source: 'useNextMonthDisabled', target: 'CalendarPickerHeader' },
{ source: 'usePreviousMonthDisabled', target: 'CalendarPickerHeader' },
{ source: 'Chip', target: 'CustomFieldAction' },
{ source: 'IconButton', target: 'CustomFieldAction' },
{ source: 'MenuItem', target: 'CustomFieldAction' },
{ source: 'Tooltip', target: 'CustomFieldAction' },
{ source: 'useFieldArrayContext', target: 'CustomFieldAction' },
{ source: 'useSelectContext', target: 'CustomFieldAction' },
{ source: 'Menu', target: 'CustomFieldAction' },
{ source: 'useFieldArrayContext', target: 'Sortable' },
{ source: 'SortableItem', target: 'Sortable' },
{ source: 'Item', target: 'Sortable' },
{ source: 'Button', target: 'ValidationProcess' },
{ source: 'DialogActions', target: 'ValidationProcess' },
{ source: 'DialogContent', target: 'ValidationProcess' },
{ source: 'BaseForm', target: 'ValidationProcess' },
{ source: 'ImportError', target: 'ValidationProcess' },
{ source: 'ListItemButton', target: 'TreeItemButton' },
{ source: 'useConstantCallback', target: 'useControlled' },
{ source: 'useConstantCallback', target: 'useSyncState' },
{ source: 'List', target: 'MobilePicker' },
{ source: 'ListItem', target: 'MobilePicker' },
{ source: 'ListItemText', target: 'MobilePicker' },
{ source: 'Paper', target: 'ImportStatus' },
{ source: 'Stack', target: 'ImportStatus' },
{ source: 'Typography', target: 'ImportStatus' },
{ source: 'useContextValue', target: 'createUseContextValue' },
],
})
height = 600
function linkArc(d) {
const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);
return `
M${d.source.x},${d.source.y}
A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
`;
}
drag = simulation => {
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
import {Swatches} from "@d3/color-legend"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
