Tag selector performance overhaul

- Use react-virtualized to render tags on demand, reducing the number
  of DOM elements from potentially tens of thousands to <100. This
  requires tags to be absolutely positioned, so sizing and
  positioning need to be precomputed rather than relying on CSS.
- Avoid unnecessary refreshes, speed up tag retrieval, and optimize
  sorting
- Debounce reflowing when resizing tag selector

Also:

- Scroll to top when changing collections
- Allow tags to take up full width of tag selector without truncation

Closes #1649
Closes #281
This commit is contained in:
Dan Stillman 2019-03-28 05:19:41 -04:00
parent c52589f96b
commit d9cee322cd
18 changed files with 959 additions and 270 deletions

View file

@ -29,16 +29,24 @@ async function babelWorker(ev) {
try {
let contents = await fs.readFile(sourcefile, 'utf8');
// Patch react
if (sourcefile === 'resource/react.js') {
// patch react
transformed = contents.replace('instanceof Error', '.constructor.name == "Error"')
} else if (sourcefile === 'resource/react-dom.js') {
// and react-dom
}
// Patch react-dom
else if (sourcefile === 'resource/react-dom.js') {
transformed = contents.replace(/ ownerDocument\.createElement\((.*?)\)/gi, 'ownerDocument.createElementNS(HTML_NAMESPACE, $1)')
.replace('element instanceof win.HTMLIFrameElement',
'typeof element != "undefined" && element.tagName.toLowerCase() == "iframe"')
.replace("isInputEventSupported = false", 'isInputEventSupported = true');
} else if ('ignore' in options && options.ignore.some(ignoreGlob => multimatch(sourcefile, ignoreGlob).length)) {
}
// Patch react-virtualized
else if (sourcefile === 'resource/react-virtualized.js') {
transformed = contents.replace('scrollDiv = document.createElement("div")', 'scrollDiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div")')
.replace('document.body.appendChild(scrollDiv)', 'document.documentElement.appendChild(scrollDiv)')
.replace('document.body.removeChild(scrollDiv)', 'document.documentElement.removeChild(scrollDiv)');
}
else if ('ignore' in options && options.ignore.some(ignoreGlob => multimatch(sourcefile, ignoreGlob).length)) {
transformed = contents;
isSkipped = true;
} else {