drugflow-molstar
Version:
Molstar implementation for DrugFlow
167 lines (166 loc) • 13.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnnotationsComponentControls = void 0;
exports.TextsmsOutlinedSvg = TextsmsOutlinedSvg;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var common_1 = require("Molstar/mol-plugin-ui/controls/common");
var base_1 = require("Molstar/mol-plugin-ui/base");
var color_1 = require("Molstar/extensions/pdbe/structure-quality-report/color");
var mol_state_1 = require("Molstar/mol-state");
var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
var color_2 = require("../domain-annotations/color");
var behavior_1 = require("Molstar/extensions/pdbe/structure-quality-report/behavior");
var behavior_2 = require("../domain-annotations/behavior");
var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
var hierarchy_1 = require("Molstar/mol-plugin-state/manager/structure/hierarchy");
var _TextsmsOutlined = (0, jsx_runtime_1.jsxs)("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0V0z" }), (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 9h2v2H7zM11 9h2v2h-2zM15 9h2v2h-2z" })] })] });
function TextsmsOutlinedSvg() { return _TextsmsOutlined; }
var AnnotationsComponentControls = /** @class */ (function (_super) {
tslib_1.__extends(AnnotationsComponentControls, _super);
function AnnotationsComponentControls() {
var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__read(arguments), false)) || this;
_this.state = {
isCollapsed: false,
validationApplied: false,
domainAtnApplied: false,
validationOptions: false,
domainAtnOptions: false
};
_this.getOptionParams = function () {
var validationAnnotationCtrl = false;
var domainAnnotationCtrl = false;
var customState = _this.plugin.customState;
if (customState && customState.initParams) {
if (customState.initParams.validationAnnotation)
validationAnnotationCtrl = true;
if (customState.initParams.domainAnnotation)
domainAnnotationCtrl = true;
}
if ((validationAnnotationCtrl && !_this.state.validationParams) || (domainAnnotationCtrl && !_this.state.domainAtnParams)) {
var groupRef = mol_state_1.StateSelection.findTagInSubtree(_this.plugin.state.data.tree, mol_state_1.StateTransform.RootRef, 'structure-component-static-polymer');
if (groupRef) {
var struct = _this.plugin.state.data.select(groupRef)[0].obj;
if (struct) {
var themeDataCtx = { structure: struct.data };
if (validationAnnotationCtrl && !_this.state.validationParams) {
var validationActionsParams = color_1.StructureQualityReportColorThemeProvider.getParams(themeDataCtx);
if (validationActionsParams) {
_this.setState({ validationParams: {
params: validationActionsParams,
values: { type: validationActionsParams.type.defaultValue }
} });
}
}
if (domainAnnotationCtrl && !_this.state.domainAtnParams) {
var domainActionsParams = color_2.DomainAnnotationsColorThemeProvider.getParams(themeDataCtx);
if (domainActionsParams) {
_this.setState({ domainAtnParams: {
params: domainActionsParams,
values: { type: domainActionsParams.type.defaultValue }
} });
}
}
}
}
}
};
_this.toggleCollapsed = function () {
_this.setState({ isCollapsed: !_this.state.isCollapsed });
};
_this.toggleOptions = function (type) {
if (type === 0)
_this.setState({ validationOptions: !_this.state.validationOptions });
if (type === 1)
_this.setState({ domainAtnOptions: !_this.state.domainAtnOptions });
};
_this.applyAnnotation = function (type, visibleState, params) {
// Defaults
var themeName = 'polymer-id';
var themePropsToAdd = behavior_1.PDBeStructureQualityReport;
var themePropsToRemove = _this.state.domainAtnParams ? behavior_2.PDBeDomainAnnotations : void 0;
// Set Theme Params
if (type === 0) {
if (visibleState) {
themeName = 'pdbe-structure-quality-report';
}
_this.setState({ validationApplied: visibleState });
_this.setState({ domainAtnApplied: false });
}
else {
themePropsToAdd = behavior_2.PDBeDomainAnnotations;
themePropsToRemove = _this.state.validationParams ? behavior_1.PDBeStructureQualityReport : void 0;
if (visibleState)
themeName = 'pdbe-domain-annotations';
_this.setState({ domainAtnApplied: visibleState });
_this.setState({ validationApplied: false });
}
// Update Tooltip
if (visibleState && themeName !== 'polymer-id') {
var addTooltipUpdate = _this.plugin.state.behaviors.build().to(themePropsToAdd.id).update(themePropsToAdd, function (old) { old.showTooltip = true; });
_this.plugin.runTask(_this.plugin.state.behaviors.updateTree(addTooltipUpdate));
if (themePropsToRemove) {
var removeTooltipUpdate = _this.plugin.state.behaviors.build().to(themePropsToRemove.id).update(themePropsToRemove, function (old) { old.showTooltip = false; });
_this.plugin.runTask(_this.plugin.state.behaviors.updateTree(removeTooltipUpdate));
}
}
var polymerGroup;
var componentGroups = _this.plugin.managers.structure.hierarchy.currentComponentGroups;
componentGroups.forEach(function (compGrp) {
if (compGrp[0].key === 'structure-component-static-polymer')
polymerGroup = compGrp;
});
if (polymerGroup) {
_this.plugin.managers.structure.component.updateRepresentationsTheme(polymerGroup, { color: themeName, colorParams: params ? params : void 0 });
}
};
_this.initApplyAnnotation = function (type) {
if (type === 0)
_this.applyAnnotation(0, !_this.state.validationApplied, _this.state.validationParams.values);
if (type === 1)
_this.applyAnnotation(1, !_this.state.domainAtnApplied, _this.state.domainAtnParams.values);
};
_this.updateValidationParams = function (val) {
var updatedParams = tslib_1.__assign({}, _this.state.validationParams);
updatedParams.values = val;
_this.setState({ validationParams: updatedParams });
if (_this.state.validationApplied)
_this.applyAnnotation(0, _this.state.validationApplied, val);
};
_this.updateDomainAtnParams = function (val) {
var updatedParams = tslib_1.__assign({}, _this.state.domainAtnParams);
updatedParams.values = val;
_this.setState({ domainAtnParams: updatedParams });
if (_this.state.domainAtnApplied)
_this.applyAnnotation(1, _this.state.domainAtnApplied, val);
};
return _this;
}
AnnotationsComponentControls.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function () {
_this.getOptionParams();
_this.forceUpdate();
});
this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (c) { return _this.setState({
description: hierarchy_1.StructureHierarchyManager.getSelectedStructuresDescription(_this.plugin)
}); });
};
AnnotationsComponentControls.prototype.render = function () {
var _this = this;
if (!this.state.validationParams && !this.state.domainAtnParams)
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
var brand = {
accent: 'green',
svg: TextsmsOutlinedSvg
};
var wrapClass = this.state.isCollapsed
? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
: 'msp-transform-wrapper';
return (0, jsx_runtime_1.jsxs)("div", { className: wrapClass, children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-transform-header', children: (0, jsx_runtime_1.jsxs)(common_1.Button, { icon: brand ? void 0 : this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: brand ? "msp-transform-header-brand msp-transform-header-brand-".concat(brand.accent) : void 0, title: "Click to ".concat(this.state.isCollapsed ? 'expand' : 'collapse'), children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: brand === null || brand === void 0 ? void 0 : brand.svg, inline: true }), "Annotations", (0, jsx_runtime_1.jsx)("small", { style: { margin: '0 6px' }, children: this.state.isCollapsed ? '' : this.state.description })] }) }), !this.state.isCollapsed && this.state.validationParams &&
(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: "Validation Report Annotations.", style: { textAlign: 'left' }, children: "Validation Report" }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.initApplyAnnotation(0); }, toggleState: false, svg: !this.state.validationApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: "Click to ".concat(this.state.validationApplied ? 'Hide' : 'Show', " Validation Report Annotation"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.toggleOptions(0); }, svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.validationOptions, className: 'msp-form-control', flex: true })] }), !this.state.isCollapsed && this.state.validationParams && this.state.validationOptions && (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '6px' }, children: (0, jsx_runtime_1.jsx)("div", { className: "msp-accent-offset", children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.validationParams.params, values: this.state.validationParams.values, onChangeValues: this.updateValidationParams }) }) }) }), !this.state.isCollapsed && this.state.domainAtnParams &&
(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: "Domain Annotations.", style: { textAlign: 'left' }, children: "Domains" }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.initApplyAnnotation(1); }, toggleState: false, svg: !this.state.domainAtnApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: "Click to ".concat(this.state.domainAtnApplied ? 'Hide' : 'Show', " Domain Annotation"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.toggleOptions(1); }, svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.domainAtnOptions, className: 'msp-form-control', flex: true })] }), !this.state.isCollapsed && this.state.domainAtnParams && this.state.domainAtnOptions && (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '6px' }, children: (0, jsx_runtime_1.jsx)("div", { className: "msp-accent-offset", children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.domainAtnParams.params, values: this.state.domainAtnParams.values, onChangeValues: this.updateDomainAtnParams }) }) }) })] });
};
return AnnotationsComponentControls;
}(base_1.PurePluginUIComponent));
exports.AnnotationsComponentControls = AnnotationsComponentControls;