From b6de3248edd578c3c23d40a186eed1cbaefaa589 Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 20 Mar 2020 17:32:29 -0400 Subject: [PATCH 1/3] Add some react-window to the msa viewer --- package.json | 4 +- src/App.js | 398 +++++++++++++++++++++++++++------------------------ yarn.lock | 45 ++++++ 3 files changed, 262 insertions(+), 185 deletions(-) diff --git a/package.json b/package.json index 2db3f08..3eebefd 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,9 @@ "prop-types": "^15.7.2", "react": "^16.13.0", "react-dom": "^16.13.0", - "react-scripts": "3.4.0" + "react-scripts": "3.4.0", + "react-sizeme": "^2.6.12", + "react-window": "^1.8.5" }, "env": { "browser": true diff --git a/src/App.js b/src/App.js index 4530789..00e786f 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,8 @@ import React, { useState, useRef, useCallback, useEffect } from 'react' import './App.css' import PropTypes from 'prop-types' +import { FixedSizeList as List } from 'react-window' +import { withSize } from 'react-sizeme' import colorSchemes from './colorSchemes' const defaultColorScheme = 'maeditor' @@ -178,6 +180,57 @@ function SpeciesNames({ ) } +Column.propTypes = { + index: PropTypes.number, + style: PropTypes.shape({}), + data: PropTypes.shape({}), +} +function Column(props) { + const { index, style, data } = props + const { nodes, ancestorCollapsed, colorScheme, rowHeights, rowData } = data + return ( +
+ {nodes.map(node => { + return ( +
+ {!ancestorCollapsed[node] && rowData[node] ? ( + + {rowData[node][index]} + + ) : null} +
+ ) + })} +
+ ) +} + +Window.propTypes = { + rowData: PropTypes.any.isRequired, + height: PropTypes.number.isRequired, +} +const SizedWindow = withSize()(function Window(props) { + const { rowData, height, size } = props + const elt = Object.keys(rowData)[0] + return ( + + {Column} + + ) +}) MSARows.propTypes = { nodes: PropTypes.any.isRequired, @@ -187,6 +240,7 @@ MSARows.propTypes = { rowData: PropTypes.any.isRequired, rowHeights: PropTypes.any.isRequired, } + function MSARows({ nodes, style = {}, @@ -196,38 +250,18 @@ function MSARows({ colorScheme, }) { const ref = useRef() + const totalHeight = Object.values(rowHeights).reduce((a, b) => a + b, 0) return (
-
- {nodes.map(node => { - return ( -
- {!ancestorCollapsed[node] && rowData[node] - ? rowData[node].split('').map((c, i) => { - return ( - - {c} - - ) - }) - : null} -
- ) - })} -
+
) } @@ -391,6 +425,7 @@ function MSA({ fontFamily: charFontName, fontSize: `${genericRowHeight}px`, overflow: 'auto', + width: '100%', }} scrollTop={ref.current ? ref.current.scrollTop : 0} colorScheme={colorScheme} @@ -402,165 +437,160 @@ function MSA({ ) - - // return { element: container } } function App() { - const opts = { - root: 'root', - branches: [ - ['node1', 'Q112T8_TRIEI/59-200', 0.46854], - ['node1', 'B7KLQ4_CYAP7/136-277', 0.22403], - ['node2', 'B8M612_TALSN/206-353', 1.40693], - ['node2', 'Q3J777_NITOC/19-161', 0.62262], - ['node3', 'node2', 0.15499], - ['node3', 'node1', 0.33627], - ['node4', 'C3KMH7_SINFN/48-190', 0.49604], - ['node4', 'C1DG58_AZOVD/44-186', 0.25028], - ['node5', 'node4', 0.06679], - ['node5', 'Q3SVR1_NITWN/44-186', 0.3309], - ['node6', 'B8HLS5_CYAP4/14-156', 0.58897], - ['node6', 'B1WNX3_CYAA5/19-161', 0.47743], - ['node7', 'node6', 0.22328], - ['node7', 'Q5P8V6_AROAE/74-216', 0.36091], - ['node8', 'node7', 0.14569], - ['node8', 'node5', 0.20621], - ['node9', 'A5CDW1_ORITB/138-276', 0.50183], - ['node9', 'node8', 0.37567], - ['node10', 'node9', 0.09939], - ['node10', 'node3', 0.13742], - ['node11', 'B8LZ95_TALSN/146-306', 1.41538], - ['node11', 'B3MG73_DROAN/322-472', 2.10673], - ['node12', 'node11', 0.534], - ['node12', 'node10', 0.54887], - ['node35', 'B8FA67_DESAA/174-314', 0.84978], - ['node35', 'B2J3A3_NOSP7/183-342', 1.04359], - ['node13', 'node35', 0.31999], - ['node13', 'node12', 0.14564], - ['node31', 'B0JUR0_MICAN/39-182', 0.63921], - ['node31', 'A8ZPF4_ACAM1/39-182', 0.30855], - ['node28', 'node31', 0.42441], - ['node28', 'Q2SM05_HAHCH/47-193', 0.66539], - ['node14', 'node28', 0.79901], - ['node14', 'node13', 0.15953], - ['node15', 'B8F0C4_THASP/172-315', 0.57733], - ['node15', 'A0R819_PELPD/171-314', 0.3654], - ['node16', 'node15', 0.16561], - ['node16', 'Q12BS7_POLSJ/169-312', 0.66949], - ['node17', 'Q5P1T1_AROAE/182-325', 0.94748], - ['node17', 'A1TXP2_MARHV/168-311', 0.39982], - ['node18', 'node17', 0.16594], - ['node18', 'node16', 0.12196], - ['node30', 'A6LRL5_CLOB8/180-328', 1.12742], - ['node30', 'node18', 0.36768], - ['node19', 'Q6LH76_PHOPR/165-309', 0.40918], - ['node19', 'D3VKI2_XENNA/117-263', 0.29264], - ['node33', 'node19', 0.68671], - ['node33', 'Q10V63_TRIEI/166-315', 1.60582], - ['node20', 'Q9K9X4_BACHD/19-163', 0.71816], - ['node20', 'node33', 0.27629], - ['node21', 'A1WPJ8_VEREI/180-332', 0.49403], - ['node21', 'A1VRC2_POLNA/30-181', 0.30377], - ['node27', 'node21', 0.14517], - ['node27', 'Q01P88_SOLUE/181-333', 0.53324], - ['node29', 'node27', 0.52033], - ['node29', 'Q8ZSE8_NOSS1/20-198', 0.70812], - ['node34', 'A7ILC4_XANP2/116-266', 1.22242], - ['node34', 'node29', 1.52935], - ['node22', 'node34', 0.189], - ['node22', 'node20', 0.05367], - ['node23', 'Q5V1W0_HALMA/25-182', 0.97502], - ['node23', 'D3T269_NATMM/179-319', 0.40294], - ['node24', 'node23', 0.71769], - ['node24', 'D2QCC4_SPILD/162-305', 0.84247], - ['node26', 'node24', 0.39858], - ['node26', 'node22', 0.29225], - ['root', 'node26', 0.02808], - ['root', 'node25', 0], - ['node25', 'node30', 0.10532], - ['node25', 'node14', 0.17052], - ], - rowData: { - 'B7KLQ4_CYAP7/136-277': - 'KRVYLDE.AGFDNRD.DYPYGYSPKGER..CYDLKCGKKRE....RVSWIGALKEGK...ILAP.LTFEGCCNRDLFEA.WLSQSLVPQLEP................GDIIILDNAT..FHKGETIREIVEE...............................AGCELWYL.....PAYSPDLNKIENWWSVLKTWMKQ...MLPEFETVR', - 'Q112T8_TRIEI/59-200': - 'SIVYVDE.AGIDNRE.DYSYDYGVKGKR..LPGMKLGKRTE....RVSWIAAINQEK...MFAS.LTFIRSCNRDLFEN.WLEHCLLPKLHP................GQVIIVDNAT..FHKSVDIEELVAK...............................VKCEIWYL.....PPYSPDFNKIERWWFVLKNWIRP...RLKEFKNFR', - 'Q3J777_NITOC/19-161': - 'RFVYLDE.SGFEPEV.SRRYAYAPKGRR..VYGLISGHRRP....RTSLLAARMDEG...FEAP.FLFEGTCNTAVFNA.WLEKELCPLLNS................NHIVIMDNAP..FHKAVSSREIIKK...............................TGAGILFL.....PPYSPDFNPIEKDFGNIKKIREY..NEHETLENIV', - 'B8M612_TALSN/206-353': - 'DLIFLDE.SIFNEKTGWRRHAYAPIGDD..AEIDADINWGK....TWSICAAMTLEG...YLPCTGIKDGYYSTGDFAD.WLETKLIPALSQIH............QFPMVIVLDNVK..IHTREHVSQIIES...............................AGHLIRYL.....PPYSPNYNPIELTFSVLKSWMKR...NWIFLRETC', - 'Q3SVR1_NITWN/44-186': - 'RLVFIDE.TWTKTNM.APLRGWAPRGQR..IRAKVPHGRWQ....TMTFMAALRHDR...ITAP.WFIEGPINGEAFLL.YIEKVLVPTLRH................GDIVIMDNLG..SHKASAVRRVIRA...............................AGARLFYL.....PKYSPDLNPIEQFFAKFKHWLRK..AAQRTTEAVY', - 'C1DG58_AZOVD/44-186': - 'KLIFVDE.TAASTNL.ARLRGWAPRGER..CRAAIPHGHWK....TTTFTAGLRVDG...LTAP.LVLDGAMNGPVFLA.YVGQVLVPELTP................GDIVVMDNLP..AHKVAGVRQAIEG...............................AGATLRYL.....PPYSPDLNPIEMAFSKLKALLRK..AAARTVPELW', - 'C3KMH7_SINFN/48-190': - 'RLVFIDE.TSTNTKL.TKRSGWAPKGQR..YRAHAPFGSWK....TQTFIAGLRSHG...VVAP.FIVNAPMNRRIFET.WIETQLAPTLSP................GDVVILDNVG..FHKSERAEQMVKA...............................KGAWLLFL.....PPYSPDLNPIEMAFSKLKALLRK..RAARSFDAIA', - 'Q5P8V6_AROAE/74-216': - 'RLRFIDE.SGVNIAM.TRHYGRALRGER..VPDAVPKNHGR....NVTLLGAVSCRG...IDAV.MTVEGPTDAAVFRA.YVDQVLVPALAP................GDIVVMDNLS..AHKVKGIRETIEG...............................AQADLLYL.....PPYSPDWSPIEPCWSKLKTALRA..AKARTREALD', - 'B1WNX3_CYAA5/19-161': - 'NLVFIDE.SGVNLAM.LRLYARSLKGTR..ARGEKPQKRGH....NISIIGALSLEK...ILAF.ANIYGSVNGVTFEA.FIVTELVPKLWT................GACVVMDNAK..IHLGEIVREAIEE...............................AGASLMYL.....PPYSPEFSPIENFWSKVKAILRK..IKARNYKDLI', - 'B8HLS5_CYAP4/14-156': - 'NLVFLDE.MGVLQGM.SRPRGRSRKGQR..VYDLKPFYRGR....RVTVVGAISQTS...ILAM.QTLGKSMTGEDFKQ.FVSEHLVPKLWS................GAVVVMDNLK..AHQVEGIEQMIEA...............................VGARVVYL.....SPYSPEFNPIEHLWWQLKALIRR..FVPKSVEAIT', - 'A5CDW1_ORITB/138-276': - '.LVFIDE.SGIEDNA.CREYGWSIKGTR..CYVNKAYQHKS....RVSMIAGLCNNQ...IIAP.VIFEGNCNKEIFTT.YVETILIKELRP................GQIVIMDNIN..FHKNNTIKVLIES...............................VGCSILFL.....PTYSPDLNPIEHYWFKIKNEIRKVTAQFKD.....', - 'B3MG73_DROAN/322-472': - 'RVVFHDE.RRFNLDG.PDGFSYYFHDLRNYERTLSQRPRGN....SVYIYLMVCVGG........AVHLEVSSAKQRPESCIEAIMRERPNIVGK...........LGSPEFVLQDHNWMSHALPTAQDLLNA...............................EGLKTQKW.....PTIAHDLNIMENVWGWLIREVFDGGRKFSRKDDLI', - 'B8LZ95_TALSN/146-306': - 'SMLFSDF.VNFGLGTTRKAKVFNRKDERLCEDCLQSREEIDKALFHCWAMVGYDYKG...PLIFLETEDNDLSAMSQRD.YISQIIQLHVQPIV............TARRMIYLDNASEVYEHATAPQNMVHAY.............................LDSLHLPYIQ...NPPTSPDLNVLKDVLLLLKKRLQK..RSIGDQIQLK', - 'B2J3A3_NOSP7/183-342': - 'QVWFWDE.SGFSLRV.IRRKNWGKKGKR..KN.VLLLRRCG....RVNVMGAIRESD...RKRV.CFFVKKGNADIFYE.QLQQLNELIKQEWASIGNLGKDFSKHGPKIILILDNAS..FHKRKDIIAKISEE.............................FPNFVLEFL.....PAYSPDYNIIELVWHSCKEYIAH..RLFKSVDELQ', - 'B8FA67_DESAA/174-314': - 'DIWFADE.SGFDGDP.RPRRRWDKKGRK.....TRSTKNGDH..IRMNVIGMVCPRT...GEFF.AIEATNVFTEMFQV.FLDEAKKCIEFER..............ERNILILDNAT..WHKCKTLNWH...................................GFEPLFL.....PPYSPDLNPIERIWLIMKDRWFN.NHISKDRDALI', - 'Q2SM05_HAHCH/47-193': - 'DLYYFDE.SGFSQRS.NLPYGWSPVGQS..TR.LKSYSHSK....RLNVLGFMNRRQ...KLIF.HTTEERVDSAQVVA.LFNKLAESKDPLK...............NAVVLLDNAS..VHRSAEFRRHRWDWM...........................D.KSIWPIYF.....PKYSPELNLIEILWRKVKYNWLP.LGSHETFERLK', - 'A8ZPF4_ACAM1/39-182': - 'DLRYLDE.SGFCLVP.YVPYAWQEKGET.L...GLPSQRSS....RFNVLGLMNRHN...DLTS.YVFDKSITSAVVVA.CIDDFSRTCDQ.................HTVVVMDQAS..VHKNAEIEEKIEDW............................KAKNVEIFWL.....PTYSPHLNLIEIFWRFMKYEWIE.FAAYKCLGSLS', - 'B0JUR0_MICAN/39-182': - 'EIGYLDE.MGGDSKP.CIPEAWQEEKTT.I...KLPPIEGK....RLNILGIMKRDN...QLFY.ETQVGTVTSEIVIN.FLDKYCQNIQK.................KTVIIIDQAS..IHTSEAFMEKLEEW............................EKKNLKIFWL.....PTYSPHLNLIEILWRFLKYEWIE.FSAYKDRKSLL', - 'Q12BS7_POLSJ/169-312': - 'QIYWGDE.MGLRSDH.VSGKSYAPAGQT..PL.IRATGQRF....GCNMISAITNKG...ALAF.MVFEGKFRAPLFVE.FLRRLLKQVEG.................KICLIVDGHP..VHKSGVVKRFVQAN.............................AQRLRLILL.....PGYCPELNPDELLNQDVKTNALG.KSRPANKSEMI', - 'A0R819_PELPD/171-314': - 'EIYWGDE.TGIQTGA.NVERGYSPKGKT..PV.LRQTGRKH....RINMISAITNQG...KVRF.MFYKETMNSKRLIT.FMKRLVKDAGR.................KVYLILDNLK..VHHSHVVMDWLEKH.............................KDKIEVFYL.....PSYSPELNPDEYLNNSLKGRVHS.GERAQNVKQLE', - 'B8F0C4_THASP/172-315': - 'VIYWADE.TAVKEDT.NWIRGFAPAGRT..PV.LEASARWA....KLSMISAITNRG...EIAF.QIVEGTINAERFIE.FLERLIASAAS.................KVFLIVDNLR..VHHAKLVQAWVETR.............................RAQIELFYL.....PPYAPESNPDEYLNHDFKTALRL.EPPSRDDSQLL', - 'A1TXP2_MARHV/168-311': - 'TIYFGDE.ASIRSDY.HSGTTWAPKGET..PI.IRNTGSRF....SINLISAISPRG...ELRF.KTIQGTMNTDAFLG.FLKALVQDADK.................PVFLILDNHP..VHHARRVREYVESL.............................DGKLKLFFL.....PPYSPELNPDESVWGYIKYHHVG.KKIINSKEQLR', - 'Q5P1T1_AROAE/182-325': - 'EILFWDE.SGFRADA.VQGRTWGAKGRT..PV.VAVPGQRQ....SISAASAVSMKG...GFWF.AIYPGALNGELFVD.LLRKLMHRRRK.................PLHLVLDGLP..AHKKAGVKTYVAST.............................QGKLTLHFL.....PGYAPDLNPDELVWSHAKRTGNA.RRPLQKGETLQ', - 'A6LRL5_CLOB8/180-328': - 'VLYSLDE.TGLRTES.DIRRSWSQIGVS..PI.LESNNSHE....GINIIGATEISKNFDTIMDAYPAKHSIKSHEVEV.FLERLLKIHVGK................KVYVLLDNAK..FHTSRIIQDFADAH.............................SEELFLINT.....PRYSPILNPQENIWNKLKNCIFS.TSAFISIDELF', - 'Q10V63_TRIEI/166-315': - 'TVFMIDE.CHLLWGD.ILGYAWGKTDERIE...IAIKNEKE....RQTYYGALDYKT...KEFL.VQEYESGNTKNTIE.FIKYLQKQRPGN................KLAIFWDGAT..YHNSQEFREYLMTIN...........................QYLSEEELLINCTRFAPNAPEQNPVEDIWLQTKNFSIT...FYHLCSSFK', - 'D3VKI2_XENNA/117-263': - 'PLLFRDA.VPPSPST.KLSAGGMKAGKNQVKV.AETTGSRT....RLNLMGALNLQQ...IEETVIREYPTINAKNVVL.FFGAIRETYPLSQ...............KIHLILDGAG..YHRSEIVKFFAEV...............................LNIELHYL.....PPYSPNLNPIERLWKYANEQIRN.NVYFPDAKTFR', - 'Q6LH76_PHOPR/165-309': - 'PLLFMDA.VHPTQAT.KITAGWVKKGVD..KP.IETTGSRT....RLNIVGAIRLGH...LSEAIVDKYKTVNGESIIA.FLNRTRDFYRASG...............TIHLVLDGAG..YHRSFQVVEEAKK...............................LNIELHYL.....PPYSPNLNPIERLWKVMNKHARN.SRYFATAKEFR', - 'Q9K9X4_BACHD/19-163': - 'HLLFQDE.SMIRDYQ.ALQYTWFLKGKQ..RI.IPTYGKHQ....GVKLIGTLNYET...GDVL.CVEEERYDAEAFLR.FLQKVLKHYPTG................KIVMVLDNAR..IHHAKLIEPFLRNH.............................QHRLELVFL.....PPYSPELNLIEGLWKWLKSDVIN.NLFYSSVKEIR', - 'Q8ZSE8_NOSS1/20-198': - 'RTISIDEMTGIQATERLEKDLPMRPGKV..ERREFEYIRHG....TQSLIASFDVAT...GQIVEPTCSDTRTEIDFAL.HIRRTIETDTQAK...............KWHLIMDCLN..THQSESLVRLVAEKEGLNLDLGIKGESGILKSMKSRTTFLSDPAHRIVFHYT.....PKHSSWLNQIEIWFSILVRKLLR.RASFLSQDDLK', - 'Q01P88_SOLUE/181-333': - 'PVVCLDE.KPVTLHADVRPTSPAKPGRE..ARRDNEYERRG....TANVFCAVEPKA...GRHF.TFATPDRSAFEFAH.VVFELAMQYQQAD...............TIHLVLDNLN..IHCLKSLTDAFGMEMG........................CEVWDRFTIHFT.....PKHGSWLNQAEIEIGLFSRQCLG.KRRIPTLISLR', - 'A1VRC2_POLNA/30-181': - 'PVVCMDE.TPRQLIRETREPIAAAPGRP..ERHDYEYERCG....VCNVFMASEPLA...GRRL.TKVTERRTKTDWAV.FVQDIAASYPDAE...............RITLVMDNLN..THTPGSLYEAFSPEQA........................KALWDRFEFVYT.....PKHGSWLNMAEIEINVMVDQCLS..RRIDSIETVR', - 'A1WPJ8_VEREI/180-332': - 'PVVCFDE.SPTQLIGEVRQPIPAEPGQP..LRYDYEYKRNG....TANLFVFLDAHR...SWRR.VKVTERRMAQDFAQ.CMRDLVDIHYPQA..............ERIRLVLDNLS..THTAAALYQSMPPQEA........................RRILQRIEFHYT.....PKHASWLNMVEIEIGVLRRQCLD..RRIDCRERLI', - 'A7ILC4_XANP2/116-266': - 'VLLYGDE.SEALTHP.YLARAWAKSGAD..LR.VPAPGQAK....NVAMLGSLNHAT...RELI.VQTSPTKRSSDFVA.HLQQLDEAYGPKPGR..........AARPVVLVEDNGP..IHTSKLSRAALAAR.............................AHWLTVEWL.....PKYAPELNDIEAVWRDLKAHHLA.HQTFKDSDALD', - 'D2QCC4_SPILD/162-305': - 'VILYIDE.SACYLLP.FVAHTWAPCGQT..PV.LMEQAGRT....HLSLIAAIAANG...QIYV.AGQNQAFTSEDIVW.FLKLLCGRYRKR................NLLIIWDGAA..IHRSNVVKELLRER.............................LGRMHLERL.....PAYSPELNPVELLWSQLKRNLKN..KAFTSLDELT', - 'D3T269_NATMM/179-319': - 'TVVCIDQ.TKKSVQV.EPRAAWFPRGTR..PS.VELSGQRD....WTCLLGAITENG...DRFF.TRFEEYVTAAHAKH.FILALCQEFED.................NLIVVLDGAP..YFQASAVTDLAAR...............................DDLTFVRL.....PAYSPELNPVEECWRQLQAALSN..RFFDSLPELT', - 'Q5V1W0_HALMA/25-182': - 'TVVVVDQ.FTKHVGT.VQRRGFYPIGSN..PT.IEVATSWD....SVTVLGAVTDNG...DSFF.CWTEENLTRNHGIR.LLEALKDRFGE.................ELVVFLDRAG..YFYARDLWEHVSGERETETVG..............DSSVSCVRGDDLEVWYF.....PSKLPELNAVEGCWDQLQEWFKY..RLVPDISSLK', - }, - height: 400 /* to test vertical scrolling */, - collapsed: {}, - } - return (
- +
) } diff --git a/yarn.lock b/yarn.lock index efe381b..3ce4fd2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2184,6 +2184,11 @@ base@^0.11.1: mixin-deep "^1.2.0" pascalcase "^0.1.1" +batch-processor@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8" + integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg= + batch@0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16" @@ -3644,6 +3649,13 @@ electron-to-chromium@^1.3.341, electron-to-chromium@^1.3.349: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.349.tgz#663f26a69d348a462df47b4d7ab162a2f29bbcb7" integrity sha512-uEb2zs6EJ6OZIqaMsCSliYVgzE/f7/s1fLWqtvRtHg/v5KBF2xds974fUnyatfxIDgkqzQVwFtam5KExqywx0Q== +element-resize-detector@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.1.tgz#b0305194447a4863155e58f13323a0aef30851d1" + integrity sha512-BdFsPepnQr9fznNPF9nF4vQ457U/ZJXQDSNF1zBe7yaga8v9AdZf3/NElYxFdUh7SitSGt040QygiTo6dtatIw== + dependencies: + batch-processor "1.0.0" + elliptic@^6.0.0: version "6.5.2" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762" @@ -6461,6 +6473,11 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" +"memoize-one@>=3.1.1 <6": + version "5.1.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" + integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== + memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -8510,6 +8527,24 @@ react-scripts@3.4.0: optionalDependencies: fsevents "2.1.2" +react-sizeme@^2.6.12: + version "2.6.12" + resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e" + integrity sha512-tL4sCgfmvapYRZ1FO2VmBmjPVzzqgHA7kI8lSJ6JS6L78jXFNRdOZFpXyK6P1NBZvKPPCZxReNgzZNUajAerZw== + dependencies: + element-resize-detector "^1.2.1" + invariant "^2.2.4" + shallowequal "^1.1.0" + throttle-debounce "^2.1.0" + +react-window@^1.8.5: + version "1.8.5" + resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1" + integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q== + dependencies: + "@babel/runtime" "^7.0.0" + memoize-one ">=3.1.1 <6" + react@^16.13.0: version "16.13.0" resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7" @@ -9160,6 +9195,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -9793,6 +9833,11 @@ throat@^4.0.0: resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a" integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo= +throttle-debounce@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5" + integrity sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg== + through2@^2.0.0: version "2.0.5" resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd" From c568e0e11162012b307a0eb86f78d78940e3667d Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 20 Mar 2020 17:42:07 -0400 Subject: [PATCH 2/3] Use the react-virtualized autosizer --- package.json | 1 + src/App.js | 37 ++++++++++++++++++++----------------- yarn.lock | 5 +++++ 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 3eebefd..6d3013e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "react-dom": "^16.13.0", "react-scripts": "3.4.0", "react-sizeme": "^2.6.12", + "react-virtualized-auto-sizer": "^1.0.2", "react-window": "^1.8.5" }, "env": { diff --git a/src/App.js b/src/App.js index 00e786f..f05e4e5 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,7 @@ import React, { useState, useRef, useCallback, useEffect } from 'react' import './App.css' import PropTypes from 'prop-types' import { FixedSizeList as List } from 'react-window' -import { withSize } from 'react-sizeme' +import Autosizer from 'react-virtualized-auto-sizer' import colorSchemes from './colorSchemes' const defaultColorScheme = 'maeditor' @@ -213,24 +213,28 @@ function Column(props) { Window.propTypes = { rowData: PropTypes.any.isRequired, - height: PropTypes.number.isRequired, } -const SizedWindow = withSize()(function Window(props) { - const { rowData, height, size } = props +function Window(props) { + const { rowData } = props const elt = Object.keys(rowData)[0] return ( - - {Column} - + + {({ height, width }) => ( + + {Column} + + )} + ) -}) +} MSARows.propTypes = { nodes: PropTypes.any.isRequired, @@ -254,7 +258,7 @@ function MSARows({ return (
-
diff --git a/yarn.lock b/yarn.lock index 3ce4fd2..1021ba6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8537,6 +8537,11 @@ react-sizeme@^2.6.12: shallowequal "^1.1.0" throttle-debounce "^2.1.0" +react-virtualized-auto-sizer@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd" + integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg== + react-window@^1.8.5: version "1.8.5" resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1" From 99699080ea20523cbee7186ee105bca5e8fe3d77 Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 20 Mar 2020 18:25:09 -0400 Subject: [PATCH 3/3] Use grid layout --- src/App.js | 130 ++++++++++++++++++----------------------------------- 1 file changed, 43 insertions(+), 87 deletions(-) diff --git a/src/App.js b/src/App.js index f05e4e5..6a6ff1e 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import React, { useState, useRef, useCallback, useEffect } from 'react' import './App.css' import PropTypes from 'prop-types' -import { FixedSizeList as List } from 'react-window' +import { FixedSizeGrid as Grid } from 'react-window' import Autosizer from 'react-virtualized-auto-sizer' import colorSchemes from './colorSchemes' @@ -180,57 +180,44 @@ function SpeciesNames({ ) } -Column.propTypes = { - index: PropTypes.number, - style: PropTypes.shape({}), - data: PropTypes.shape({}), +Window.propTypes = { + rowData: PropTypes.any.isRequired, + nodes: PropTypes.any.isRequired, } -function Column(props) { - const { index, style, data } = props - const { nodes, ancestorCollapsed, colorScheme, rowHeights, rowData } = data + +const Cell = props => { + const { rowIndex, columnIndex, style, data } = props + const { ancestorCollapsed, colorScheme, rowHeights, rowData } = data + const nodes = Object.keys(rowData) + const letter = rowData[nodes[rowIndex]][columnIndex] return ( -
- {nodes.map(node => { - return ( -
- {!ancestorCollapsed[node] && rowData[node] ? ( - - {rowData[node][index]} - - ) : null} -
- ) - })} +
+ {letter}
) } -Window.propTypes = { - rowData: PropTypes.any.isRequired, -} function Window(props) { const { rowData } = props - const elt = Object.keys(rowData)[0] + const nodes = Object.keys(rowData) + const elt = nodes[0] + return ( {({ height, width }) => ( - - {Column} - + {Cell} + )} ) @@ -243,6 +230,7 @@ MSARows.propTypes = { colorScheme: PropTypes.any, rowData: PropTypes.any.isRequired, rowHeights: PropTypes.any.isRequired, + height: PropTypes.any.isRequired, } function MSARows({ @@ -252,6 +240,7 @@ function MSARows({ rowHeights, rowData, colorScheme, + height, }) { const ref = useRef() const totalHeight = Object.values(rowHeights).reduce((a, b) => a + b, 0) @@ -263,7 +252,7 @@ function MSARows({ rowData={rowData} nodes={nodes} colorScheme={colorScheme} - height={totalHeight} + height={height} rowHeights={rowHeights} />
@@ -390,55 +379,22 @@ function MSA({ }} ref={ref} > -
- { - collapsed[node] = !collapsed[node] - // clone object to trigger re-render - setCollapsed({ ...collapsed }) - }} - nodeChildren={nodeChildren} - nodes={nodes} - nx={nx} - ny={ny} - ancestorCollapsed={ancestorCollapsed} - collapsed={collapsed} - /> - -
- -
- -
+ ) }