Remove hook

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.2.6/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.3.4/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",

client/package.json

@@ -8,23 +8,23 @@
 	"dependencies": {
 		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.14.1",
-		"@mui/icons-material": "^7.3.4",
-		"@mui/material": "^7.3.4",
-		"@mui/x-data-grid": "^8.14.1",
-		"@mui/x-date-pickers": "^8.14.1",
+		"@mui/icons-material": "^7.3.5",
+		"@mui/material": "^7.3.5",
+		"@mui/x-data-grid": "^8.17.0",
+		"@mui/x-date-pickers": "^8.17.0",
 		"@semoss/sdk": "1.0.0-beta.31",
 		"@semoss/sdk-react": "1.0.0-beta.20",
-		"dayjs": "^1.11.18",
+		"dayjs": "^1.11.19",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-router-dom": "^7.9.4"
+		"react-router-dom": "^7.9.5"
 	},
 	"devDependencies": {
-		"@types/node": "^24.8.1",
+		"@types/node": "^24.10.0",
 		"@types/react": "^18.3.26",
 		"@types/react-dom": "^18.3.7",
-		"@vitejs/plugin-react": "^5.0.4",
+		"@vitejs/plugin-react": "^5.1.0",
 		"typescript": "^5.9.3",
-		"vite": "^7.1.10"
+		"vite": "^7.2.2"
 	}
 }

client/src/components/examples/ExampleComponent.tsx

@@ -0,0 +1,79 @@
+import { Stack, TextField, Typography } from "@mui/material";
+import { useState } from "react";
+import { useLoadingPixel } from "@/hooks";
+
+/**
+ * Renders an example component demonstrating pixel calls.
+ *
+ * @component
+ */
+export const ExampleComponent = () => {
+	/**
+	 * State
+	 */
+	const [textValue, setTextValue] = useState<string>("");
+
+	/**
+	 * Library hooks
+	 */
+	const [helloUserResponse, isLoadingHelloUser] =
+		useLoadingPixel<string>("HelloUser()");
+	const [callPythonResponse, isLoadingCallPython] = useLoadingPixel<string>(
+		`CallPython(${Number(textValue)})`,
+		"",
+		!Number(textValue) && textValue !== "0",
+	);
+
+	return (
+		<Stack spacing={2}>
+			<Typography variant="h4">Home page</Typography>
+			<Typography>
+				Welcome to the SEMOSS Template application! This repository is
+				meant to be a starting point for your own SEMOSS application.
+			</Typography>
+			<Typography variant="h6">Example pixel calls:</Typography>
+			<ul>
+				<li>
+					<Typography variant="body1" fontWeight="bold">
+						HelloUser()
+					</Typography>
+					<ul>
+						<li>
+							<Typography fontStyle="italic">
+								{isLoadingHelloUser
+									? "Loading..."
+									: helloUserResponse}
+							</Typography>
+						</li>
+					</ul>
+				</li>
+				<li>
+					<Stack direction="row" spacing={1} alignItems="center">
+						<Typography variant="body1" fontWeight="bold">
+							{"CallPython( numValue ="}
+						</Typography>
+						<TextField
+							value={textValue}
+							onChange={(e) =>
+								setTextValue(e.target.value?.replace(/\D/g, ""))
+							}
+							size="small"
+						/>
+						<Typography variant="body1" fontWeight="bold">
+							{")"}
+						</Typography>
+					</Stack>
+					<ul>
+						<li>
+							<Typography fontStyle="italic">
+								{isLoadingCallPython
+									? "Loading..."
+									: callPythonResponse}
+							</Typography>
+						</li>
+					</ul>
+				</li>
+			</ul>
+		</Stack>
+	);
+};

client/src/components/examples/index.ts

@@ -0,0 +1 @@
+export * from "./ExampleComponent";

client/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./base";
+export * from "./examples";
 export * from "./library";

client/src/contexts/AppContext.tsx

@@ -10,16 +10,20 @@ import {
 	useEffect,
 	useState,
 } from "react";
-import { MessageSnackbar, type MessageSnackbarProps } from "@/components";
+import type { MessageSnackbarProps } from "@/components";
 import { useLoadingState } from "@/hooks";
 
 export interface AppContextType {
-	runPixel: <T = unknown>(pixelString: string) => Promise<T>;
+	runPixel: <T = unknown>(
+		pixelString: string,
+		successMessage?: string,
+	) => Promise<T>;
 	login: (username: string, password: string) => Promise<boolean>;
 	logout: () => Promise<boolean>;
 	userLoginName: string;
 	isAppDataLoading: boolean;
-	onePlusTwo: number;
+	exampleStateData?: number;
+	messageSnackbarProps: MessageSnackbarProps;
 	setMessageSnackbarProps: Dispatch<SetStateAction<MessageSnackbarProps>>;
 }
 
@@ -63,15 +67,15 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 			severity: "info",
 		});
 	// Example state variable to store the result of a pixel operation
-	const [onePlusTwo, setOnePlusTwo] = useState<number>();
+	const [exampleStateData, setExampleStateData] = useState<number>();
 
 	/**
 	 * Functions
 	 */
 
 	// Function to run a pixel and return the result. Opens the snackbar if there is an error.
 	const runPixel = useCallback(
-		async <T,>(pixelString: string) => {
+		async <T,>(pixelString: string, successMessage?: string) => {
 			try {
 				const response = await runPixelSemossSdk<T[]>(
 					pixelString,
@@ -96,6 +100,13 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 							)
 							.join(", "),
 					);
+				if (successMessage) {
+					setMessageSnackbarProps({
+						open: true,
+						message: successMessage,
+						severity: "success",
+					});
+				}
 				return response.pixelReturn[0].output;
 			} catch (error) {
 				setMessageSnackbarProps({
@@ -163,7 +174,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 			const loadSetPairs: LoadSetPair<unknown>[] = [
 				{
 					loader: "1 + 2",
-					setter: (response) => setOnePlusTwo(response),
+					setter: (response) => setExampleStateData(response),
 				} satisfies LoadSetPair<number>,
 			];
 
@@ -202,17 +213,16 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 		<AppContext.Provider
 			value={{
 				runPixel,
-				onePlusTwo,
+				exampleStateData,
 				isAppDataLoading,
+				messageSnackbarProps,
 				setMessageSnackbarProps,
 				login,
 				logout,
 				userLoginName,
 			}}
 		>
 			{children}
-			{/* The MessageSnackbar component is rendered here so that it can be used to display messages throughout the app */}
-			<MessageSnackbar {...messageSnackbarProps} />
 		</AppContext.Provider>
 	);
 };

client/src/hooks/index.ts

@@ -1,3 +1,2 @@
 export * from "./useLoadingPixel";
 export * from "./useLoadingState";
-export * from "./useSettingPixel";

client/src/pages/HomePage.tsx

@@ -1,79 +1,10 @@
-import { Stack, TextField, Typography } from "@mui/material";
-import { useState } from "react";
-import { useLoadingPixel } from "@/hooks";
+import { ExampleComponent } from "@/components";
 
 /**
- * Renders the home page.
+ * Renders the home page, currently displaying an example component.
  *
  * @component
  */
 export const HomePage = () => {
-	/**
-	 * State
-	 */
-	const [textValue, setTextValue] = useState<string>("");
-
-	/**
-	 * Library hooks
-	 */
-	const [helloUserResponse, isLoadingHelloUser] =
-		useLoadingPixel<string>("HelloUser()");
-	const [callPythonResponse, isLoadingCallPython] = useLoadingPixel<string>(
-		`CallPython(${Number(textValue)})`,
-		"",
-		!Number(textValue) && textValue !== "0",
-	);
-
-	return (
-		<Stack spacing={2}>
-			<Typography variant="h4">Home page</Typography>
-			<Typography>
-				Welcome to the SEMOSS Template application! This repository is
-				meant to be a starting point for your own SEMOSS application.
-			</Typography>
-			<Typography variant="h6">Example pixel calls:</Typography>
-			<ul>
-				<li>
-					<Typography variant="body1" fontWeight="bold">
-						HelloUser()
-					</Typography>
-					<ul>
-						<li>
-							<Typography fontStyle="italic">
-								{isLoadingHelloUser
-									? "Loading..."
-									: helloUserResponse}
-							</Typography>
-						</li>
-					</ul>
-				</li>
-				<li>
-					<Stack direction="row" spacing={1} alignItems="center">
-						<Typography variant="body1" fontWeight="bold">
-							{"CallPython( numValue ="}
-						</Typography>
-						<TextField
-							value={textValue}
-							onChange={(e) =>
-								setTextValue(e.target.value?.replace(/\D/g, ""))
-							}
-							size="small"
-						/>
-						<Typography variant="body1" fontWeight="bold">
-							{")"}
-						</Typography>
-					</Stack>
-					<ul>
-						<li>
-							<Typography fontStyle="italic">
-								{isLoadingCallPython
-									? "Loading..."
-									: callPythonResponse}
-							</Typography>
-						</li>
-					</ul>
-				</li>
-			</ul>
-		</Stack>
-	);
+	return <ExampleComponent />;
 };

client/src/pages/layouts/InitializedLayout.tsx

@@ -1,21 +1,29 @@
 import { Stack } from "@mui/material";
 import { useInsight } from "@semoss/sdk-react";
 import { Outlet } from "react-router-dom";
-import { LoadingScreen, MainNavigation } from "@/components";
+import { LoadingScreen, MainNavigation, MessageSnackbar } from "@/components";
+import { useAppContext } from "@/contexts";
 
 /**
  * Renders a loading wheel if SEMOSS is not initialized.
  *
  * @component
  */
 export const InitializedLayout = () => {
+	/**
+	 * Library hooks
+	 */
 	const { isInitialized } = useInsight();
+	const { messageSnackbarProps } = useAppContext();
 
 	return (
 		<Stack height="100vh">
 			{/* Allow users to navigate around the app */}
 			<MainNavigation />
 
+			{/* Show message snackbar with notifications */}
+			<MessageSnackbar {...messageSnackbarProps} />
+
 			{isInitialized ? (
 				// If initialized, set up padding and scroll
 				<Stack padding={2} overflow="auto" height="100%">

package.json

@@ -6,10 +6,10 @@
 		"javadoc": "mvn clean javadoc:javadoc && mvn site && pnpm exec http-server target/site/apidocs -p 1227 -a localhost -o"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.2.6",
+		"@biomejs/biome": "2.3.4",
 		"http-server": "^14.1.1",
 		"husky": "^9.1.7",
-		"lint-staged": "^16.2.4"
+		"lint-staged": "^16.2.6"
 	},
 	"lint-staged": {
 		"**/*.{js,jsx,ts,tsx,json,html,css}": [