diff --git a/context/app/static/js/components/Contexts.jsx b/context/app/static/js/components/Contexts.jsx
new file mode 100644
index 0000000000..02c773bb70
--- /dev/null
+++ b/context/app/static/js/components/Contexts.jsx
@@ -0,0 +1,23 @@
+import { useContext, createContext } from 'react';
+
+// TODO:
+// I tried converting this to a .tsx file, but it made storybook fail; created HMP-250 to track this
+// We should continue specifying shapes of contexts as we start using them in our TS files
+const FlaskDataContext = createContext({});
+
+/**
+ * @typedef AppContextType
+ * @property {string} assetsEndpoint
+ * @property {string} groupsToken
+ */
+
+/**
+ * @type {AppContextType}
+ */
+const AppContext = createContext({});
+
+FlaskDataContext.displayName = 'FlaskDataContext';
+
+export { FlaskDataContext, AppContext };
+export const useAppContext = () => useContext(AppContext);
+export const useFlaskDataContext = () => useContext(FlaskDataContext);
diff --git a/context/app/static/js/components/Contexts.tsx b/context/app/static/js/components/Contexts.tsx
deleted file mode 100644
index 4e7c1f5fd5..0000000000
--- a/context/app/static/js/components/Contexts.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useContext, createContext } from 'react';
-
-// TODO: Continue specifying shapes of contexts as we start using them in our TS files
-const FlaskDataContext = createContext<unknown>({});
-
-type AppContextType = {
-  assetsEndpoint: string;
-  groupsToken: string;
-};
-const AppContext = createContext<AppContextType>({
-  assetsEndpoint: '',
-  groupsToken: '',
-});
-
-FlaskDataContext.displayName = 'FlaskDataContext';
-
-export { FlaskDataContext, AppContext };
-export const useAppContext = () => useContext(AppContext);
-export const useFlaskDataContext = () => useContext(FlaskDataContext);
diff --git a/context/app/static/js/components/publications/PublicationVignette/hooks.ts b/context/app/static/js/components/publications/PublicationVignette/hooks.ts
index 16d5afecc1..addf5678ed 100644
--- a/context/app/static/js/components/publications/PublicationVignette/hooks.ts
+++ b/context/app/static/js/components/publications/PublicationVignette/hooks.ts
@@ -28,17 +28,19 @@ export function usePublicationVignetteConfs({ uuid, vignetteDirName, vignette }:
 
   if (data) {
     const urlHandler = (url: string, isZarr: boolean) => {
-      return `${url.replace('{{ base_url }}', `${assetsEndpoint}/${uuid}/data`)}${isZarr ? '' : `?token=${groupsToken}`}`;
+      return `${url.replace('{{ base_url }}', `${assetsEndpoint}/${uuid}/data`)}${
+        isZarr ? '' : `?token=${groupsToken}`
+      }`;
     };
-  
+
     const requestInitHandler = () => {
       return {
         headers: { Authorization: `Bearer ${groupsToken}` },
       };
     };
     // Formats the vitessce config data to replace the {{ base_url }} placeholder with the actual url.
-    // TODO: Fix this any; I couldn't figure out how to import the appropriate type from Vitessce.
-    const formattedData: any[] = data.map(d => fillUrls(d, urlHandler, requestInitHandler));
+    // TODO: Improve this `unknown`; I couldn't figure out how to import the appropriate `VitessceConfig` type from Vitessce.
+    const formattedData: unknown[] = data.map((d) => fillUrls(d, urlHandler, requestInitHandler));
     return formattedData;
   }
   return undefined;