Provide a dialog to add extra genomic context for linear read vs. ref…

… visualization (#1560) * Provide genomic context for linear vs. ref * Add window size dialog * Add explainer and form to increase window size Co-authored-by: Colin <[email protected]>
GMOD · Jan 8, 2021 · 2b97eda · 2b97eda
1 parent c17de3b
commit 2b97eda
Show file tree

Hide file tree

Showing 6 changed files with 634 additions and 554 deletions.
diff --git a/plugins/alignments/src/LinearPileupDisplay/components/ColorByTag.tsx b/plugins/alignments/src/LinearPileupDisplay/components/ColorByTag.tsx
@@ -55,41 +55,36 @@ export default function ColorByTagDlg(props: {
             for minimap2 read strand, HP for haplotype, RG for read group, etc.
           </Typography>
 
-          <form>
-            <TextField
-              value={tag}
-              onChange={event => {
-                setTag(event.target.value)
-              }}
-              placeholder="Enter tag name"
-              inputProps={{
-                maxLength: 2,
-                'data-testid': 'color-tag-name-input',
-              }}
-              error={tag.length === 2 && !validTag}
-              helperText={
-                tag.length === 2 && !validTag ? 'Not a valid tag' : ''
-              }
-              autoComplete="off"
-              data-testid="color-tag-name"
-            />
-            <Button
-              variant="contained"
-              color="primary"
-              type="submit"
-              style={{ marginLeft: 20 }}
-              onClick={() => {
-                display.setColorScheme({
-                  type: 'tag',
-                  tag,
-                })
-                handleClose()
-              }}
-              disabled={!validTag}
-            >
-              Submit
-            </Button>
-          </form>
+          <TextField
+            value={tag}
+            onChange={event => {
+              setTag(event.target.value)
+            }}
+            placeholder="Enter tag name"
+            inputProps={{
+              maxLength: 2,
+              'data-testid': 'color-tag-name-input',
+            }}
+            error={tag.length === 2 && !validTag}
+            helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
+            autoComplete="off"
+            data-testid="color-tag-name"
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            style={{ marginLeft: 20 }}
+            onClick={() => {
+              display.setColorScheme({
+                type: 'tag',
+                tag,
+              })
+              handleClose()
+            }}
+            disabled={!validTag}
+          >
+            Submit
+          </Button>
         </div>
       </DialogContent>
     </Dialog>

diff --git a/plugins/alignments/src/LinearPileupDisplay/components/FilterByTag.tsx b/plugins/alignments/src/LinearPileupDisplay/components/FilterByTag.tsx
@@ -128,92 +128,90 @@ export default observer(
             for details
           </Typography>
           <div className={classes.root}>
-            <form>
-              <Paper className={classes.paper} variant="outlined">
-                <div style={{ display: 'flex' }}>
-                  <div>
-                    <Typography>Read must have ALL these flags</Typography>
-                    <Bitmask flag={flagInclude} setFlag={setFlagInclude} />
-                  </div>
-                  <div>
-                    <Typography>Read must have NONE of these flags</Typography>
-                    <Bitmask flag={flagExclude} setFlag={setFlagExclude} />
-                  </div>
+            <Paper className={classes.paper} variant="outlined">
+              <div style={{ display: 'flex' }}>
+                <div>
+                  <Typography>Read must have ALL these flags</Typography>
+                  <Bitmask flag={flagInclude} setFlag={setFlagInclude} />
                 </div>
-              </Paper>
-              <Paper className={classes.paper} variant="outlined">
-                <Typography>
-                  Filter by tag name and value. Use * in the value field to get
-                  all reads containing any value for that tag. Example: filter
-                  tag name SA with value * to get all split/supplementary reads
-                </Typography>
-                <TextField
-                  className={classes.field}
-                  value={tag}
-                  onChange={event => {
-                    setTag(event.target.value)
-                  }}
-                  placeholder="Enter tag name"
-                  inputProps={{
-                    maxLength: 2,
-                    'data-testid': 'color-tag-name-input',
-                  }}
-                  error={tag.length === 2 && !validTag}
-                  helperText={
-                    tag.length === 2 && !validTag ? 'Not a valid tag' : ''
-                  }
-                  data-testid="color-tag-name"
-                />
-                <TextField
-                  className={classes.field}
-                  value={tagValue}
-                  onChange={event => {
-                    setTagValue(event.target.value)
-                  }}
-                  placeholder="Enter tag value"
-                  inputProps={{
-                    'data-testid': 'color-tag-name-input',
-                  }}
-                  data-testid="color-tag-value"
-                />
-              </Paper>
-              <Paper className={classes.paper} variant="outlined">
-                <Typography>Filter by read name</Typography>
-                <TextField
-                  className={classes.field}
-                  value={readName}
-                  onChange={event => {
-                    setReadName(event.target.value)
-                  }}
-                  placeholder="Enter read name"
-                  inputProps={{
-                    'data-testid': 'color-tag-readname-input',
-                  }}
-                  data-testid="color-tag-readname"
-                />
-              </Paper>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => {
-                  display.setFilterBy({
-                    flagInclude,
-                    flagExclude,
-                    readName,
-                    tagFilter:
-                      tag !== ''
-                        ? {
-                            tag,
-                            value: tagValue,
-                          }
-                        : undefined,
-                  })
-                  handleClose()
+                <div>
+                  <Typography>Read must have NONE of these flags</Typography>
+                  <Bitmask flag={flagExclude} setFlag={setFlagExclude} />
+                </div>
+              </div>
+            </Paper>
+            <Paper className={classes.paper} variant="outlined">
+              <Typography>
+                Filter by tag name and value. Use * in the value field to get
+                all reads containing any value for that tag. Example: filter tag
+                name SA with value * to get all split/supplementary reads
+              </Typography>
+              <TextField
+                className={classes.field}
+                value={tag}
+                onChange={event => {
+                  setTag(event.target.value)
+                }}
+                placeholder="Enter tag name"
+                inputProps={{
+                  maxLength: 2,
+                  'data-testid': 'color-tag-name-input',
+                }}
+                error={tag.length === 2 && !validTag}
+                helperText={
+                  tag.length === 2 && !validTag ? 'Not a valid tag' : ''
+                }
+                data-testid="color-tag-name"
+              />
+              <TextField
+                className={classes.field}
+                value={tagValue}
+                onChange={event => {
+                  setTagValue(event.target.value)
                 }}
-              >
-                Submit
-              </Button>
-            </form>
+                placeholder="Enter tag value"
+                inputProps={{
+                  'data-testid': 'color-tag-name-input',
+                }}
+                data-testid="color-tag-value"
+              />
+            </Paper>
+            <Paper className={classes.paper} variant="outlined">
+              <Typography>Filter by read name</Typography>
+              <TextField
+                className={classes.field}
+                value={readName}
+                onChange={event => {
+                  setReadName(event.target.value)
+                }}
+                placeholder="Enter read name"
+                inputProps={{
+                  'data-testid': 'color-tag-readname-input',
+                }}
+                data-testid="color-tag-readname"
+              />
+            </Paper>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={() => {
+                display.setFilterBy({
+                  flagInclude,
+                  flagExclude,
+                  readName,
+                  tagFilter:
+                    tag !== ''
+                      ? {
+                          tag,
+                          value: tagValue,
+                        }
+                      : undefined,
+                })
+                handleClose()
+              }}
+            >
+              Submit
+            </Button>
           </div>
         </DialogContent>
       </Dialog>

diff --git a/plugins/alignments/src/LinearPileupDisplay/components/SortByTag.tsx b/plugins/alignments/src/LinearPileupDisplay/components/SortByTag.tsx
@@ -50,35 +50,31 @@ export default function ColorByTagDlg(props: {
       <DialogContent>
         <div>
           <Typography>Set the tag to sort by</Typography>
-          <form>
-            <TextField
-              value={tag}
-              onChange={event => {
-                setTag(event.target.value)
-              }}
-              placeholder="Enter tag name"
-              inputProps={{
-                maxLength: 2,
-                'data-testid': 'sort-tag-name-input',
-              }}
-              error={tag.length === 2 && !validTag}
-              helperText={
-                tag.length === 2 && !validTag ? 'Not a valid tag' : ''
-              }
-              autoComplete="off"
-              data-testid="sort-tag-name"
-            />
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={() => {
-                display.setSortedBy('tag', tag)
-                handleClose()
-              }}
-            >
-              Submit
-            </Button>
-          </form>
+          <TextField
+            value={tag}
+            onChange={event => {
+              setTag(event.target.value)
+            }}
+            placeholder="Enter tag name"
+            inputProps={{
+              maxLength: 2,
+              'data-testid': 'sort-tag-name-input',
+            }}
+            error={tag.length === 2 && !validTag}
+            helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
+            autoComplete="off"
+            data-testid="sort-tag-name"
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              display.setSortedBy('tag', tag)
+              handleClose()
+            }}
+          >
+            Submit
+          </Button>
         </div>
       </DialogContent>
     </Dialog>

diff --git a/plugins/linear-comparative-view/package.json b/plugins/linear-comparative-view/package.json
@@ -16,8 +16,8 @@
   },
   "author": "JBrowse Team",
   "distMain": "dist/index.js",
-  "srcMain": "src/index.ts",
-  "main": "src/index.ts",
+  "srcMain": "src/index.tsx",
+  "main": "src/index.tsx",
   "distModule": "dist/plugin-linear-comparative-view.esm.js",
   "module": "",
   "files": [