Skip to content

Commit

Permalink
Feature: Add visited index and add dropdown icon to open non-animated…
Browse files Browse the repository at this point in the history
… flow. (#887)

* Add icon to the json.
Fix callers and click handlers.

* Revert changes.

* Fix line not redrawing issue.

* Remove user icon on hover.

* Draw grey circle.

* Dont clear flow in interactive mode.

* Fix click event for dropdown icon.

* Fix removal of previous and next icon in the extension.

* Fix undefined bug.

* Add text style.

* Fix reset button functioning.

* Do not show icon while hovering over controls and bubbles.

* Do not show icon while hovering over controls and bubbles.

* Remove drop down icon when using interactive mode.

* Render usericon while using previous and next button in interactive mode.
  • Loading branch information
amovar18 authored Dec 11, 2024
1 parent ec21243 commit 1b463d5
Show file tree
Hide file tree
Showing 13 changed files with 209 additions and 83 deletions.
2 changes: 1 addition & 1 deletion packages/explorable-explanations/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<main>
<div id="ps-canvas">
<div id="canvas-container">
<div class="controls">
<div id="controls-div" class="controls">
<button id="previous-div" disabled class="play-pause-button">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px"
fill="#808080">
Expand Down
3 changes: 2 additions & 1 deletion packages/explorable-explanations/src/icons.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@
"pause": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAZhJREFUeF7tm00OgjAQRoeb6Ukk0QW3UG/BAhM8idwMg9EgP+1IpyVGn4mrqlOfrx8w1Ex4eAlk8PETAJBiCIAAZAsRDMIgDLIRwCAbPzIIgzDIRgCDbPzIoFQG5YdiIyLd0/po6qps5j5kjRra5IMNyg/FqW3lqBXQxrNMznVVnhyAktdQ56e9wDUOIIUcgAD0IJAig2YD98l7EuqBGRSthhYxsQE110u5dRXd7Yt2PBYC6HopnfPe7Yvb+OjqqwGgbpl4jpQAAtDQAZaYiJBBTylc51oAAlCfGxzm3zKU8yARThRfQjgCFEAA0s69/UcYDMIgDBoQoN2hCAEgANEPGjhAu4N2Ry8E7Q6lHQogAE36xdz24b4YF6ufXYzRDwrbvEC7g3bHZytMWGIssST7g8ggJYO64Wibmzzb/KLV0BIldsNMqzcZD7mzurTIN+0PWjp37+amNTaKahPGoJVbrtoP8ldLjL8iLNbhB98QnEE/yGL2KwEoVUhj0L8QwCDbL00GYRAG2QhgkI0fGYRBGGQjgEE2fnfmq4R2jqXwowAAAABJRU5ErkJggg==",
"completedCheckMark": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAyNyAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjQ5OTkgMjYuNDE2N0MxMS43MTMxIDI2LjQxNjcgMTAuMDMzOSAyNi4wNzc2IDguNDYyNDIgMjUuMzk5NUM2Ljg5MDg5IDI0LjcyMTQgNS41MjM4OCAyMy44MDExIDQuMzYxMzggMjIuNjM4NkMzLjE5ODg4IDIxLjQ3NjEgMi4yNzg1NiAyMC4xMDkxIDEuNjAwNDQgMTguNTM3NUMwLjkyMjMxNCAxNi45NjYgMC41ODMyNTIgMTUuMjg2OCAwLjU4MzI1MiAxMy41QzAuNTgzMjUyIDExLjcxMzIgMC45MjIzMTQgMTAuMDM0MSAxLjYwMDQ0IDguNDYyNTRDMi4yNzg1NiA2Ljg5MTAxIDMuMTk4ODggNS41MjQgNC4zNjEzOCA0LjM2MTVDNS41MjM4OCAzLjE5OSA2Ljg5MDg5IDIuMjc4NjkgOC40NjI0MiAxLjYwMDU2QzEwLjAzMzkgMC45MjI0MzcgMTEuNzEzMSAwLjU4MzM3NCAxMy40OTk5IDAuNTgzMzc0QzE0Ljg5OTIgMC41ODMzNzQgMTYuMjIzMiAwLjc4Nzg4OCAxNy40NzE4IDEuMTk2OTJDMTguNzIwNCAxLjYwNTk0IDE5Ljg3MjEgMi4xNzY0MyAyMC45MjcgMi45MDgzN0wxOS4wNTQxIDQuODEzNThDMTguMjM2IDQuMjk2OTIgMTcuMzY0MiAzLjg5MzI3IDE2LjQzODUgMy42MDI2NEMxNS41MTI4IDMuMzEyMDIgMTQuNTMzMyAzLjE2NjcxIDEzLjQ5OTkgMy4xNjY3MUMxMC42MzY3IDMuMTY2NzEgOC4xOTg3IDQuMTczMTMgNi4xODU4NiA2LjE4NTk4QzQuMTczMDEgOC4xOTg4MyAzLjE2NjU5IDEwLjYzNjggMy4xNjY1OSAxMy41QzMuMTY2NTkgMTYuMzYzMiA0LjE3MzAxIDE4LjgwMTMgNi4xODU4NiAyMC44MTQxQzguMTk4NyAyMi44MjcgMTAuNjM2NyAyMy44MzM0IDEzLjQ5OTkgMjMuODMzNEMxNi4zNjMxIDIzLjgzMzQgMTguODAxMSAyMi44MjcgMjAuODE0IDIwLjgxNDFDMjIuODI2OCAxOC44MDEzIDIzLjgzMzMgMTYuMzYzMiAyMy44MzMzIDEzLjVDMjMuODMzMyAxMy4xMTI1IDIzLjgxMTcgMTIuNzI1IDIzLjc2ODcgMTIuMzM3NUMyMy43MjU2IDExLjk1IDIzLjY2MSAxMS41NzMzIDIzLjU3NDkgMTEuMjA3M0wyNS42NzM5IDkuMTA4MzdDMjUuOTEwNyA5Ljc5NzI2IDI2LjA5MzcgMTAuNTA3NyAyNi4yMjI4IDExLjIzOTZDMjYuMzUyIDExLjk3MTYgMjYuNDE2NiAxMi43MjUgMjYuNDE2NiAxMy41QzI2LjQxNjYgMTUuMjg2OCAyNi4wNzc1IDE2Ljk2NiAyNS4zOTk0IDE4LjUzNzVDMjQuNzIxMyAyMC4xMDkxIDIzLjgwMSAyMS40NzYxIDIyLjYzODUgMjIuNjM4NkMyMS40NzYgMjMuODAxMSAyMC4xMDg5IDI0LjcyMTQgMTguNTM3NCAyNS4zOTk1QzE2Ljk2NTkgMjYuMDc3NiAxNS4yODY3IDI2LjQxNjcgMTMuNDk5OSAyNi40MTY3Wk0xMS42OTE2IDE5LjQ0MTdMNi4yMDIgMTMuOTUyMUw4LjAxMDMzIDEyLjE0MzhMMTEuNjkxNiAxNS44MjVMMjQuNjA4MyAyLjg3NjA4TDI2LjQxNjYgNC42ODQ0MkwxMS42OTE2IDE5LjQ0MTdaIiBmaWxsPSIjMUE3M0U4Ii8+Cjwvc3ZnPgo=",
"expand": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJtNDgwLTM0MCAxODAtMTgwLTU3LTU2LTEyMyAxMjMtMTIzLTEyMy01NyA1NiAxODAgMTgwWm0wIDI2MHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIi8+PC9zdmc+",
"info": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNNDQwLTI4MGg4MHYtMjQwaC04MHYyNDBabTQwLTMyMHExNyAwIDI4LjUtMTEuNVQ1MjAtNjQwcTAtMTctMTEuNS0yOC41VDQ4MC02ODBxLTE3IDAtMjguNSAxMS41VDQ0MC02NDBxMCAxNyAxMS41IDI4LjVUNDgwLTYwMFptMCA1MjBxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIvPjwvc3ZnPg=="
"info": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNNDQwLTI4MGg4MHYtMjQwaC04MHYyNDBabTQwLTMyMHExNyAwIDI4LjUtMTEuNVQ1MjAtNjQwcTAtMTctMTEuNS0yOC41VDQ4MC02ODBxLTE3IDAtMjguNSAxMS41VDQ0MC02NDBxMCAxNyAxMS41IDI4LjVUNDgwLTYwMFptMCA1MjBxLTgzIDAtMTU2LTMxLjVUMTk3LTE5N3EtNTQtNTQtODUuNS0xMjdUODAtNDgwcTAtODMgMzEuNS0xNTZUMTk3LTc2M3E1NC01NCAxMjctODUuNVQ0ODAtODgwcTgzIDAgMTU2IDMxLjVUNzYzLTc2M3E1NCA1NCA4NS41IDEyN1Q4ODAtNDgwcTAgODMtMzEuNSAxNTZUNzYzLTE5N3EtNTQgNTQtMTI3IDg1LjVUNDgwLTgwWm0wLTgwcTEzNCAwIDIyNy05M3Q5My0yMjdxMC0xMzQtOTMtMjI3dC0yMjctOTNxLTEzNCAwLTIyNyA5M3QtOTMgMjI3cTAgMTM0IDkzIDIyN3QyMjcgOTNabTAtMzIwWiIvPjwvc3ZnPg==",
"openWithoutAnimation": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNNDgwLTIwMCAyNDAtNDQwbDU2LTU2IDE4NCAxODMgMTg0LTE4MyA1NiA1Ni0yNDAgMjQwWm0wLTI0MEwyNDAtNjgwbDU2LTU2IDE4NCAxODMgMTg0LTE4MyA1NiA1Ni0yNDAgMjQwWiIvPjwvc3ZnPg=="
}
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ const app = {
visitedIndexOrder: [],
visitedIndexOrderTracker: -1,
isRevisitingNodeInInteractiveMode: false,
usedNextOrPrev: false,
canvasEventListerners: {
main: {
mouseOver: {},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,13 +100,13 @@ const ProgressLine = ({
let targetX = x2;

return new Promise((resolve) => {
if (noAnimation || app.isRevisitingNodeInInteractiveMode) {
drawInstantly();
resolve(returnCoordinates);
return;
}

const animate = () => {
if (noAnimation || app.isRevisitingNodeInInteractiveMode) {
drawInstantly();
resolve(returnCoordinates);
return;
}

if (app.cancelPromise) {
resolve();
return;
Expand Down
18 changes: 12 additions & 6 deletions packages/explorable-explanations/src/protectedAudience/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@ app.handleInteractivePrev = () => {

app.isRevisitingNodeInInteractiveMode = true;
app.timeline.currentIndex = visitedIndex;
app.usedNextOrPrev = true;

app.drawFlows(visitedIndex);

Expand All @@ -258,7 +259,7 @@ app.handleInteractivePrev = () => {
flow.setButtonsDisabilityState();

utils.wipeAndRecreateMainCanvas();
app.up.clear();
utils.wipeAndRecreateUserCanvas();
timeline.renderUserIcon();
promiseQueue.skipTo(0);
promiseQueue.start();
Expand Down Expand Up @@ -345,6 +346,7 @@ app.handleInteravtiveNext = () => {

app.isRevisitingNodeInInteractiveMode = true;
app.timeline.currentIndex = visitedIndex;
app.usedNextOrPrev = true;

app.drawFlows(visitedIndex);

Expand All @@ -359,7 +361,7 @@ app.handleInteravtiveNext = () => {
flow.setButtonsDisabilityState();

utils.wipeAndRecreateMainCanvas();
app.up.clear();
utils.wipeAndRecreateUserCanvas();
timeline.renderUserIcon();
promiseQueue.skipTo(0);
promiseQueue.start();
Expand All @@ -380,6 +382,7 @@ app.handleControls = () => {

// eslint-disable-next-line no-undef
if (process.env.IS_RUNNING_STANDALONE) {
app.controlsDiv = document.getElementById('controls-div');
app.nextButton = document.getElementById('next-div');
app.prevButton = document.getElementById('previous-div');
app.prevButton.addEventListener('click', app.handlePrevButton);
Expand Down Expand Up @@ -473,6 +476,7 @@ export const sketch = (p) => {
p.pauseIcon = p.loadImage(icons.pause);
p.expandIcon = p.loadImage(icons.expand);
p.infoIcon = p.loadImage(icons.info);
p.openWithoutAnimation = p.loadImage(icons.openWithoutAnimation);

p.completedCheckMark = p.loadImage(icons.completedCheckMark);
};
Expand Down Expand Up @@ -518,7 +522,7 @@ export const userSketch = (p) => {
};
};

app.reset = async () => {
app.reset = async (callFromExtension = false) => {
promiseQueue.stop();
app.cancelPromise = true;
app.timeline.isPaused = true;
Expand All @@ -533,9 +537,11 @@ app.reset = async () => {
utils.markVisitedValue(config.timeline.circles.length, false);
timeline.eraseAndRedraw();
await utils.delay(1000);
setupInterestGroupCanvas(app.igp);
setupUserCanvas(app.up);
setupMainCanvas(app.p);
if (!callFromExtension) {
setupInterestGroupCanvas(app.igp);
setupUserCanvas(app.up);
setupMainCanvas(app.p);
}

app.timeline.isPaused = true;
app.cancelPromise = false;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -502,6 +502,7 @@ auction.draw = (index) => {
if (callBack) {
callBack(returnValue);
}

if (!app.isRevisitingNodeInInteractiveMode) {
if (app.cancelPromise) {
return;
Expand All @@ -512,7 +513,7 @@ auction.draw = (index) => {
}

promiseQueue.add(() => {
if (!app.isRevisitingNodeInInteractiveMode) {
if (!app.isRevisitingNodeInInteractiveMode || !app.isInteractiveMode) {
flow.clearBelowTimelineCircles();
}
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ flow.getTimelineCircleCoordinates = (index) => {

const positions = app.timeline.circlePositions[index];

if (app.isRevisitingNodeInInteractiveMode) {
return { x: positions.x, y: positions.y + 20 + diameter / 2 };
}

return { x: positions.x, y: positions.y + diameter / 2 };
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ joinInterestGroup.draw = (index) => {
});

promiseQueue.add(() => {
if (!app.isRevisitingNodeInInteractiveMode) {
if (!app.isRevisitingNodeInInteractiveMode || !app.isInteractiveMode) {
flow.clearBelowTimelineCircles();
}
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,23 +48,46 @@ timeline.init = () => {
if (!app.isInteractiveMode) {
return;
}

const { offsetX, offsetY } = event;
let hoveringOnExpandIconPositions = false;

app.timeline.expandIconPositions.forEach((positions) => {
if (
utils.isInsideCircle(
offsetX,
offsetY,
positions.x - 10,
positions.y + config.timeline.circleProps.diameter / 2,
20
)
) {
hoveringOnExpandIconPositions = true;
}
});

app.mouseX = offsetX;
app.mouseY = offsetY;

if (!app.shouldRespondToClick) {
return;
}

if (
hoveringOnExpandIconPositions ||
utils.isOverControls(event.clientX, event.clientY)
) {
app.startTrackingMouse = false;
} else {
app.startTrackingMouse = true;
}

utils.wipeAndRecreateUserCanvas();
timeline.renderUserIcon();
};

app.p.mouseClicked = () => {
if (!app.isInteractiveMode) {
return;
}
if (!app.shouldRespondToClick) {
if (!app.isInteractiveMode || !app.shouldRespondToClick) {
return;
}

Expand All @@ -85,13 +108,15 @@ timeline.init = () => {
}
});

app.usedNextOrPrev = false;

expandIconPositions.forEach((positions) => {
if (
utils.isInsideCircle(
app.mouseX,
app.mouseY,
positions.x + config.timeline.circleProps.diameter / 2,
positions.y,
positions.x - 10,
positions.y + config.timeline.circleProps.diameter / 2,
20
)
) {
Expand Down Expand Up @@ -120,10 +145,13 @@ timeline.init = () => {
app.p.stroke(config.timeline.colors.grey);

config.timeline.circles.forEach((circle, index) => {
app.p.push();
app.p.stroke(config.timeline.colors.grey);
timeline.drawCircle(
index,
circle.visited && index !== clickedIndex ? true : false
);
app.p.pop();

if (circle.visited && index === clickedIndex) {
const position = circlePositions[clickedIndex];
Expand Down Expand Up @@ -209,17 +237,30 @@ timeline.init = () => {
) {
promiseQueue.clear();
flow.clearBelowTimelineCircles();

if (config.timeline.circles[clickedIndex].type === 'advertiser') {
app.joinInterestGroup.joinings[clickedIndex][0].props.y1 += 20;
} else {
app.auction.auctions[clickedIndex][0].props.y1 += 20;
}

app.shouldRespondToClick = false;
app.drawFlows(clickedIndex);

promiseQueue.add(() => {
app.shouldRespondToClick = true;
timeline.renderUserIcon();
app.isRevisitingNodeInInteractiveMode = false;
if (config.timeline.circles[clickedIndex].type === 'advertiser') {
app.joinInterestGroup.joinings[clickedIndex][0].props.y1 -= 20;
} else {
app.auction.auctions[clickedIndex][0].props.y1 -= 20;
}
});

promiseQueue.skipTo(0);
promiseQueue.start();

utils.wipeAndRecreateUserCanvas();
utils.wipeAndRecreateMainCanvas();
return;
Expand Down Expand Up @@ -332,36 +373,54 @@ timeline.drawTimelineLine = () => {
};

timeline.drawCircle = (index, completed = false) => {
const { circleProps, user } = config.timeline;
const { circleProps, user, circles, colors } = config.timeline;
const position = app.timeline.circlePositions[index];
const { diameter } = circleProps;

app.p.circle(position.x, position.y, diameter);

if (completed) {
if (app.isInteractiveMode) {
// app.up.text(
// circles[index].visitedIndex ?? '',
// position.x - 5,
// position.y + diameter / 2
// );
// app.up.image(
// app.p.expandIcon,
// position.x + diameter / 2,
// position.y,
// 20,
// 20
// );
if (!completed) {
return;
}

if (app.isInteractiveMode) {
if (app.usedNextOrPrev && app.timeline.currentIndex === index) {
app.up.image(
app.p.userIcon,
position.x - user.width / 2,
position.y - user.height / 2,
user.width,
user.height
);
return;
}

app.up.push();
app.up.textSize(16);
app.up.fill(colors.visitedBlue);
app.up.stroke(colors.visitedBlue);
app.up.textStyle(app.up.BOLD);
app.up.textAlign(app.up.CENTER, app.up.CENTER);
app.up.text(circles[index].visitedIndex ?? '', position.x, position.y);
app.up.pop();

app.up.image(
app.p.completedCheckMark,
position.x - user.width / 2,
position.y - user.height / 2,
user.width,
user.height
app.p.openWithoutAnimation,
position.x - 10,
position.y + diameter / 2,
20,
20
);
return;
}

app.up.image(
app.p.completedCheckMark,
position.x - user.width / 2,
position.y - user.height / 2,
user.width,
user.height
);
};

timeline.renderUserIcon = () => {
Expand All @@ -379,15 +438,17 @@ timeline.renderUserIcon = () => {
timeline.eraseAndRedraw();
utils.wipeAndRecreateInterestCanvas();

if (app.startTrackingMouse) {
app.up.image(
app.p.userIcon,
circlePosition.x - user.width / 2,
circlePosition.y - user.height / 2,
user.width,
user.height
);
if (!app.startTrackingMouse) {
return;
}

app.up.image(
app.p.userIcon,
circlePosition.x - user.width / 2,
circlePosition.y - user.height / 2,
user.width,
user.height
);
};

timeline.eraseAndRedraw = () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@ export * from './isInsideCircle';
export * from './canvasEventListener';
export * from './markVisitedValue';
export * from './requestInterval';
export * from './isOverControls';
Loading

0 comments on commit 1b463d5

Please sign in to comment.