Skip to content

Commit

Permalink
fix: do not display "Loading assets" feedback when isRenderedCallback…
Browse files Browse the repository at this point in the history 
… exists (#1882)

The client code can handle the assets loading feedback on its own using
isRenderedCallback. This way it can control the look, feel and layout of
this feedback, and will prevent possible inference with application own
components.

BTW, this default feedback gets centered in the PR.

Viewers team has an example where the feedback component does move the
application components...
  • Loading branch information
@w1nklr
w1nklr authored Jan 22, 2024
1 parent ec9c195 commit 12431d8
Show file tree
Hide file tree
Showing 7 changed files with 358 additions and 252 deletions.
9 changes: 5 additions & 4 deletions typescript/packages/subsurface-viewer/src/SubsurfaceViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,10 @@ export interface SubsurfaceViewerProps {
getCameraPosition?: (input: ViewStateType) => void;

/**
* Will be called after all layers have rendered data.
* Will be called while layers are processed to rendered data.
* @param progress vlaue between 0 and 100.
*/
isRenderedCallback?: (arg: boolean) => void;
onRenderingProgress?: (progress: number) => void;

onDragStart?: (info: PickingInfo, event: MjolnirGestureEvent) => void;
onDragEnd?: (info: PickingInfo, event: MjolnirGestureEvent) => void;
Expand Down Expand Up @@ -143,7 +144,7 @@ const SubsurfaceViewer: React.FC<SubsurfaceViewerProps> = ({
selection,
getTooltip,
getCameraPosition,
isRenderedCallback,
onRenderingProgress,
onDragStart,
onDragEnd,
triggerResetMultipleWells,
Expand Down Expand Up @@ -228,7 +229,7 @@ const SubsurfaceViewer: React.FC<SubsurfaceViewerProps> = ({
getTooltip={getTooltip}
cameraPosition={cameraPosition}
getCameraPosition={getCameraPosition}
isRenderedCallback={isRenderedCallback}
onRenderingProgress={onRenderingProgress}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
triggerHome={triggerHome}
Expand Down
264 changes: 138 additions & 126 deletions typescript/packages/subsurface-viewer/src/__snapshots__/SubsurfaceViewer.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,48 +44,52 @@ exports[`Test Map component snapshot test 1`] = `
style="width: 100px; height: 4px; border: 2px solid; display: inline-block; margin-left: 3px;"
/>
</div>
<div>
<svg
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="c0"
height="48"
preserveAspectRatio="xMidYMid meet"
role="progressbar"
viewBox="24 24 48 48"
width="48"
>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_13, rgba(222, 237, 238, 1))"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_100, rgba(0, 112, 121, 1))"
stroke-dasharray="138.23007675795088"
stroke-linecap="round"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
</svg>
<output
class="c1"
>
Loading 0%
</output>
<br />
Loading assets...
<div
style="display: flex; align-items: flex-end; justify-content: right; position: absolute; height: 90%; width: 90%; bottom: 10px; right: 10px; z-index: 200;"
>
<div>
<svg
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="c0"
height="48"
preserveAspectRatio="xMidYMid meet"
role="progressbar"
viewBox="24 24 48 48"
width="48"
>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_13, rgba(222, 237, 238, 1))"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_100, rgba(0, 112, 121, 1))"
stroke-dasharray="138.23007675795088"
stroke-linecap="round"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
</svg>
<output
class="c1"
>
Loading 0%
</output>
<br />
Loading assets...
</div>
</div>
</div>
`;
Expand Down Expand Up @@ -134,48 +138,52 @@ exports[`Test Map component snapshot test with edited data 1`] = `
style="width: 100px; height: 4px; border: 2px solid; display: inline-block; margin-left: 3px;"
/>
</div>
<div>
<svg
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="c0"
height="48"
preserveAspectRatio="xMidYMid meet"
role="progressbar"
viewBox="24 24 48 48"
width="48"
>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_13, rgba(222, 237, 238, 1))"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_100, rgba(0, 112, 121, 1))"
stroke-dasharray="138.23007675795088"
stroke-linecap="round"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
</svg>
<output
class="c1"
>
Loading 0%
</output>
<br />
Loading assets...
<div
style="display: flex; align-items: flex-end; justify-content: right; position: absolute; height: 90%; width: 90%; bottom: 10px; right: 10px; z-index: 200;"
>
<div>
<svg
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="c0"
height="48"
preserveAspectRatio="xMidYMid meet"
role="progressbar"
viewBox="24 24 48 48"
width="48"
>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_13, rgba(222, 237, 238, 1))"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_100, rgba(0, 112, 121, 1))"
stroke-dasharray="138.23007675795088"
stroke-linecap="round"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
</svg>
<output
class="c1"
>
Loading 0%
</output>
<br />
Loading assets...
</div>
</div>
</div>
`;
Expand Down Expand Up @@ -224,48 +232,52 @@ exports[`Test Map component snapshot test with invalid array length 1`] = `
style="width: 100px; height: 4px; border: 2px solid; display: inline-block; margin-left: 3px;"
/>
</div>
<div>
<svg
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="c0"
height="48"
preserveAspectRatio="xMidYMid meet"
role="progressbar"
viewBox="24 24 48 48"
width="48"
>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_13, rgba(222, 237, 238, 1))"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_100, rgba(0, 112, 121, 1))"
stroke-dasharray="138.23007675795088"
stroke-linecap="round"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
</svg>
<output
class="c1"
>
Loading 0%
</output>
<br />
Loading assets...
<div
style="display: flex; align-items: flex-end; justify-content: right; position: absolute; height: 90%; width: 90%; bottom: 10px; right: 10px; z-index: 200;"
>
<div>
<svg
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="0"
class="c0"
height="48"
preserveAspectRatio="xMidYMid meet"
role="progressbar"
viewBox="24 24 48 48"
width="48"
>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_13, rgba(222, 237, 238, 1))"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
<circle
class=""
cx="48"
cy="48"
fill="none"
r="22"
stroke="var(--eds_infographic_primary__moss_green_100, rgba(0, 112, 121, 1))"
stroke-dasharray="138.23007675795088"
stroke-linecap="round"
stroke-width="4"
style="stroke: 138.230; stroke-dashoffset: 138.230px;"
/>
</svg>
<output
class="c1"
>
Loading 0%
</output>
<br />
Loading assets...
</div>
</div>
</div>
`;
Loading

0 comments on commit 12431d8

Please sign in to comment.