+ {/* Cluster label */}
+
+ );
+}
+
+/**
+ * ClusterArtworkThumbnail - Simplified artwork display for cluster grid
+ * Shows smaller thumbnails than the full ArtCard
+ */
+function ClusterArtworkThumbnail({ artwork }) {
+ const iiifUrl = "https://www.artic.edu/iiif/2/";
+ const iiifSize = "/full/200,/0/default.jpg"; // Smaller size for thumbnails
+
+ return (
+
+
+
+ {/* Cluster content area */}
+ {cluster.key}
+ + {cluster.doc_count.toLocaleString()} artworks + +
+ {isLoading ? (
+
+
+ Loading artworks...
+
+ ) : artworks.length > 0 ? (
+ artworks.map((artwork, index) => {
+ const position = artworkPositions[index] || { localX: 0, localY: 0 };
+ return (
+ onArtworkClick && onArtworkClick(artwork)}
+ >
+
+ );
+ })
+ ) : (
+
+ Zoom in to load artworks
+
+ )}
+
+ {artwork.image_id ? (
+ 
+ ) : (
+
+ );
+}
+
+ClusterArtworkThumbnail.propTypes = {
+ artwork: PropTypes.shape({
+ id: PropTypes.number,
+ title: PropTypes.string,
+ image_id: PropTypes.string,
+ }).isRequired,
+};
+
+Cluster.propTypes = {
+ cluster: PropTypes.shape({
+ key: PropTypes.string.isRequired,
+ doc_count: PropTypes.number.isRequired,
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ cols: PropTypes.number,
+ rows: PropTypes.number,
+ }).isRequired,
+ artworks: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number,
+ title: PropTypes.string,
+ image_id: PropTypes.string,
+ })
+ ),
+ isLoading: PropTypes.bool,
+ onArtworkClick: PropTypes.func,
+};
+
+Cluster.defaultProps = {
+ artworks: [],
+ isLoading: false,
+ onArtworkClick: null,
+};
+
+export default Cluster;
diff --git a/src/components/DetailPanel.jsx b/src/components/DetailPanel.jsx
new file mode 100644
index 0000000..4a0309c
--- /dev/null
+++ b/src/components/DetailPanel.jsx
@@ -0,0 +1,134 @@
+import PropTypes from "prop-types";
+import { useEffect, useCallback } from "react";
+
+/**
+ * DetailPanel - Slide-in panel that shows larger image and metadata
+ * when an artwork is clicked. Maintains exploration context without
+ * leaving the canvas.
+ */
+function DetailPanel({ artwork, onClose }) {
+ // IIIF image URLs
+ const iiifUrl = "https://www.artic.edu/iiif/2/";
+ const iiifSizeLarge = "/full/843,/0/default.jpg";
+
+ // AIC website URL for linking to full artwork page
+ const aicUrl = "https://www.artic.edu/artworks/";
+
+ /**
+ * Handle click outside the panel to close it
+ */
+ const handleBackdropClick = useCallback(
+ (e) => {
+ // Only close if clicking the backdrop itself, not the panel content
+ if (e.target.classList.contains("detail-panel-backdrop")) {
+ onClose();
+ }
+ },
+ [onClose]
+ );
+
+ /**
+ * Handle escape key to close panel
+ */
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ if (e.key === "Escape") {
+ onClose();
+ }
+ };
+
+ document.addEventListener("keydown", handleKeyDown);
+ return () => document.removeEventListener("keydown", handleKeyDown);
+ }, [onClose]);
+
+ // Don't render if no artwork is selected
+ if (!artwork) return null;
+
+ return (
+ No Image
+ )}
+
+ {artwork.title}
+
+
+
+ );
+}
+
+DetailPanel.propTypes = {
+ artwork: PropTypes.shape({
+ id: PropTypes.number,
+ title: PropTypes.string,
+ artist_title: PropTypes.string,
+ artist_display: PropTypes.string,
+ date_display: PropTypes.string,
+ medium_display: PropTypes.string,
+ image_id: PropTypes.string,
+ classification_title: PropTypes.string,
+ department_title: PropTypes.string,
+ style_title: PropTypes.string,
+ }),
+ onClose: PropTypes.func.isRequired,
+};
+
+DetailPanel.defaultProps = {
+ artwork: null,
+};
+
+export default DetailPanel;
diff --git a/src/components/GroupingSelector.jsx b/src/components/GroupingSelector.jsx
new file mode 100644
index 0000000..3c8c248
--- /dev/null
+++ b/src/components/GroupingSelector.jsx
@@ -0,0 +1,47 @@
+import PropTypes from "prop-types";
+
+/**
+ * GroupingSelector - Dropdown to switch the grouping dimension for canvas clusters
+ *
+ * @param {object} props
+ * @param {string} props.value - Current selected grouping field
+ * @param {function} props.onChange - Callback when selection changes
+ */
+function GroupingSelector({ value, onChange }) {
+ const groupingOptions = [
+ { value: "classification_title", label: "Classification" },
+ { value: "department_title", label: "Department" },
+ { value: "style_title", label: "Style" },
+ ];
+
+ const handleChange = (event) => {
+ onChange(event.target.value);
+ };
+
+ return (
+
+ {/* Close button */}
+
+
+ {/* Large artwork image */}
+
+
+ {artwork.image_id ? (
+ 
+ ) : (
+
+
+ {/* Artwork metadata */}
+ No Image Available
+ )}
+
+
+ + {artwork.title} +
+ + {/* Artist */} + {artwork.artist_title && ( +{artwork.artist_title}
+ )} + + {/* Date */} + {artwork.date_display && ( +{artwork.date_display}
+ )} + + {/* Medium */} + {artwork.medium_display && ( +{artwork.medium_display}
+ )} + + {/* Link to AIC website */} + + View on Art Institute of Chicago + → + +
+
+
+
+ );
+}
+
+GroupingSelector.propTypes = {
+ value: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+};
+
+export default GroupingSelector;
diff --git a/src/components/InfiniteCanvas.jsx b/src/components/InfiniteCanvas.jsx
new file mode 100644
index 0000000..4e730a5
--- /dev/null
+++ b/src/components/InfiniteCanvas.jsx
@@ -0,0 +1,223 @@
+import { TransformWrapper, TransformComponent, useControls } from "react-zoom-pan-pinch";
+import PropTypes from "prop-types";
+import { useCallback, useRef, useEffect, useImperativeHandle, forwardRef } from "react";
+
+/**
+ * CanvasControls - Zoom in/out/reset buttons for the infinite canvas
+ * Must be rendered inside TransformWrapper to access useControls hook
+ */
+function CanvasControls() {
+ const { zoomIn, zoomOut, resetTransform } = useControls();
+
+ return (
+
+
+
+
+
+ );
+}
+
+/**
+ * Calculate viewport bounds from transform state
+ * @param {object} state - Transform state from react-zoom-pan-pinch
+ * @param {number} wrapperWidth - Width of the wrapper container
+ * @param {number} wrapperHeight - Height of the wrapper container
+ * @returns {object} Viewport bounds { x, y, width, height, scale }
+ */
+function calculateViewportBounds(state, wrapperWidth, wrapperHeight) {
+ const { scale, positionX, positionY } = state;
+
+ // The viewport shows content that is offset by -positionX/Y and scaled
+ // To get content coordinates, we need to invert the transform
+ const viewportX = -positionX / scale;
+ const viewportY = -positionY / scale;
+ const viewportWidth = wrapperWidth / scale;
+ const viewportHeight = wrapperHeight / scale;
+
+ return {
+ x: viewportX,
+ y: viewportY,
+ width: viewportWidth,
+ height: viewportHeight,
+ scale: scale,
+ };
+}
+
+/**
+ * InfiniteCanvas - Wraps content in a pannable/zoomable container
+ * Uses react-zoom-pan-pinch for CSS transform-based pan/zoom
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children - Content to render inside the canvas
+ * @param {function} props.onTransformChange - Callback fired when viewport changes with bounds info
+ * @param {object} props.canvasDimensions - Optional canvas dimensions { width, height }
+ * @param {React.Ref} ref - Ref to expose canvas control methods
+ */
+const InfiniteCanvas = forwardRef(function InfiniteCanvas(
+ { children, onTransformChange, canvasDimensions },
+ ref
+) {
+ const wrapperRef = useRef(null);
+ const transformRef = useRef(null);
+
+ // Handle transform changes (pan/zoom)
+ const handleTransformChange = useCallback((refObj) => {
+ if (!onTransformChange || !wrapperRef.current) return;
+
+ const wrapperRect = wrapperRef.current.getBoundingClientRect();
+ const bounds = calculateViewportBounds(
+ refObj.state,
+ wrapperRect.width,
+ wrapperRect.height
+ );
+
+ onTransformChange(bounds);
+ }, [onTransformChange]);
+
+ // Trigger initial viewport calculation after mount
+ useEffect(() => {
+ if (onTransformChange && wrapperRef.current) {
+ const wrapperRect = wrapperRef.current.getBoundingClientRect();
+ const initialBounds = calculateViewportBounds(
+ { scale: 1, positionX: 0, positionY: 0 },
+ wrapperRect.width,
+ wrapperRect.height
+ );
+ onTransformChange(initialBounds);
+ }
+ }, [onTransformChange]);
+
+ // Expose canvas control methods via ref
+ useImperativeHandle(ref, () => ({
+ /**
+ * Animate viewport to center on and fit a bounding box
+ * @param {object} bounds - { x, y, width, height } in canvas coordinates
+ * @param {number} padding - Additional padding around the bounds (default: 50)
+ */
+ zoomToBounds: (bounds, padding = 50) => {
+ if (!transformRef.current || !wrapperRef.current) return;
+
+ const wrapperRect = wrapperRef.current.getBoundingClientRect();
+ const { setTransform } = transformRef.current;
+
+ // Calculate the scale needed to fit the bounds in the viewport
+ const paddedWidth = bounds.width + padding * 2;
+ const paddedHeight = bounds.height + padding * 2;
+
+ const scaleX = wrapperRect.width / paddedWidth;
+ const scaleY = wrapperRect.height / paddedHeight;
+ const scale = Math.min(scaleX, scaleY, 2); // Cap at 2x zoom
+
+ // Calculate the center of the bounds
+ const centerX = bounds.x + bounds.width / 2;
+ const centerY = bounds.y + bounds.height / 2;
+
+ // Calculate position to center the bounds in viewport
+ const positionX = wrapperRect.width / 2 - centerX * scale;
+ const positionY = wrapperRect.height / 2 - centerY * scale;
+
+ // Animate to the new transform
+ setTransform(positionX, positionY, scale, 500, "easeOut");
+ },
+
+ /**
+ * Reset viewport to initial state (centered, scale 0.5)
+ */
+ resetView: () => {
+ if (!transformRef.current) return;
+ transformRef.current.resetTransform(500, "easeOut");
+ },
+
+ /**
+ * Get the current transform state
+ */
+ getTransform: () => {
+ if (!transformRef.current) return null;
+ return transformRef.current.state;
+ },
+ }), []);
+
+ const canvasWidth = canvasDimensions?.width || 4000;
+ const canvasHeight = canvasDimensions?.height || 3000;
+
+ return (
+
+
+
+
+
+ {children}
+
+