pdbe-molstar
Version:
Molstar implementation for PDBe
399 lines (398 loc) • 26.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SuperpositionComponentControls = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const base_1 = require("molstar/lib/mol-plugin-ui/base");
const common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
const icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
const parameters_1 = require("molstar/lib/mol-plugin-ui/controls/parameters");
const commands_1 = require("molstar/lib/mol-plugin/commands");
const mol_state_1 = require("molstar/lib/mol-state");
const param_definition_1 = require("molstar/lib/mol-util/param-definition");
const rxjs_1 = require("rxjs");
const operators_1 = require("rxjs/operators");
const plugin_custom_state_1 = require("../plugin-custom-state");
class SuperpositionComponentControls extends base_1.CollapsableControls {
defaultState() {
return {
header: 'Components',
isCollapsed: false,
isDisabled: false,
brand: { accent: 'blue', svg: icons_1.CubeOutlineSvg },
};
}
renderControls() {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ComponentListControls, {}) });
}
}
exports.SuperpositionComponentControls = SuperpositionComponentControls;
;
class ComponentListControls extends base_1.PurePluginUIComponent {
constructor() {
super(...arguments);
this.state = {
segmentWatch: false,
ligSearchText: '',
carbSearchText: '',
componentGroups: { nonLigGroups: [], ligGroups: [], carbGroups: [], alphafold: [] },
ligGroups: [],
isLigCollapsed: false,
carbGroups: [],
isCarbCollapsed: false,
isBusy: false,
};
this.ligInputStream = new rxjs_1.Subject();
this.handleLigInputStream = (inputStr) => {
this.setState({ ligSearchText: inputStr });
const filteredRes = this.state.componentGroups.ligGroups.filter((g) => {
const gKeys = g[0].key.split(',');
const cId1Arr = gKeys[0].split('-');
return cId1Arr[2].toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
});
this.setState({ ligGroups: filteredRes });
};
this.carbInputStream = new rxjs_1.Subject();
this.handleCarbInputStream = (inputStr) => {
this.setState({ carbSearchText: inputStr });
const filteredRes = this.state.componentGroups.carbGroups.filter((g) => {
const gKeys = g[0].key.split(',');
const cId1Arr = gKeys[0].split('-');
cId1Arr.splice(0, 2);
cId1Arr.pop();
return cId1Arr.join('-').toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
});
this.setState({ carbGroups: filteredRes });
};
this.toggleVisible = (e, action, type) => {
var _a;
e.preventDefault();
e.currentTarget.blur();
const customState = (0, plugin_custom_state_1.PluginCustomState)(this.plugin);
(_a = customState.events) === null || _a === void 0 ? void 0 : _a.isBusy.next(true);
const visualEntites = (type === 'ligands') ? this.state.ligGroups : this.state.carbGroups;
setTimeout(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
var _a, e_1, _b, _c;
var _d;
try {
for (var _e = true, visualEntites_1 = tslib_1.__asyncValues(visualEntites), visualEntites_1_1; visualEntites_1_1 = yield visualEntites_1.next(), _a = visualEntites_1_1.done, !_a; _e = true) {
_c = visualEntites_1_1.value;
_e = false;
const visualEntity = _c;
this.plugin.managers.structure.hierarchy.toggleVisibility(visualEntity, action);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (!_e && !_a && (_b = visualEntites_1.return)) yield _b.call(visualEntites_1);
}
finally { if (e_1) throw e_1.error; }
}
;
(_d = customState.events) === null || _d === void 0 ? void 0 : _d.isBusy.next(false);
}));
};
this.showHideAllControls = (type) => {
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CheckSvg, flex: true, onClick: (e) => this.toggleVisible(e, 'show', type), style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, title: `Show all ${type}`, disabled: false, children: "All" }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CloseSvg, flex: true, onClick: (e) => this.toggleVisible(e, 'hide', type), style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, title: `Hide all ${type}`, disabled: false, children: "None" })] });
};
this.clearLigSearch = (e) => {
e.preventDefault();
this.setState({ ligSearchText: '' });
this.ligInputStream.next('');
e.currentTarget.blur();
};
this.clearCarbSearch = (e) => {
e.preventDefault();
this.setState({ carbSearchText: '' });
this.carbInputStream.next('');
e.currentTarget.blur();
};
this.collapseSection = (e, type) => {
e.preventDefault();
e.currentTarget.blur();
if (type === 'ligands') {
this.setState({ isLigCollapsed: !this.state.isLigCollapsed });
}
else {
this.setState({ isCarbCollapsed: !this.state.isCarbCollapsed });
}
};
this.sectionHeader = (type) => {
const showHideAllControls = (type === 'ligands') ? this.showHideAllControls('ligands') : this.showHideAllControls('carbohydrates');
const title = (type === 'ligands') ? 'Ligand' : 'Carbohydrates';
const visibleVisuals = (type === 'ligands') ? this.state.ligGroups.length : this.state.carbGroups.length;
const totalVisuals = (type === 'ligands') ? this.state.componentGroups.ligGroups.length : this.state.componentGroups.carbGroups.length;
return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', style: { marginTop: '6px' }, children: [(0, jsx_runtime_1.jsxs)("button", { className: 'msp-form-control msp-control-button-label msp-transform-header-brand-gray', style: { textAlign: 'left' }, onClick: (e) => this.collapseSection(e, type), children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)("strong", { children: title }) }), (0, jsx_runtime_1.jsxs)("small", { style: { color: '#7d91b0' }, children: [" ( ", visibleVisuals, visibleVisuals < totalVisuals ? ` / ${totalVisuals}` : '', " )"] })] }), visibleVisuals > 1 && showHideAllControls] });
};
}
componentDidMount() {
this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, () => {
this.categoriseGroups();
this.forceUpdate();
});
this.subscribe(this.plugin.behaviors.state.isBusy, v => {
this.setState({ isBusy: v });
});
}
componentDidUpdate() {
const customState = (0, plugin_custom_state_1.PluginCustomState)(this.plugin);
if (customState.events && !this.state.segmentWatch) {
this.setState({ segmentWatch: true });
this.subscribe(customState.events.segmentUpdate, () => {
this.categoriseGroups();
this.forceUpdate();
});
}
this.subscribe(this.ligInputStream.pipe((0, operators_1.debounceTime)(1000 / 24)), e => this.handleLigInputStream(e));
this.subscribe(this.carbInputStream.pipe((0, operators_1.debounceTime)(1000 / 24)), e => this.handleCarbInputStream(e));
}
categoriseGroups() {
const componentGroupsVal = { nonLigGroups: [], ligGroups: [], carbGroups: [], alphafold: [] };
const componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
const customState = (0, plugin_custom_state_1.PluginCustomState)(this.plugin);
componentGroups.forEach((g) => {
const superpositionState = customState.superpositionState;
if (!superpositionState)
throw new Error('customState.superpositionState has not been initialized');
let isLigandView = false;
if (customState.initParams && customState.initParams.superpositionParams && customState.initParams.superpositionParams.ligandView) {
isLigandView = true;
}
if (isLigandView) {
const gKeys = g[0].key.split(',');
const cId1Arr = gKeys[0].split('-');
if (gKeys.indexOf('superposition-focus-surr-sel') === -1) {
if (cId1Arr[cId1Arr.length - 1] !== (superpositionState.activeSegment - 1) + '')
return;
if (gKeys.indexOf('superposition-ligand-sel') >= 0) {
componentGroupsVal.ligGroups.push(g);
}
else if (gKeys.indexOf('superposition-carb-sel') >= 0) {
componentGroupsVal.carbGroups.push(g);
}
else if (gKeys.indexOf('alphafold-chain') >= 0) {
componentGroupsVal.alphafold.push(g);
}
else {
componentGroupsVal.nonLigGroups.push(g);
}
}
else {
componentGroupsVal.nonLigGroups.push(g);
}
}
else {
const gKeys = g[0].key.split(',');
if (gKeys.indexOf('superposition-focus-surr-sel') >= 0 || gKeys.indexOf(`Chain-${superpositionState.activeSegment - 1}`) >= 0) {
componentGroupsVal.nonLigGroups.push(g);
}
else if (gKeys.indexOf('alphafold-chain') >= 0) {
componentGroupsVal.alphafold.push(g);
}
}
});
this.setState({ componentGroups: componentGroupsVal, ligGroups: componentGroupsVal.ligGroups, carbGroups: componentGroupsVal.carbGroups, ligSearchText: '', carbSearchText: '' });
}
render() {
const ligSearchControls = (0, jsx_runtime_1.jsxs)("div", { className: 'msp-mapped-parameter-group', style: { fontSize: '90%' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: 'msp-control-row-label', children: "Search Ligand" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-ctrl', children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter HET code', disabled: this.state.isBusy, onChange: e => this.ligInputStream.next(e.target.value), value: this.state.ligSearchText, maxLength: 3 }) })] }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearLigSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.ligSearchText === '' || this.state.isBusy, toggleState: this.state.ligSearchText !== '', title: 'Clear search input' })] });
const carbSearchControls = (0, jsx_runtime_1.jsxs)("div", { className: 'msp-mapped-parameter-group', style: { fontSize: '90%' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: 'msp-control-row-label', children: "Search Carbohydrate" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-ctrl', children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter HET code', disabled: this.state.isBusy, onChange: e => this.carbInputStream.next(e.target.value), value: this.state.carbSearchText, maxLength: 3 }) })] }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearCarbSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.carbSearchText === '' || this.state.isBusy, toggleState: this.state.carbSearchText !== '', title: 'Clear search input' })] });
const ligSectionHeader = this.sectionHeader('ligands');
const carbSectionHeader = this.sectionHeader('carbohydrates');
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(this.state.componentGroups.nonLigGroups.length > 0) && (0, jsx_runtime_1.jsx)("div", { children: this.state.componentGroups.nonLigGroups.map((g) => (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: true }, g[0].cell.transform.ref)) }), (this.state.componentGroups.alphafold.length > 0) && (0, jsx_runtime_1.jsx)("div", { children: this.state.componentGroups.alphafold.map((g) => (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: true, type: 'alphafold' }, g[0].cell.transform.ref)) }), (this.state.componentGroups.ligGroups.length > 0) && ligSectionHeader, (!this.state.isLigCollapsed && this.state.componentGroups.ligGroups.length > 5) && ligSearchControls, (this.state.componentGroups.ligGroups.length > 0) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', style: { maxHeight: '800px', overflowY: 'auto' }, children: !this.state.isLigCollapsed && this.state.ligGroups.map((g) => (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: false }, g[0].cell.transform.ref)) }), (this.state.componentGroups.carbGroups.length > 0) && carbSectionHeader, (!this.state.isCarbCollapsed && this.state.componentGroups.carbGroups.length > 5) && carbSearchControls, (this.state.componentGroups.carbGroups.length > 0) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', style: { maxHeight: '800px', overflowY: 'auto' }, children: !this.state.isCarbCollapsed && this.state.carbGroups.map((g) => (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: false }, g[0].cell.transform.ref)) })] });
}
}
class StructureComponentGroup extends base_1.PurePluginUIComponent {
constructor() {
super(...arguments);
this.state = {
action: undefined,
isHidden: false,
isBusy: false,
};
this.checkAllHidden = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
let allHidden = true;
for (const c of this.props.group) {
if (!c.cell.state.isHidden) {
allHidden = false;
break;
}
}
if (allHidden)
this.setState({ isHidden: true });
});
this.toggleVisible = (e) => {
e.preventDefault();
e.currentTarget.blur();
this.plugin.managers.structure.component.toggleVisibility(this.props.group);
this.setState({ isHidden: !this.state.isHidden });
if (this.props.type === 'alphafold') {
const spState = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).superpositionState;
if (!spState)
throw new Error('customState.superpositionState has not been initialized');
spState.alphafold.visibility[spState.activeSegment - 1] = this.state.isHidden;
}
};
this.toggleAction = () => this.setState({ action: this.state.action === 'action' ? undefined : 'action' });
this.highlight = (e) => {
e.preventDefault();
if (!this.props.group[0].cell.parent)
return;
commands_1.PluginCommands.Interactivity.Object.Highlight(this.plugin, { state: this.props.group[0].cell.parent, ref: this.props.group.map(c => c.cell.transform.ref) });
};
this.clearHighlight = (e) => {
e.preventDefault();
commands_1.PluginCommands.Interactivity.ClearHighlights(this.plugin);
};
this.focus = () => {
let allHidden = true;
for (const c of this.props.group) {
if (!c.cell.state.isHidden) {
allHidden = false;
break;
}
}
if (allHidden) {
this.plugin.managers.structure.hierarchy.toggleVisibility(this.props.group, 'show');
}
this.plugin.managers.camera.focusSpheres(this.props.group, e => {
var _a;
if (e.cell.state.isHidden)
return;
return (_a = e.cell.obj) === null || _a === void 0 ? void 0 : _a.data.boundary.sphere;
});
};
}
get pivot() {
return this.props.group[0];
}
componentDidMount() {
this.checkAllHidden();
this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
var _a, _b;
// if (State.ObjectEvent.isCell(e, this.pivot.cell)) this.forceUpdate();
if (((_a = this.pivot.cell.obj) === null || _a === void 0 ? void 0 : _a.label) === ((_b = e.cell.obj) === null || _b === void 0 ? void 0 : _b.label)) {
if (!e.cell.state.isHidden) {
this.setState({ isHidden: false });
}
else {
this.checkAllHidden();
}
}
});
this.subscribe(this.plugin.behaviors.state.isBusy, v => {
this.setState({ isBusy: v });
});
this.subscribe((0, plugin_custom_state_1.PluginCustomState)(this.plugin).events.isBusy, (e) => {
this.setState({ isBusy: e });
});
}
render() {
var _a;
const component = this.pivot;
const cell = component.cell;
const label = (_a = cell.obj) === null || _a === void 0 ? void 0 : _a.label;
const labelEle = this.props.boldHeader ? (0, jsx_runtime_1.jsx)("strong", { children: label }) : label;
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, className: 'msp-control-button-label', title: `${label} - Click to focus.`, onClick: this.focus, style: { textAlign: 'left' }, disabled: this.state.isBusy, children: labelEle }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { disabled: this.state.isBusy, svg: this.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: `${this.state.isHidden ? 'Show' : 'Hide'} component`, small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { disabled: this.state.isBusy, svg: icons_1.MoreHorizSvg, onClick: this.toggleAction, title: 'Actions', toggleState: this.state.action === 'action', className: 'msp-form-control', flex: true })] }), this.state.action === 'action' && (0, jsx_runtime_1.jsx)("div", { className: 'msp-accent-offset', children: (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '6px' }, children: component.representations.map(r => (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: this.props.group, representation: r }, r.cell.transform.ref)) }) })] });
}
}
class StructureRepresentationEntry extends base_1.PurePluginUIComponent {
constructor() {
super(...arguments);
this.state = {
isBusy: false,
clusterVal: { cluster: 'All' },
};
this.remove = () => this.plugin.managers.structure.component.removeRepresentations(this.props.group, this.props.representation);
this.toggleVisible = (e) => {
e.preventDefault();
e.currentTarget.blur();
this.plugin.managers.structure.component.toggleVisibility(this.props.group, this.props.representation);
};
this.update = (params) => {
return this.updateRepresentations(this.props.group, this.props.representation, params);
};
this.selectCluster = (params) => {
this.setState({ clusterVal: { cluster: params.cluster } });
};
}
componentDidMount() {
this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
if (mol_state_1.State.ObjectEvent.isCell(e, this.props.representation.cell))
this.forceUpdate();
});
this.subscribe(this.plugin.behaviors.state.isBusy, v => {
this.setState({ isBusy: v });
});
this.subscribe((0, plugin_custom_state_1.PluginCustomState)(this.plugin).events.isBusy, (e) => {
this.setState({ isBusy: e });
});
}
updateRepresentations(components, pivot, params) {
var _a, _b, _c;
if (components.length === 0)
return Promise.resolve();
const index = components[0].representations.indexOf(pivot);
if (index < 0)
return Promise.resolve();
const superpositionState = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).superpositionState;
if (!superpositionState)
throw new Error('customState.superpositionState has not been initialized');
let filteredComps = [];
if (this.state.clusterVal.cluster !== 'All') {
if (!superpositionState.segmentData)
throw new Error('customState.superpositionState.segmentData has not been initialized');
const clusterData = superpositionState.segmentData[superpositionState.activeSegment - 1].clusters[parseInt(this.state.clusterVal.cluster) - 1];
filteredComps = clusterData.map((s) => {
return `${s.pdb_id}_${s.struct_asym_id}`;
});
if (filteredComps.length === 0)
return;
}
const update = this.plugin.state.data.build();
for (const c of components) {
// TODO: is it ok to use just the index here? Could possible lead to ugly edge cases, but perhaps not worth the trouble to "fix".
const repr = c.representations[index];
if (!repr)
continue;
if (repr.cell.transform.transformer !== pivot.cell.transform.transformer)
continue;
if (this.state.clusterVal.cluster !== 'All') {
const rmIndex = filteredComps.indexOf(superpositionState.refMaps[repr.cell.transform.parent]);
if (rmIndex === -1)
continue;
}
const updatedParams = {
type: params.type ? params.type : (_a = repr.cell.params) === null || _a === void 0 ? void 0 : _a.values.type,
colorTheme: params.colorTheme ? params.colorTheme : (_b = repr.cell.params) === null || _b === void 0 ? void 0 : _b.values.colorTheme,
sizeTheme: params.sizeTheme ? params.sizeTheme : (_c = repr.cell.params) === null || _c === void 0 ? void 0 : _c.values.sizeTheme,
};
update.to(repr.cell).update(updatedParams);
}
return update.commit({ canUndo: 'Update Representation' });
}
render() {
var _a, _b, _c, _d, _e, _f;
const repr = this.props.representation.cell;
const superpositionState = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).superpositionState;
const clusterSelectArr = [['All', 'All']];
if (!(superpositionState === null || superpositionState === void 0 ? void 0 : superpositionState.segmentData))
throw new Error('customState.superpositionState.segmentData has not been initialized');
superpositionState.segmentData[superpositionState.activeSegment - 1].clusters.forEach((c, i) => {
clusterSelectArr.push([(i + 1) + '', (i + 1) + '']);
});
const clusterOptions = {
cluster: param_definition_1.ParamDefinition.Select('All', clusterSelectArr, { label: 'Select Cluster' }),
};
let isSurrVisual = false;
let isAlphafold = false;
if (repr && repr.obj) {
const reprObj = repr.obj;
if (reprObj.tags && reprObj.tags.indexOf('superposition-focus-surr-repr') >= 0)
isSurrVisual = true;
if (reprObj.tags && reprObj.tags.indexOf('af-superposition-visual') >= 0)
isAlphafold = true;
}
return (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: repr.parent && (0, jsx_runtime_1.jsxs)("div", { children: [(clusterSelectArr.length > 2 && !isSurrVisual && !isAlphafold) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: clusterOptions, values: this.state.clusterVal, onChangeValues: this.selectCluster, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { type: (_a = repr.params) === null || _a === void 0 ? void 0 : _a.definition.type }, values: { type: (_b = repr.params) === null || _b === void 0 ? void 0 : _b.values.type }, onChangeValues: this.update, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { colorTheme: (_c = repr.params) === null || _c === void 0 ? void 0 : _c.definition.colorTheme }, values: { colorTheme: (_d = repr.params) === null || _d === void 0 ? void 0 : _d.values.colorTheme }, onChangeValues: this.update, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { sizeTheme: (_e = repr.params) === null || _e === void 0 ? void 0 : _e.definition.sizeTheme }, values: { sizeTheme: (_f = repr.params) === null || _f === void 0 ? void 0 : _f.values.sizeTheme }, onChangeValues: this.update, isDisabled: this.state.isBusy }) })] }) });
}
}