From af07a50b82c523a4b2e2013b5f2bcf5419d8bccb Mon Sep 17 00:00:00 2001 From: Etesam Ansari Date: Mon, 1 Aug 2022 17:38:42 -0400 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8=20Added=20ability=20to=20customiz?= =?UTF-8?q?e=20html=20task=20submit=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static_html_task/source/dev/app.jsx | 6 +- .../static_html_task/source/package-lock.json | 1811 +++++++++++++++-- .../providers/mock/wrap_crowd_source.js | 6 + .../providers/mturk/wrap_crowd_source.js | 6 + 4 files changed, 1688 insertions(+), 141 deletions(-) diff --git a/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx b/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx index 42984450f..ebc8ba1e9 100644 --- a/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx +++ b/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx @@ -121,7 +121,11 @@ function SubmitFrame({ children, onSubmit, currentTask }) { {children}
- + {!isHidden && ( + + )}
diff --git a/mephisto/abstractions/providers/event_emitter.js b/mephisto/abstractions/providers/event_emitter.js new file mode 100644 index 000000000..48009ad19 --- /dev/null +++ b/mephisto/abstractions/providers/event_emitter.js @@ -0,0 +1,32 @@ +class EventEmitter { + subscriptions = new Map(); + + subscribe(eventName, callback) { + if (!this.subscriptions.has(eventName)) { + this.subscriptions.set(eventName, new Set()); + } + const subscriptions = this.subscriptions.get(eventName); + const callbackObj = { callback }; + subscriptions.add(callbackObj); + + return { + release: () => { + subscriptions.delete(callbackObj); + if (subscriptions.size === 0) { + delete this.subscriptions.eventName; + } + }, + }; + } + + emit(eventName, ...args) { + const subscriptions = this.subscriptions.get(eventName); + if (subscriptions) { + subscriptions.forEach((cbObj) => { + cbObj.callback.apply(this, args); + }); + } + } +} + +export const emitter = new EventEmitter(); diff --git a/mephisto/abstractions/providers/mock/wrap_crowd_source.js b/mephisto/abstractions/providers/mock/wrap_crowd_source.js index 10df4ec5a..09e272804 100644 --- a/mephisto/abstractions/providers/mock/wrap_crowd_source.js +++ b/mephisto/abstractions/providers/mock/wrap_crowd_source.js @@ -15,6 +15,22 @@ Returning None for the assignment_id means that the task is being previewed by the given worker. \------------------------------------------*/ +let eventEmitter = () => ({ + events: {}, + emit(event, ...args) { + let callbacks = this.events[event] || []; + for (let i = 0, length = callbacks.length; i < length; i++) { + callbacks[i](...args); + } + }, + on(event, cb) { + this.events[event]?.push(cb) || (this.events[event] = [cb]); + return () => { + this.events[event] = this.events[event]?.filter((i) => cb !== i); + }; + }, +}); + // MOCK IMPLEMENTATION function getWorkerName() { // Mock worker name is passed via url params @@ -45,14 +61,29 @@ function handleSubmitToProvider(task_data) { return true; } -window.HIDE_SUBMIT_BUTTON = (isHidden) => { - const submitButton = document.getElementById("html-task-submit-button"); - if (isHidden) submitButton.style.display = "none"; - else submitButton.style.display = "block"; +// window.HIDE_SUBMIT_BUTTON = (isHidden) => { +// const submitButton = document.getElementById("html-task-submit-button"); +// if (isHidden) submitButton.style.display = "none"; +// else submitButton.style.display = "block"; +// }; + +const events = eventEmitter(); + +window._MEPHISTO_CONFIG_ = window._MEPHISTO_CONFIG_ || {}; +window._MEPHISTO_CONFIG_.EVENT_EMITTER = events; + +window._MEPHISTO_CONFIG_.get = (property) => { + if (!(property in window._MEPHISTO_CONFIG_)) + throw new Error(`${property} does not exist in window.MEPHISTO_CONFIG`); + else return window._MEPHISTO_CONFIG_[property]; +}; + +window._MEPHISTO_CONFIG_.set = (property, value) => { + window._MEPHISTO_CONFIG_[property] = value; + events.emit(property, value); }; /* === UI error handling code ======= */ -window._MEPHISTO_CONFIG_ = window._MEPHISTO_CONFIG_ || {}; window._MEPHISTO_CONFIG_.AUTO_SUBMIT_ERRORS = false; window._MEPHISTO_CONFIG_.ADD_ERROR_HANDLING = false; window._MEPHISTO_CONFIG_.ERROR_REPORT_TO_EMAIL = null; diff --git a/mephisto/abstractions/providers/mturk/wrap_crowd_source.js b/mephisto/abstractions/providers/mturk/wrap_crowd_source.js index 1630a49ac..b9954ae72 100644 --- a/mephisto/abstractions/providers/mturk/wrap_crowd_source.js +++ b/mephisto/abstractions/providers/mturk/wrap_crowd_source.js @@ -69,7 +69,6 @@ window.HIDE_SUBMIT_BUTTON = (isHidden) => { if (isHidden) submitButton.style.display = "none"; else submitButton.style.display = "block"; }; - /* === UI error handling code ======= */ window._MEPHISTO_CONFIG_ = window._MEPHISTO_CONFIG_ || {}; window._MEPHISTO_CONFIG_.AUTO_SUBMIT_ERRORS = false; From 5938013ed91ff4ec08d3f4f7438a91cec70ffe01 Mon Sep 17 00:00:00 2001 From: Etesam Ansari Date: Tue, 2 Aug 2022 16:13:54 -0400 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=9A=9B=20Copied=20mock=20wrap=5Fcrowd?= =?UTF-8?q?=5Fsource=20changes=20into=20mturk?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static_html_task/source/dev/app.jsx | 7 ++-- .../abstractions/providers/event_emitter.js | 32 ----------------- .../providers/mturk/wrap_crowd_source.js | 35 ++++++++++++++++--- 3 files changed, 35 insertions(+), 39 deletions(-) delete mode 100644 mephisto/abstractions/providers/event_emitter.js diff --git a/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx b/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx index 3f14866e6..2b30c9df3 100644 --- a/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx +++ b/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx @@ -100,7 +100,7 @@ function SubmitFrame({ children, onSubmit, currentTask }) { const [submitting, setSubmitting] = React.useState(false); const [isHidden, setIsHidden] = React.useState(false); - const handler = React.useCallback( + const handleHideSubmitButtonEvent = React.useCallback( (hideValue) => { if (typeof hideValue == "boolean") setIsHidden(hideValue); }, @@ -113,7 +113,10 @@ function SubmitFrame({ children, onSubmit, currentTask }) { }, []); React.useEffect(() => { - window._MEPHISTO_CONFIG_.EVENT_EMITTER.on("HIDE_SUBMIT_BUTTON", handler); + window._MEPHISTO_CONFIG_.EVENT_EMITTER.on( + "HIDE_SUBMIT_BUTTON", + handleHideSubmitButtonEvent + ); }, [setIsHidden]); function handleFormSubmit(event) { diff --git a/mephisto/abstractions/providers/event_emitter.js b/mephisto/abstractions/providers/event_emitter.js deleted file mode 100644 index 48009ad19..000000000 --- a/mephisto/abstractions/providers/event_emitter.js +++ /dev/null @@ -1,32 +0,0 @@ -class EventEmitter { - subscriptions = new Map(); - - subscribe(eventName, callback) { - if (!this.subscriptions.has(eventName)) { - this.subscriptions.set(eventName, new Set()); - } - const subscriptions = this.subscriptions.get(eventName); - const callbackObj = { callback }; - subscriptions.add(callbackObj); - - return { - release: () => { - subscriptions.delete(callbackObj); - if (subscriptions.size === 0) { - delete this.subscriptions.eventName; - } - }, - }; - } - - emit(eventName, ...args) { - const subscriptions = this.subscriptions.get(eventName); - if (subscriptions) { - subscriptions.forEach((cbObj) => { - cbObj.callback.apply(this, args); - }); - } - } -} - -export const emitter = new EventEmitter(); diff --git a/mephisto/abstractions/providers/mturk/wrap_crowd_source.js b/mephisto/abstractions/providers/mturk/wrap_crowd_source.js index b9954ae72..d72047787 100644 --- a/mephisto/abstractions/providers/mturk/wrap_crowd_source.js +++ b/mephisto/abstractions/providers/mturk/wrap_crowd_source.js @@ -15,6 +15,22 @@ Returning None for the assignment_id means that the task is being previewed by the given worker. \------------------------------------------*/ +let eventEmitter = () => ({ + events: {}, + emit(event, ...args) { + let callbacks = this.events[event] || []; + for (let i = 0, length = callbacks.length; i < length; i++) { + callbacks[i](...args); + } + }, + on(event, cb) { + this.events[event]?.push(cb) || (this.events[event] = [cb]); + return () => { + this.events[event] = this.events[event]?.filter((i) => cb !== i); + }; + }, +}); + function getWorkerName() { // MTurk worker name is passed via url params let urlParams = new URLSearchParams(window.location.search); @@ -64,13 +80,21 @@ function handleSubmitToProvider(task_data) { HTMLFormElement.prototype.submit.call(form); } -window.HIDE_SUBMIT_BUTTON = (isHidden) => { - const submitButton = document.getElementById("html-task-submit-button"); - if (isHidden) submitButton.style.display = "none"; - else submitButton.style.display = "block"; +window._MEPHISTO_CONFIG_ = window._MEPHISTO_CONFIG_ || {}; +window._MEPHISTO_CONFIG_.EVENT_EMITTER = events; + +window._MEPHISTO_CONFIG_.get = (property) => { + if (!(property in window._MEPHISTO_CONFIG_)) + throw new Error(`${property} does not exist in window.MEPHISTO_CONFIG`); + else return window._MEPHISTO_CONFIG_[property]; }; + +window._MEPHISTO_CONFIG_.set = (property, value) => { + window._MEPHISTO_CONFIG_[property] = value; + events.emit(property, value); +}; + /* === UI error handling code ======= */ -window._MEPHISTO_CONFIG_ = window._MEPHISTO_CONFIG_ || {}; window._MEPHISTO_CONFIG_.AUTO_SUBMIT_ERRORS = false; window._MEPHISTO_CONFIG_.ADD_ERROR_HANDLING = false; window._MEPHISTO_CONFIG_.ERROR_REPORT_TO_EMAIL = null; @@ -78,6 +102,7 @@ window._MEPHISTO_CONFIG_.ERROR_REPORT_TO_EMAIL = null; let numErrorsCaught = 0; let numErrorsReported = 0; let userDisabledErrorPrompts = false; + // Adding event listener instead of using window.onerror prevents the error to be caught twice window.addEventListener("error", function (event) { if (event.error.hasBeenCaught === true) { From 4eabea1a461dbff5568c94bfc52738fd1bd2b264 Mon Sep 17 00:00:00 2001 From: Etesam Ansari Date: Tue, 2 Aug 2022 16:18:41 -0400 Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20Improved=20naming=20&?= =?UTF-8?q?=20removed=20useless=20comment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../blueprints/static_html_task/source/dev/app.jsx | 10 +++++----- .../abstractions/providers/mock/wrap_crowd_source.js | 6 ------ 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx b/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx index 2b30c9df3..76654dc79 100644 --- a/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx +++ b/mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx @@ -98,13 +98,13 @@ function MainApp() { function SubmitFrame({ children, onSubmit, currentTask }) { const [submitting, setSubmitting] = React.useState(false); - const [isHidden, setIsHidden] = React.useState(false); + const [isSubmitButtonHidden, setIsSubmitButtonHidden] = React.useState(false); const handleHideSubmitButtonEvent = React.useCallback( (hideValue) => { - if (typeof hideValue == "boolean") setIsHidden(hideValue); + if (typeof hideValue == "boolean") setIsSubmitButtonHidden(hideValue); }, - [setIsHidden] + [setIsSubmitButtonHidden] ); React.useEffect(() => { @@ -117,7 +117,7 @@ function SubmitFrame({ children, onSubmit, currentTask }) { "HIDE_SUBMIT_BUTTON", handleHideSubmitButtonEvent ); - }, [setIsHidden]); + }, [setIsSubmitButtonHidden]); function handleFormSubmit(event) { event.preventDefault(); @@ -136,7 +136,7 @@ function SubmitFrame({ children, onSubmit, currentTask }) { {children}
- {!isHidden && ( + {!isSubmitButtonHidden && (