Merge

Author: cmdcolin

plugins/circular-view/src/CircularView/components/Ruler.tsx

@@ -124,9 +124,7 @@ const RulerLabel = observer(function ({
   const textXY = polarToCartesian(radiusPx + 5, radians)
   if (!text) {
     return null
-  }
-
-  if (text.length * 6.5 < maxWidthPx) {
+  } else if (text.length * 6.5 < maxWidthPx) {
     // text is rotated parallel to the ruler arc
     return (
       <text
@@ -142,8 +140,7 @@ const RulerLabel = observer(function ({
         <title>{title || text}</title>
       </text>
     )
-  }
-  if (maxWidthPx > 4) {
+  } else if (maxWidthPx > 4) {
     // text is rotated perpendicular to the ruler arc
     const overallRotation = radToDeg(radians + view.offsetRadians - Math.PI / 2)
     if (overallRotation >= 180) {
@@ -176,10 +173,10 @@ const RulerLabel = observer(function ({
         <title>{title || text}</title>
       </text>
     )
+  } else {
+    // if you get here there is no room for the text at all
+    return null
   }
-
-  // if you get here there is no room for the text at all
-  return null
 })
 
 const RegionRulerArc = observer(function ({

products/jbrowse-desktop/src/components/StartScreen/StarIcon.tsx

@@ -1,4 +1,5 @@
-import StarIcon2 from '@mui/icons-material/Star'
+import Star from '@mui/icons-material/Star'
+import StarBorder from '@mui/icons-material/StarBorder'
 import { Tooltip } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
@@ -7,14 +8,31 @@ const useStyles = makeStyles()({
     marginLeft: 4,
     fontSize: 16,
     color: 'darkorange',
+    cursor: 'pointer',
+  },
+  starIconEmpty: {
+    marginLeft: 4,
+    fontSize: 16,
+    color: 'black',
+    cursor: 'pointer',
   },
 })
 
-export default function StarIcon() {
+export default function StarIcon({
+  isFavorite,
+  onClick,
+}: {
+  isFavorite: boolean
+  onClick: () => void
+}) {
   const { classes } = useStyles()
   return (
     <Tooltip title="Favorite">
-      <StarIcon2 className={classes.starIcon} />
+      {isFavorite ? (
+        <Star className={classes.starIcon} onClick={onClick} />
+      ) : (
+        <StarBorder className={classes.starIconEmpty} onClick={onClick} />
+      )}
     </Tooltip>
   )
 }

products/jbrowse-desktop/src/components/StartScreen/availableGenomes/CategorySelector.tsx

@@ -0,0 +1,59 @@
+import { MenuItem, TextField } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()({
+  root: {
+    margin: 0,
+    marginLeft: 10,
+  },
+})
+
+interface CategorySelectorProps {
+  allTypes?: { categories: { key: string; title: string; url: string }[] }
+  typeOption: string
+  allTypesLoading: boolean
+  allTypesError?: unknown
+  onChange: (value: string) => void
+}
+
+export default function CategorySelector({
+  allTypes,
+  typeOption,
+  allTypesLoading,
+  allTypesError,
+  onChange,
+}: CategorySelectorProps) {
+  const { classes } = useStyles()
+
+  if (!allTypes) {
+    return null
+  }
+
+  return (
+    <TextField
+      select
+      name="typeOption"
+      label="Group"
+      variant="outlined"
+      className={classes.root}
+      value={typeOption}
+      disabled={allTypesLoading}
+      onChange={event => {
+        onChange(event.target.value)
+      }}
+      helperText={
+        allTypesLoading
+          ? 'Loading categories...'
+          : allTypesError
+            ? 'Using cached categories'
+            : ''
+      }
+    >
+      {allTypes.categories.map(({ key, title }) => (
+        <MenuItem key={key} value={key}>
+          {title}
+        </MenuItem>
+      ))}
+    </TextField>
+  )
+}