jbrowse-plugin-msaview 2.7.4 → 2.8.0

package/dist/LaunchMsaView/components/OrthologQuery/OrthologPanel.js

@@ -15,18 +15,22 @@ const useStyles = makeStyles()({
     selectField: {
         width: 180,
     },
+    // A GRID, not a wrapping flex row of fixed-width items. The old form was three
+    // 160px columns inside a 560px box, which is five rows for thirteen species and
+    // eight for twenty-three -- and the checkbox list is the tallest thing in the
+    // dialog, so those rows are the dialog's height. Five auto-fitted columns is
+    // five rows for twenty-three, i.e. more species in less space, and it reflows
+    // rather than being pinned to a width the dialog may not have.
     speciesBox: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        maxWidth: 560,
-        marginTop: 12,
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))',
+        maxWidth: 700,
+        marginTop: 4,
     },
+    // The label carries the row height; the default control padding is what makes
+    // 23 rows of it tall.
     species: {
-        width: 160,
-    },
-    infoText: {
-        marginTop: 20,
-        maxWidth: 620,
+        marginRight: 0,
     },
 });
 const OrthologPanel = observer(function ({ handleClose, feature, model, }) {
@@ -43,20 +47,19 @@ const OrthologPanel = observer(function ({ handleClose, feature, model, }) {
     const taxa = COMMON_SPECIES.map(s => s.taxId).filter(t => !excluded.includes(t));
     return (React.createElement(React.Fragment, null,
         React.createElement(LaunchPanelContent, { error: e },
-            React.createElement(Typography, null, "Builds the alignment from NCBI's precomputed orthologs \u2014 one gene per species \u2014 instead of searching. There is no job to wait on: the NCBI lookups take about a second, and only the multiple alignment at EBI costs real time (~10s), against 10+ minutes for BLAST. Rows come out labelled by species rather than by accession, and NCBI's CDD domains are overlaid automatically."),
+            React.createElement(Typography, { variant: "body2" }, "NCBI's precomputed orthologs, one gene per species, aligned at EBI in seconds rather than the 10+ minutes BLAST takes."),
             React.createElement("div", null,
                 React.createElement(TextField2, { variant: "outlined", label: "Query species", className: classes.selectField, select: true, value: taxId, onChange: event => {
                         setTaxId(Number(event.target.value));
                     }, helperText: "the species this gene is from" }, COMMON_SPECIES.map(s => (React.createElement(MenuItem, { value: s.taxId, key: s.taxId }, s.label)))),
                 React.createElement(MsaAlgorithmSelect, { className: classes.selectField, value: msaAlgorithm, onChange: setMsaAlgorithm })),
-            React.createElement(Typography, { variant: "subtitle2", style: { marginTop: 12 } }, "Species to include (those without an ortholog are skipped)"),
+            React.createElement(Typography, { variant: "subtitle2", style: { marginTop: 8 } }, "Species to include (those without an ortholog are skipped)"),
             React.createElement("div", { className: classes.speciesBox }, COMMON_SPECIES.map(s => (React.createElement(FormControlLabel, { className: classes.species, key: s.taxId, control: React.createElement(Checkbox, { checked: !excluded.includes(s.taxId), onChange: event => {
                         setExcluded(event.target.checked
                             ? excluded.filter(t => t !== s.taxId)
                             : [...excluded, s.taxId]);
                     } }), label: s.label })))),
-            React.createElement(TranscriptSelector, { feature: feature, ...transcriptSelection }),
-            React.createElement(Typography, { className: classes.infoText, variant: "body2" }, "The query row is the transcript selected above, not NCBI's representative protein, so the alignment stays linked to the genome view at codon resolution.")),
+            React.createElement(TranscriptSelector, { feature: feature, ...transcriptSelection })),
         React.createElement(SubmitCancelActions, { submitDisabled: !proteinSequence || taxa.length < 2, onSubmit: () => {
                 try {
                     if (selectedTranscript) {

package/dist/LaunchMsaView/components/TranscriptSelector.js

@@ -20,7 +20,13 @@ export default function TranscriptSelector({ feature, options, selectedId, selec
     const [showSequence, setShowSequence] = useState(false);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: classes.flex },
-            React.createElement(TextField, { variant: "outlined", label: `Choose isoform of ${getGeneDisplayName(feature)}`, select: true, className: classes.minWidth, value: selectedId, onChange: event => {
+            React.createElement(TextField, { variant: "outlined", label: `Choose isoform of ${getGeneDisplayName(feature)}`, 
+                // The query row is this transcript rather than NCBI's representative
+                // protein, which is what keeps the alignment linked to the genome view
+                // at codon resolution. It used to be a paragraph under the panel; as
+                // helper text it says the same thing where the choice is made and
+                // costs no height of its own.
+                helperText: "the query row, so the alignment stays linked to the genome view", select: true, className: classes.minWidth, value: selectedId, onChange: event => {
                     setSelectedId(event.target.value);
                 } }, options.map(val => {
                 const inSet = validIds