chanzuckerberg / ontology-ui Goto Github PK
View Code? Open in Web Editor NEWOntology visualizer
License: MIT License
Ontology visualizer
License: MIT License
If you open the console, then open the Component drawer, there are many errors generated. A partial list:
Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: Blueprint3.Portal
Learn more about this warning here: https://reactjs.org/link/legacy-context
at Portal (http://localhost:3000/static/js/vendors~main.chunk.js:14410:43)
at Overlay (http://localhost:3000/static/js/vendors~main.chunk.js:12328:43)
at Drawer (http://localhost:3000/static/js/vendors~main.chunk.js:6647:38)
at div
at OntologyExplorer (http://localhost:3000/static/js/main.chunk.js:539:5)
at div
at OntologyExplorer (http://localhost:3000/static/js/main.chunk.js:2177:5)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:124802:29)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:125004:29)
at div
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:124433:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:124054:35)
at App (http://localhost:3000/static/js/main.chunk.js:39:5)
at HotkeysProvider (http://localhost:3000/static/js/vendors~main.chunk.js:18272:21)
console.<computed> @ index.js:1
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
(anonymous) @ react-dom.development.js:11587
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushLegacyContextWarning @ react-dom.development.js:11571
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23819
commitRootImpl @ react-dom.development.js:23005
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
index.js:1 Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: Transition, TransitionGroup
Learn more about this warning here: https://reactjs.org/link/legacy-context
at TransitionGroup (http://localhost:3000/static/js/vendors~main.chunk.js:127118:30)
at Portal (http://localhost:3000/static/js/vendors~main.chunk.js:14410:43)
at Overlay (http://localhost:3000/static/js/vendors~main.chunk.js:12328:43)
at Drawer (http://localhost:3000/static/js/vendors~main.chunk.js:6647:38)
at div
at OntologyExplorer (http://localhost:3000/static/js/main.chunk.js:539:5)
at div
at OntologyExplorer (http://localhost:3000/static/js/main.chunk.js:2177:5)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:124802:29)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:125004:29)
at div
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:124433:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:124054:35)
at App (http://localhost:3000/static/js/main.chunk.js:39:5)
at HotkeysProvider (http://localhost:3000/static/js/vendors~main.chunk.js:18272:21)
Presently, the force layout resets quite a bit when user input which causes the graph to re-render, such as 'draw hulls', are activated. This likely means we need to tweak alpha to encourage more shifting around ahead of time.
The tradeoff here is that if this means the graph wiggles longer, it may be longer until we can enable controls which require the graph to converge
Or, we can be more clever about how we pass state to the canvas drawing function.
https://github.com/d3/d3-force#simulation_alphaDecay
From the docs:
If decay is specified, sets the alpha decay rate to the specified number in the range [0,1] and returns this simulation. If decay is not specified, returns the current alpha decay rate, which defaults to 0.0228… = 1 - pow(0.001, 1 / 300) where 0.001 is the default minimum alpha.
In cases where there are very rapid updates (eg, the user moves the mouse rapidly through many graph vertices), the left side bar updates need to be debounced.
The force graph rendered in canvas is not responsive. This is a problem because it does not properly utilize the available space, which is determined by the available area and the size of the graph to be displayed. The implementation must:
1280px non retina laptop --> 4k large monitor
)<10 celltypes --> >3000 cell types
)Pablo proposes Wilcoxon rank sum test
The placeholder text always says "cell type search", regardless of the ontology being displayed.
Perhaps it should say "search ontology" or something like that?
fix scrollbar (cellxgene style full height responsive page with single pixel border)
Need API surface that:
Search criteria -- likely needs are:
Selecting an Uberon term in the search field subsets graph to selected CL terms
This subset also applies if user has subset by ancestor in CL, as in this case, subset to neuron:
Update to a version of craco that is compatible with CRA 5.
Example: https://www.npmjs.com/package/@craco/craco/v/7.0.0-alpha.3
Details: dilanx/craco#378
ie., "less than 10% (n%) of the entire cellxgene corpus"
h/t @maniarathi
Lots of blueprintjs errors from the use of popover2. Unfortunately, will not be fixed until mid-2022 with Blueprint 5.
Ref: https://github.com/palantir/blueprint/wiki/Blueprint-5.0
and palantir/blueprint#3979
Example:
Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: Blueprint4.Portal
Learn more about this warning here: https://reactjs.org/link/legacy-context
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
etc.
There are a number of graph filtering steps done in the front-end, eg, removing terms from CL that are likely not useful. These should all migrate to the create graph script.
Should also add whitelist - item to seed the graph with (beyond that which is in the dataset). This would generalize the currently hardcoded whitelist of CL & UBERON.
when the application receives an ontology on load up, various scales will need to know about the extents [min, max]
of certain numeric parameters like n_cells
this suggests that whatever graph is being loaded up, like cl, might also have 'top level' attributes that hint components
https://www.ebi.ac.uk/ols/docs/api#search seems to provide everything the lattice xref does, and would reduce our graph size dramatically.
There are a bunch of packages which are outdated and need updating. This issue tracks the list, and any blockers that we need to do first.
Rather than subsetting, a substring match on endothelial
or a range for "all cells with more than 1,000,000 count" would allow removal. This would be contrasted with subsetting operations which subset to a root node or compartment.
h/t Norbert Tavares
document and formalize the DAG route params and query params, and their side effects.
First cut (param names may change):
To facilitate sharing screenshots and using the ontology viewer for publications, better, sharper hulls and layout will help.
For example, via: https://www.sciencedirect.com/science/article/abs/pii/S0092867421005018
h/t Norbert Tavares
This code was removed after Tabula Sapiens hardcoded stuff was removed, but for posterity, the ideas are to add a label to the graph given an arbitrary set of cell types, as would exist in an arbitrary dataset being compared against the reference of 'every cell type'
/**
* check 'current' dataset distribution in ontology
*/
const currentDatasetCelltypes = null;
if (currentDatasetCelltypes && currentDatasetCelltypes.includes(node.id)) {
context.fillStyle = datasetDistributionColor;
}
and
/**
* Draw text on nodes, for alpha, this writes tabula sapiens nodes out
*/
if (showTabulaSapiensDataset) {
for (const node of nodes) {
if (tabulaSapiensCelltypes.includes(node.id)) {
const vertex: any = ontology.get(node.id);
if (vertex && vertex.label && typeof vertex.label === "string") {
context.fillStyle = tooltipColor;
context.font = "18px serif";
if (typeof node.x !== "number" || typeof node.y !== "number") {
console.log(
"in drawForceDag/ticked: while attempting to context.fillText, node.x or node.y was not a number"
);
return;
}
context.fillText(`${vertex.label.substring(0, 10)}`, node.x, node.y);
}
}
}
}
react-helmet is unmaintained and no longer compatible with recent React versions. There is a fork react-helmet-async
which should be used instead.
This change will resolve the startup error message seen in the console:
Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
Please update the following components: SideEffect(NullComponent)
For more details, see:
Graph load and graph layout are very slow. It can take minutes in some cases, 10's of seconds commonly.
Areas of work needed:
In addition to speedup, it may be beneficial to move some of it out of the main thread.
to “x-ref to uberon” or "cross reference to ONT" whatever ONT is.
add new term to ontology explorer — related terms ontology, it’s the ontology that you search in for any related terms, when you’re in CL, you would xref to uberon
Partially implemented in #60
DAG view should have params:
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
at OntologyExplorer (http://localhost:3000/static/js/main.chunk.js:2177:5)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:122394:29)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:122596:29)
at div
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:122025:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:121646:35)
at App (http://localhost:3000/static/js/main.chunk.js:39:5)
at HotkeysProvider (http://localhost:3000/static/js/vendors~main.chunk.js:17958:21)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.