From ca64202bed5f9c0cd8ed15c7bd4cc2113b83b587 Mon Sep 17 00:00:00 2001
From: Mengyan Wu <mengyanw@umich.edu>
Date: Thu, 14 Dec 2023 11:02:09 -0500
Subject: [PATCH] Add user settings

---
 schema/plugin.json | 21 ++++++++++++++++++++-
 src/index.ts       | 35 ++++++++++++-----------------------
 src/utils.ts       | 18 +++++++++++++++---
 3 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/schema/plugin.json b/schema/plugin.json
index 6ef546a..03ef508 100644
--- a/schema/plugin.json
+++ b/schema/plugin.json
@@ -3,6 +3,25 @@
   "title": "jupyterlab-hints",
   "description": "jupyterlab-hints settings.",
   "type": "object",
-  "properties": {},
+  "properties": {
+    "text1": {
+      "type": "string",
+      "title": "Text 1",
+      "description": "Text displayed before click hint",
+      "default": "Click to reveal a hint"
+    },
+    "text2": {
+      "type": "string",
+      "title": "Text 2",
+      "description": "Text displayed confirming click hint",
+      "default": "Are you sure you want to reveal the hint?"
+    },
+    "blurry-level": {
+      "type": "number",
+      "title": "Blurry Level",
+      "description": "The blurry level of the hint",
+      "default": 3
+    }
+  },
   "additionalProperties": false
 }
diff --git a/src/index.ts b/src/index.ts
index 62ec6a0..ef0e6fb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -20,33 +20,22 @@ const plugin: JupyterFrontEndPlugin<void> = {
     console.log('JupyterLab extension jupyterlab-hints is activated!');
 
     if (settingRegistry) {
-      settingRegistry
-        .load(plugin.id)
-        .then(settings => {
-          console.log('jupyterlab-hints settings loaded:', settings.composite);
-        })
-        .catch(reason => {
-          console.error(
-            'Failed to load settings for jupyterlab-hints.',
-            reason
-          );
-        });
-    }
-
-    notebookTracker.widgetAdded.connect(
-      async (_, notebookPanel: NotebookPanel) => {
-        await notebookPanel.revealed;
+      const setting = await settingRegistry.load(plugin.id);
+      notebookTracker.widgetAdded.connect(
+        async (_, notebookPanel: NotebookPanel) => {
+          await notebookPanel.revealed;
 
-        if (notebookPanel.content.model) {
-          const cells = notebookPanel.content.model?.cells;
-          for (let i = 0; i < cells.length; i++) {
-            if (cells.get(i).metadata.hint) {
-              addHintOverlay(i, notebookPanel);
+          if (notebookPanel.content.model) {
+            const cells = notebookPanel.content.model?.cells;
+            for (let i = 0; i < cells.length; i++) {
+              if (cells.get(i).metadata.hint) {
+                addHintOverlay(i, notebookPanel, setting);
+              }
             }
           }
         }
-      }
-    );
+      );
+    }
   }
 };
 
diff --git a/src/utils.ts b/src/utils.ts
index 90fdf83..5c5f0f5 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,6 +1,11 @@
 import { NotebookPanel } from '@jupyterlab/notebook';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
-export const addHintOverlay = (i: number, notebookPanel: NotebookPanel) => {
+export const addHintOverlay = (
+  i: number,
+  notebookPanel: NotebookPanel,
+  settings: ISettingRegistry.ISettings
+) => {
   const cell = notebookPanel.content.model?.cells.get(i);
   const cellWidget = notebookPanel.content.widgets.find(
     widget => widget.model === cell
@@ -9,13 +14,20 @@ export const addHintOverlay = (i: number, notebookPanel: NotebookPanel) => {
     // Create hint blur overlay and append to hint cell node
     const overlay = document.createElement('div');
     overlay.classList.add('hint-overlay');
-    overlay.innerText = 'Click to reveal hint';
     cellWidget.node.appendChild(overlay);
 
     // Create modal to confirm if user wants to reveal hint
     const modal = document.createElement('div');
     modal.classList.add('hint-modal');
-    modal.innerText = 'Are you sure you want to reveal the hint?';
+
+    const updateSettings = (): void => {
+      overlay.innerText = settings.get('text1').composite as string;
+      modal.innerText = settings.get('text2').composite as string;
+      const blurryLevel = settings.get('blurry-level').composite as number;
+      overlay.style.backdropFilter = `blur(${blurryLevel}px)`;
+    };
+    updateSettings();
+    settings.changed.connect(updateSettings);
 
     // Remove overlay text and append modal when user clicks on overlay
     overlay.addEventListener('click', () => {