Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Update spaital analytics #990

Merged
merged 1 commit into from
Jun 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 28 additions & 19 deletions client/src/components/graph/graph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -389,13 +389,18 @@ class Graph extends React.Component<GraphProps, GraphState> {
};

handleGoHome = () => {
track(EVENTS.EXPLORER_RE_CENTER_EMBEDDING);
const { camera } = this.state;

camera?.goHome(this.openseadragon);
this.renderCanvas();
};

handleRecenterButtonClick = () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

create an explicit button click handler, so the tracking event can happen exclusively at click time

track(EVENTS.EXPLORER_RE_CENTER_EMBEDDING);

this.handleGoHome();
};

handleCanvasEvent: MouseEventHandler<HTMLCanvasElement> = (e) => {
const { camera, projectionTF } = this.state;
if (e.type !== "wheel") e.preventDefault();
Expand All @@ -418,7 +423,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
}
};

handleBrushDragAction(): void {
async handleBrushDragAction(): Promise<void> {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bunch of methods that are not awaiting the promises according to the new lint rule

/*
event describing brush position:
@-------|
Expand All @@ -440,7 +445,8 @@ class Graph extends React.Component<GraphProps, GraphState> {
const southeast = this.mapScreenToPoint(s[1]);
const [minX, maxY] = northwest;
const [maxX, minY] = southeast;
dispatch(

await dispatch(
actions.graphBrushChangeAction(layoutChoice?.current, {
minX,
minY,
Expand All @@ -459,7 +465,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
dispatch(actions.graphBrushStartAction());
}

handleBrushEndAction(): void {
async handleBrushEndAction(): Promise<void> {
const { camera } = this.state;
// Ignore programmatically generated events. Also abort if camera not initialized.
if (!d3.event.sourceEvent || !camera) return;
Expand All @@ -474,7 +480,8 @@ class Graph extends React.Component<GraphProps, GraphState> {
const southeast = this.mapScreenToPoint(s[1]);
const [minX, maxY] = northwest;
const [maxX, minY] = southeast;
dispatch(

await dispatch(
actions.graphBrushEndAction(layoutChoice?.current, {
minX,
minY,
Expand All @@ -485,13 +492,13 @@ class Graph extends React.Component<GraphProps, GraphState> {
})
);
} else {
dispatch(actions.graphBrushDeselectAction(layoutChoice?.current));
await dispatch(actions.graphBrushDeselectAction(layoutChoice?.current));
}
}

handleBrushDeselectAction(): void {
async handleBrushDeselectAction(): Promise<void> {
const { dispatch, layoutChoice } = this.props;
dispatch(actions.graphBrushDeselectAction(layoutChoice?.current));
await dispatch(actions.graphBrushDeselectAction(layoutChoice?.current));
}

handleLassoStart(): void {
Expand All @@ -500,17 +507,17 @@ class Graph extends React.Component<GraphProps, GraphState> {
}

// when a lasso is completed, filter to the points within the lasso polygon
handleLassoEnd(polygon: [number, number][]): void {
async handleLassoEnd(polygon: [number, number][]): Promise<void> {
const minimumPolygonArea = 10;
const { dispatch, layoutChoice } = this.props;
if (
polygon.length < 3 ||
Math.abs(d3.polygonArea(polygon)) < minimumPolygonArea
) {
// if less than three points, or super small area, treat as a clear selection.
dispatch(actions.graphLassoDeselectAction(layoutChoice?.current));
await dispatch(actions.graphLassoDeselectAction(layoutChoice?.current));
} else {
dispatch(
await dispatch(
actions.graphLassoEndAction(
layoutChoice?.current,
polygon.map((xy) => this.mapScreenToPoint(xy))
Expand All @@ -519,20 +526,22 @@ class Graph extends React.Component<GraphProps, GraphState> {
}
}

handleLassoCancel(): void {
async handleLassoCancel(): Promise<void> {
const { dispatch, layoutChoice } = this.props;
dispatch(actions.graphLassoCancelAction(layoutChoice?.current));

await dispatch(actions.graphLassoCancelAction(layoutChoice?.current));
}

handleLassoDeselectAction(): void {
async handleLassoDeselectAction(): Promise<void> {
const { dispatch, layoutChoice } = this.props;
dispatch(actions.graphLassoDeselectAction(layoutChoice?.current));

await dispatch(actions.graphLassoDeselectAction(layoutChoice?.current));
}

handleDeselectAction(): void {
async handleDeselectAction(): Promise<void> {
const { selectionTool } = this.props;
if (selectionTool === "brush") this.handleBrushDeselectAction();
if (selectionTool === "lasso") this.handleLassoDeselectAction();
if (selectionTool === "brush") await this.handleBrushDeselectAction();
if (selectionTool === "lasso") await this.handleLassoDeselectAction();
}

async handleImageDownload(regl: GraphState["regl"]) {
Expand Down Expand Up @@ -1276,7 +1285,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
>
{isSpatialMode(this.props) && isImageLayerInViewport === false && (
<Button
onClick={this.handleGoHome}
onClick={this.handleRecenterButtonClick}
type="button"
style={{
justifyContent: "center",
Expand Down
8 changes: 6 additions & 2 deletions client/src/components/menubar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -436,9 +436,13 @@ class MenuBar extends React.PureComponent<{}, State> {
active={imageUnderlay}
onClick={() => {
track(
/**
* (thuang): If `imageUnderlay` is currently `true`, then
* we're about to deselect it thus firing the deselection event.
*/
imageUnderlay
? EVENTS.EXPLORER_IMAGE_SELECT
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

flip the event names

: EVENTS.EXPLORER_IMAGE_DESELECT
? EVENTS.EXPLORER_IMAGE_DESELECT
: EVENTS.EXPLORER_IMAGE_SELECT
);
dispatch({
type: "toggle image underlay",
Expand Down
2 changes: 1 addition & 1 deletion client/src/util/catLabelSort.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const catLabelSort = (
const ints: (string | number | boolean)[] = [];
const unassignedOrNaN: (string | number | boolean)[] = [];

values.forEach((v) => {
values?.forEach((v) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

coincidentally caught this bug when the left side bar failed to load the categories

if (isUserAnno && v === globals.unassignedCategoryLabel) {
unassignedOrNaN.push(v);
} else if (String(v).toLowerCase() === "nan") {
Expand Down
Loading