Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Desktop readonly changes #49

Merged
merged 6 commits into from
Jul 23, 2024
Merged

Desktop readonly changes #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c0d41b4
fix errors when loading read-only page in desktop mode
munnsmunns Jul 9, 2024
a5bebb6
Merge branch 'main' into desktop-readonly-changes
shapiromatron Jul 18, 2024
29c7be3
fix text alignment on detail pages
shapiromatron Jul 18, 2024
5657a26
rewrite model table implementation
shapiromatron Jul 18, 2024
8f7ff90
fix layout of option and model options
shapiromatron Jul 18, 2024
2f1cac9
Merge branch 'main' into desktop-readonly-changes
shapiromatron Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions bmds_ui/static/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ input[type=number] {
visibility: visible;
}

.table-fixed {
table-layout: fixed;
}

/* table column text alignment */
.col-r-1 td:nth-child(1),
.col-r-1 th:nth-child(1),
Expand Down
8 changes: 7 additions & 1 deletion frontend/src/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,13 @@ export const simulateClick = function(el) {
};
},
checkOrEmpty = bool => {
return <Icon name={bool ? "check2-square" : "square"} classes="bi-lg" />;
return (
<Icon
title={bool ? "checked" : "unchecked"}
name={bool ? "check2-square" : "square"}
classes="bi-lg"
/>
);
},
getLabel = function(value, mapping) {
return _.find(mapping, d => d.value == value).label;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/IndividualModel/CDFTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ class CDFTable extends Component {
ff(bmd_dist[1][i]),
ff(bmd_dist[0][i]),
]),
tblClasses: "table table-sm text-right col-l-1",
tblClasses: "table table-sm text-right",
};
return <Table data={data} />;
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/IndividualModel/GoodnessFit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ class GoodnessFit extends Component {
} else {
data = getContinuousNormalData(dataset, dtype, model);
}
data.tblClasses = "table table-sm text-right col-l-1";
data.tblClasses = "table table-sm text-right";
data.subheader = "Goodness of Fit";

return <Table data={data} />;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Main/Actions/Actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ class Actions extends Component {
) : (
<p className="text-muted pl-4 mb-0">Please save and execute analysis.</p>
)}
{mainStore.isDesktop ? (
{mainStore.isDesktop && mainStore.canEdit ? (
<>
<div className="dropdown-divider"></div>
<span className="dropdown-header">Collections</span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Main/DatasetModelOptionList/DatasetModelOption.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ class DatasetModelOption extends Component {
</tr>
) : (
<tr>
<td className="text-center">{checkOrEmpty(option.enabled)}</td>
<td>{checkOrEmpty(option.enabled)}</td>
<td>{dataset.metadata.name}</td>
{option.degree !== undefined ? (
<td>{getDegreeText(dtype, option.degree)}</td>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/Main/DatasetModelOptionList/DatasetModelOptionList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ class DatasetModelOptionList extends Component {
}

return (
<table className="table table-sm">
<table className="table table-sm table-fixed">
<thead>
{dtype == Dtype.CONTINUOUS || dtype == Dtype.CONTINUOUS_INDIVIDUAL ? (
<tr className="bg-custom">
<th>Enabled</th>
<th>Dataset</th>
<th>
Maximum polynomial degree&nbsp;
Maximum Polynomial Degree&nbsp;
<HelpTextPopover content={maxDegreeText} />
</th>
<th>Adverse Direction</th>
Expand All @@ -54,7 +54,7 @@ class DatasetModelOptionList extends Component {
<th>Enabled</th>
<th>Dataset</th>
<th>
Maximum multistage degree
Maximum Multistage Degree
<HelpTextPopover content={maxDegreeText} />
</th>
</tr>
Expand Down
19 changes: 4 additions & 15 deletions frontend/src/components/Main/ModelsForm/ModelsCheckBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,41 +77,30 @@ const ModelsCheckBox = observer(props => {
<td className="text-left align-middle">Exponential</td>
<CheckBoxTd store={store} type={fr} model={"Exponential"} />
<td></td>
<CheckBoxTd store={store} type={b} model={"Exponential"} disabled={true} />
<PriorWeightTd store={store} model={"Exponential"} disabled={true} />
</tr>
<tr>
<td className="text-left align-middle">Hill</td>
<CheckBoxTd store={store} type={fr} model={"Hill"} />
<CheckBoxTd store={store} type={fu} model={"Hill"} />
<CheckBoxTd store={store} type={b} model={"Hill"} disabled={true} />
<PriorWeightTd store={store} model={"Hill"} disabled={true} />
</tr>
<tr>
<td className="text-left align-middle">Linear</td>
<td></td>
<CheckBoxTd store={store} type={fu} model={"Linear"} />
<CheckBoxTd store={store} type={b} model={"Linear"} disabled={true} />
<PriorWeightTd store={store} model={"Linear"} disabled={true} />
</tr>
<tr>
<td className="text-left align-middle">Polynomial</td>
<CheckBoxTd store={store} type={fr} model={"Polynomial"} />
<CheckBoxTd store={store} type={fu} model={"Polynomial"} />
<CheckBoxTd store={store} type={b} model={"Polynomial"} disabled={true} />
<PriorWeightTd store={store} model={"Polynomial"} disabled={true} />
</tr>
<tr>
<td className="text-left align-middle">Power</td>
<CheckBoxTd store={store} type={fr} model={"Power"} />
<CheckBoxTd store={store} type={fu} model={"Power"} />
<CheckBoxTd store={store} type={b} model={"Power"} disabled={true} />
<PriorWeightTd store={store} model={"Power"} disabled={true} />
</tr>
</tbody>
);
}
if (store.getModelType === mc.MODEL_DICHOTOMOUS) {
} else if (store.getModelType === mc.MODEL_DICHOTOMOUS) {
return (
<tbody>
<tr>
Expand Down Expand Up @@ -182,8 +171,7 @@ const ModelsCheckBox = observer(props => {
</tr>
</tbody>
);
}
if (store.getModelType === mc.MODEL_NESTED_DICHOTOMOUS) {
} else if (store.getModelType === mc.MODEL_NESTED_DICHOTOMOUS) {
return (
<tbody>
<tr>
Expand All @@ -198,8 +186,9 @@ const ModelsCheckBox = observer(props => {
</tr>
</tbody>
);
} else {
throw `Unknown modelType: ${store.getModelType}`;
}
throw `Unknown modelType: ${store.getModelType}`;
});
ModelsCheckBox.propTypes = {
store: PropTypes.any,
Expand Down
151 changes: 96 additions & 55 deletions frontend/src/components/Main/ModelsForm/ModelsCheckBoxHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,78 +5,119 @@ import React from "react";
import * as mc from "@/constants/mainConstants";
import {allModelOptions} from "@/constants/modelConstants";

import Button from "../../common/Button";
import CheckboxInput from "../../common/CheckboxInput";
import HelpTextPopover from "../../common/HelpTextPopover";
import LabelInput from "../../common/LabelInput";

const areAllModelsChecked = function(modelType, type, models) {
return type in models && models[type].length === allModelOptions[modelType][type].length;
},
SelectAllComponent = observer(props => {
const {store, type, disabled} = props;
return store.canEdit ? (
<th>
<label className="m-0">
<CheckboxInput
id={`select_all_${type}`}
disabled={disabled}
onChange={value => store.enableAll(type, value)}
checked={areAllModelsChecked(store.getModelType, type, store.models)}
/>
&nbsp;Select all
</label>
</th>
) : (
<th></th>
const {store, type, disabled, label} = props,
id = `select_all_${type}`;
return (
<>
<CheckboxInput
id={id}
disabled={disabled}
onChange={value => store.enableAll(type, value)}
checked={areAllModelsChecked(store.getModelType, type, store.models)}
/>
&nbsp;
<LabelInput label={label} htmlFor={id} />
</>
);
}),
ModelColGroup = observer(props => {
const {hasBayesianModels} = props,
cols = hasBayesianModels ? [20, 20, 20, 20, 20] : [33, 33, 34];
return (
<colgroup>
{cols.map((d, i) => (
<col key={i} width={`${d}%`} />
))}
</colgroup>
);
});

const ModelsCheckBoxHeader = observer(props => {
const {store} = props,
content = "Models were previewed in BMDS Excel 3.2 and will be formally peer reviewed.",
title = "Bayesian Model Averaging",
{hasBayesianModels} = store,
isContinuous = store.getModelType === mc.MODEL_CONTINUOUS,
isMultiTumor = store.getModelType === mc.MODEL_MULTI_TUMOR;
{canEdit} = store,
hasBayesianModels = store.getModelType === mc.MODEL_DICHOTOMOUS;
return (
<thead className="bg-custom">
<tr>
<th rowSpan="3">Models</th>
<th colSpan="2">Maximum Likelihood Estimate</th>
{hasBayesianModels ? (
<th colSpan="3" rowSpan="2">
Bayesian Model Averaging
{isContinuous ? (
<HelpTextPopover title={title} content={content}></HelpTextPopover>
<>
<ModelColGroup hasBayesianModels={hasBayesianModels} />
<thead className="bg-custom">
<tr>
<th className="align-top" rowSpan="2">
Model
{canEdit ? (
<>
<Button
className="mt-4 btn btn-sm btn-block btn-info"
onClick={store.resetModelSelection}
text="Reset Selection"
/>
</>
) : null}
</th>
) : null}
</tr>
<tr>
<th>Restricted</th>
<th>Unrestricted</th>
</tr>
<tr>
<SelectAllComponent store={store} type={"frequentist_restricted"} />
<SelectAllComponent
store={store}
type={"frequentist_unrestricted"}
disabled={isMultiTumor}
/>
{hasBayesianModels ? (
<>
<SelectAllComponent
store={store}
type={"bayesian"}
disabled={isContinuous}
/>
<th>Prior Weights</th>
</>
) : null}
</tr>
</thead>
<th colSpan="2">Maximum Likelihood Estimate</th>
{hasBayesianModels ? <th colSpan="2">Bayesian Model Averaging</th> : null}
</tr>
<tr>
<th>
Restricted
{canEdit ? (
<>
<br />
<SelectAllComponent
store={store}
type={"frequentist_restricted"}
label="Select All"
/>
</>
) : null}
</th>
<th>
Unrestricted
{canEdit ? (
<>
<br />
<SelectAllComponent
store={store}
type={"frequentist_unrestricted"}
label="Select All"
/>
</>
) : null}
</th>
{hasBayesianModels ? (
<>
<th>
Include
{canEdit ? (
<>
<br />
<SelectAllComponent
store={store}
type={"bayesian"}
label="Select All"
/>
</>
) : null}
</th>
<th>
<span className="mb-1">Prior Weight</span>
</th>
</>
) : null}
</tr>
</thead>
</>
);
});
ModelsCheckBoxHeader.propTypes = {
store: PropTypes.object,
};

export default ModelsCheckBoxHeader;
11 changes: 1 addition & 10 deletions frontend/src/components/Main/ModelsForm/ModelsCheckBoxList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@ import React, {Component} from "react";

import {MODEL_MULTI_TUMOR} from "@/constants/mainConstants";

import Button from "../../common/Button";
import ModelsCheckBox from "./ModelsCheckBox";
import ModelsCheckBoxHeader from "./ModelsCheckBoxHeader";

@inject("modelsStore")
@observer
class ModelsCheckBoxList extends Component {
render() {
const {modelsStore} = this.props,
mainStore = modelsStore.rootStore.mainStore;
const {modelsStore} = this.props;
if (modelsStore.getModelType === MODEL_MULTI_TUMOR) {
return (
<div className="alert alert-info my-3">
Expand All @@ -29,13 +27,6 @@ class ModelsCheckBoxList extends Component {
}
return (
<div className="mt-2">
{mainStore.canEdit ? (
<Button
className="btn btn-sm btn-warning"
onClick={mainStore.resetModelSelection}
text="Reset Model Selection"
/>
) : null}
<table className="table table-sm">
<ModelsCheckBoxHeader store={modelsStore} />
<ModelsCheckBox store={modelsStore} />
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Main/OptionsForm/OptionsFormList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class OptionsFormList extends Component {
<div>
<div className="panel panel-default">
<form className="form-horizontal">
<table className="table table-sm text-center">
<table className="table table-sm table-fixed">
<thead className="bg-custom">
<tr>
<th>Option Set #</th>
Expand Down Expand Up @@ -78,7 +78,7 @@ class OptionsFormList extends Component {
</>
) : null}
{optionsStore.canEdit ? (
<th>
<th style={{width: "55px"}}>
<Button
title="Add option set."
className="btn btn-primary"
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/Output/NestedDichotomous/BootstrapRuns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const getData = function(model) {
"99th",
],
subheader: "Bootstrap Runs",
tblClasses: "table table-sm text-right",
rows,
};
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Output/NestedDichotomous/LitterData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const getData = function(model) {
const litter = model.results.litter,
n = _.size(litter.lsc);
return {
tblClasses: "table table-sm text-right col-l-1",
tblClasses: "table table-sm text-right",
headers: [
"Dose",
"Litter Specific Covariance",
Expand Down
Loading