Skip to content

Commit

Permalink
Add vertical scroll bar, "none" color scheme, hide minimap when viewi…
Browse files Browse the repository at this point in the history
…ng small MSA, and other misc (#78)
  • Loading branch information
cmdcolin authored Aug 3, 2024
1 parent 0a3f127 commit ccd2ffa
Show file tree
Hide file tree
Showing 70 changed files with 1,424 additions and 1,316 deletions.
9 changes: 0 additions & 9 deletions .eslintignore

This file was deleted.

117 changes: 0 additions & 117 deletions .eslintrc.js

This file was deleted.

8 changes: 4 additions & 4 deletions app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
"dependencies": {
"@emotion/react": "^11.10.8",
"@emotion/styled": "^11.10.8",
"@jbrowse/core": "^2.7.2",
"@mui/material": "^5.14.15",
"@mui/x-data-grid": "^7.3.0",
"@jbrowse/core": "^2.13.1",
"@mui/material": "^5.16.6",
"@mui/x-data-grid": "^7.12.0",
"buffer": "^6.0.3",
"gh-pages": "^6.0.0",
"mobx": "^6.9.0",
Expand All @@ -25,6 +25,6 @@
"react-dom": "^18.2.0",
"react-msaview": "^3.0.0",
"rxjs": "^7.8.1",
"tss-react": "^4.8.3"
"tss-react": "^4.9.12"
}
}
27 changes: 18 additions & 9 deletions app/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react'
import React, { useEffect } from 'react'
import { observer } from 'mobx-react'
import { onSnapshot } from 'mobx-state-tree'
import { isAlive, onSnapshot } from 'mobx-state-tree'
import { MSAView } from 'react-msaview'
import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
import { ThemeProvider } from '@mui/material/styles'
import useMeasure from '@jbrowse/core/util/useMeasure'

// locals
import AppGlobal, { AppModel } from './model'
Expand All @@ -15,8 +16,6 @@ const mymodel = AppGlobal.create(
val ? JSON.parse(val) : { msaview: { type: 'MsaView' } },
)

mymodel.msaview.setWidth(window.innerWidth)

let lastTime = 0
onSnapshot(mymodel, snap => {
const now = Date.now()
Expand All @@ -28,16 +27,26 @@ onSnapshot(mymodel, snap => {
}
})

// Handle window resizing
window.addEventListener('resize', () => {
mymodel.msaview.setWidth(window.innerWidth)
})
// used in ViewContainer files to get the width
export function useWidthSetter(view: { setWidth: (arg: number) => void }) {
const [ref, { width }] = useMeasure()
useEffect(() => {
if (width && isAlive(view)) {
// sets after a requestAnimationFrame
// https://stackoverflow.com/a/58701523/2129219 avoids ResizeObserver
// loop error being shown during development
requestAnimationFrame(() => view.setWidth(width))
}
}, [view, width])
return ref
}

const App = observer(function ({ model }: { model: AppModel }) {
const { msaview } = model
const ref = useWidthSetter(msaview)
return (
<div>
<div style={{ border: '1px solid black', margin: 20 }}>
<div ref={ref} style={{ border: '1px solid black', margin: 20 }}>
<MSAView model={msaview} />
</div>
<div style={{ height: 500 }} />
Expand Down
34 changes: 34 additions & 0 deletions biome.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"linter": {
"rules": {
"suspicious": {
"noApproximativeNumericConstant": "off",
"noExplicitAny": "off",

"noAssignInExpressions": "off"
},
"complexity": {
"useArrowFunction": "off",
"noForEach": "off",
"noBannedTypes": "off"
},

"security": {
"noDangerouslySetInnerHtml": "off"
},
"a11y": {
"useValidAnchor": "off",
"noSvgWithoutTitle": "off",
"useKeyWithMouseEvents": "off",
"useKeyWithClickEvents": "off"
},
"style": {
"noNonNullAssertion": "off",
"useImportType": "off",
"noParameterAssign": "off",
"noUselessElse": "off",
"useNodejsImportProtocol": "off"
}
}
}
}
161 changes: 161 additions & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import { fixupConfigRules } from '@eslint/compat'
import globals from 'globals'
import tsParser from '@typescript-eslint/parser'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import js from '@eslint/js'
import { FlatCompat } from '@eslint/eslintrc'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
})

export default [
{
ignores: [
'**/coverage',
'**/node_modules/',
'**/dist/',
'**/bundle/',
'**/.eslintrc.js',
'lib/output-version.js',
],
},
...fixupConfigRules(
compat.extends(
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-type-checked',
'plugin:@typescript-eslint/stylistic-type-checked',
'plugin:unicorn/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
),
),
{
languageOptions: {
globals: {
...globals.browser,
...globals.node,
...globals.jest,
},

parser: tsParser,
ecmaVersion: 5,
sourceType: 'commonjs',

parserOptions: {
ecmaFeatures: {
jsx: true,
},

project: './tsconfig.json',
},
},

settings: {
react: {
version: 'detect',
},
},

rules: {
'no-redeclare': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-base-to-string': 'off',
'@typescript-eslint/prefer-nullish-coalescing': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-unused-vars': [
'warn',
{
argsIgnorePattern: '^_',
ignoreRestSiblings: true,
caughtErrors: 'none',
},
],
'@typescript-eslint/no-floating-promises': 'error',
'@typescript-eslint/restrict-template-expressions': 'off',
'@typescript-eslint/restrict-plus-operands': 'off',
'@typescript-eslint/no-misused-promises': 'off',
'@typescript-eslint/require-await': 'off',
'@typescript-eslint/unbound-method': 'off',
'@typescript-eslint/no-unused-expressions': 'off',
'@typescript-eslint/no-unsafe-member-access': 'off',
'@typescript-eslint/no-unsafe-argument': 'off',
'@typescript-eslint/no-unsafe-assignment': 'off',
'@typescript-eslint/no-unsafe-call': 'off',
'@typescript-eslint/no-unsafe-return': 'off',
'no-unexpected-multiline': 'error',
'unicorn/no-new-array': 'off',
'unicorn/prefer-type-error': 'off',
'unicorn/prefer-node-protocol': 'off',
'unicorn/no-unreadable-array-destructuring': 'off',
'unicorn/no-abusive-eslint-disable': 'off',
'unicorn/no-array-callback-reference': 'off',
'unicorn/number-literal-case': 'off',
'unicorn/prefer-add-event-listener': 'off',
'unicorn/prefer-top-level-await': 'off',
'unicorn/consistent-function-scoping': 'off',
'unicorn/no-await-expression-member': 'off',
'unicorn/no-lonely-if': 'off',
'unicorn/consistent-destructuring': 'off',
'unicorn/prefer-module': 'off',
'unicorn/prefer-optional-catch-binding': 'off',
'unicorn/no-useless-undefined': 'off',
'unicorn/no-null': 'off',
'unicorn/no-nested-ternary': 'off',
'unicorn/filename-case': 'off',
'unicorn/catch-error-name': 'off',
'unicorn/prevent-abbreviations': 'off',
'unicorn/prefer-code-point': 'off',
'unicorn/numeric-separators-style': 'off',
'unicorn/no-array-for-each': 'off',
'unicorn/prefer-spread': 'off',
'unicorn/explicit-length-check': 'off',
'unicorn/prefer-regexp-test': 'off',
'unicorn/relative-url-style': 'off',
'unicorn/prefer-math-trunc': 'off',
'unicorn/prefer-query-selector': 'off',
'unicorn/switch-case-braces': 'off',
'unicorn/prefer-switch': 'off',
'unicorn/better-regex': 'off',
'unicorn/no-for-loop': 'off',
'unicorn/escape-case': 'off',
'unicorn/prefer-number-properties': 'off',
curly: 'error',
'no-use-before-define': 'off',
'no-global-assign': 'warn',

'no-console': [
'warn',
{
allow: ['error', 'warn'],
},
],

'no-debugger': 'warn',
'no-undef': 'error',
'react/no-danger': 'warn',
'react/prop-types': 'off',
'react/destructuring-assignment': 'error',
'react/no-unused-prop-types': 'error',
'react/no-unused-state': 'error',
'react/prefer-stateless-function': 'error',

'spaced-comment': [
'error',
'always',
{
markers: ['/'],
},
],
},
},
]
Loading

0 comments on commit ccd2ffa

Please sign in to comment.