fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-09-27 18:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

break out load and err

Browse Source
This commit is contained in:
Colin Megill
2021-07-23 13:28:17 -07:00
parent 11570273e0
commit 0a69af98c5
3 changed files with 104 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/dotplot/err.js
+20
View File
@@ -0,0 +1,20 @@
import React from "react";
import * as globals from "../../globals";
const ErrorLoading = ({ error, width, height }) => {
console.log(error); // log to console as this is an unepected error
return (
<div
style={{
position: "fixed",
fontWeight: 500,
top: height / 2,
left: globals.leftSidebarWidth + width / 2 - 50,
}}
>
<span>Failure loading dotplot</span>
</div>
);
};
export default ErrorLoading;
client/src/components/dotplot/index.js
+54 -97
View File
@@ -5,7 +5,9 @@ import Async from "react-async";
import memoize from "memoize-one";
// import * as d3 from "d3";
import * as globals from "../../globals";
import ErrorLoading from "./err";
import StillLoading from "./load";
import { createCategorySummaryFromDfCol } from "../../util/stateManager/controlsHelpers";
import {
@@ -233,109 +235,64 @@ class Dotplot extends React.Component {
left: 0,
}}
>
<Async
watchFn={Dotplot.watchAsync}
promiseFn={this.fetchAsyncProps}
watchProps={{
annoMatrix,
pointDilation,
colors,
viewport,
<svg
style={{
position: "absolute",
top: 0,
left: 0,
zIndex: 1,
}}
width={viewport.width}
height={viewport.height}
>
<Async.Pending initial>
<StillLoading width={viewport.width} height={viewport.height} />
</Async.Pending>
<Async.Rejected>
{(error) => (
<ErrorLoading
width={viewport.width}
height={viewport.height}
error={error}
/>
)}
</Async.Rejected>
<Async.Fulfilled persist>
{(asyncProps) => {
const {
colorAccessor,
categoryData,
width,
height,
categorySummary,
colorData,
} = asyncProps;
return (
<svg
style={{
position: "absolute",
top: 0,
left: 0,
zIndex: 1,
}}
<Async
watchFn={Dotplot.watchAsync}
promiseFn={this.fetchAsyncProps}
watchProps={{
annoMatrix,
pointDilation,
colors,
viewport,
}}
>
<Async.Pending initial>
<StillLoading width={viewport.width} height={viewport.height} />
</Async.Pending>
<Async.Rejected>
{(error) => (
<ErrorLoading
width={viewport.width}
height={viewport.height}
>
{this.dotplot(
"tissue",
categoryData,
categorySummary,
colorAccessor,
colorData,
width,
height
)}
</svg>
);
}}
</Async.Fulfilled>
</Async>
error={error}
/>
)}
</Async.Rejected>
<Async.Fulfilled persist>
{(asyncProps) => {
const {
colorAccessor,
categoryData,
width,
height,
categorySummary,
colorData,
} = asyncProps;
return this.dotplot(
"tissue",
categoryData,
categorySummary,
colorAccessor,
colorData,
width,
height
);
}}
</Async.Fulfilled>
</Async>
</svg>
</div>
);
}
}
const ErrorLoading = ({ error, width, height }) => {
console.log(error); // log to console as this is an unepected error
return (
<div
style={{
position: "fixed",
fontWeight: 500,
top: height / 2,
left: globals.leftSidebarWidth + width / 2 - 50,
}}
>
<span>Failure loading dotplot</span>
</div>
);
};
const StillLoading = ({ width, height }) => {
/*
Render a busy/loading indicator
*/
return (
<div
style={{
position: "fixed",
fontWeight: 500,
top: height / 2,
width,
}}
>
<div
style={{
display: "flex",
justifyContent: "center",
justifyItems: "center",
alignItems: "center",
}}
>
<span style={{ fontStyle: "italic" }}>Loading dotplot</span>
</div>
</div>
);
};
export default Dotplot;
client/src/components/dotplot/load.js
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
const StillLoading = ({ width, height }) => {
/*
Render a busy/loading indicator
*/
return (
<div
style={{
position: "fixed",
fontWeight: 500,
top: height / 2,
width,
}}
>
<div
style={{
display: "flex",
justifyContent: "center",
justifyItems: "center",
alignItems: "center",
}}
>
<span style={{ fontStyle: "italic" }}>Loading dotplot</span>
</div>
</div>
);
};
export default StillLoading;