From 5f1121520c08be8944c731e356139e1435b60231 Mon Sep 17 00:00:00 2001
From: Christian Helgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Mon, 4 Mar 2024 11:43:36 -0800
Subject: [PATCH] Add descriptions to categories on hover (#360)

---
 src/components/SampleCategory.module.css | 22 ++++++++++-
 src/components/SampleCategory.tsx        | 22 ++++++++++-
 src/pages/MainLayout.module.css          |  4 ++
 src/pages/samples/[slug].tsx             | 47 +++++++++++++++++++-----
 src/pages/styles.css                     |  4 +-
 src/sample/skinnedMesh/glbUtils.ts       |  5 +--
 src/sample/skinnedMesh/gltf.ts           | 12 +++---
 7 files changed, 91 insertions(+), 25 deletions(-)

diff --git a/src/components/SampleCategory.module.css b/src/components/SampleCategory.module.css
index abc8e616..e1f2854e 100644
--- a/src/components/SampleCategory.module.css
+++ b/src/components/SampleCategory.module.css
@@ -1,7 +1,27 @@
 .sampleCategory {
-  display: flex;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  display: inline-block;
 }
 
+.sampleCategoryDescription {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 5px 10px rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
+  transition: opacity 0.3s ease-in, transform 0.2s ease-out
+}
+
+.sampleCategoryDescription[data-active='true'] {
+  opacity: 1;
+  transform: translateY(-0.5em);
+}
+
+.sampleCategoryDescription[data-active='false'] {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(0.25em);
+}
 
 li.selected a {
   color: #ff0000;
diff --git a/src/components/SampleCategory.tsx b/src/components/SampleCategory.tsx
index 428b8006..bf83532f 100644
--- a/src/components/SampleCategory.tsx
+++ b/src/components/SampleCategory.tsx
@@ -1,4 +1,5 @@
 import styles from './SampleCategory.module.css';
+import { useState } from 'react';
 
 import { NextRouter } from 'next/router';
 import Link from 'next/link';
@@ -23,17 +24,34 @@ export const SampleCategory = ({
   onClickPageLink,
   router,
 }: SampleCategoryProps) => {
+  const [displayDescription, setDisplayDescription] = useState<boolean>(false);
   const { title, pages, sampleNames } = category;
   return (
     <div>
-      <div className={styles.sampleCategory}>
+      <div
+        className={styles.sampleCategory}
+        onMouseEnter={() => {
+          setDisplayDescription(true);
+        }}
+        onMouseLeave={() => {
+          setDisplayDescription(false);
+        }}
+      >
         <h3
           style={{
-            marginTop: '5px',
+            cursor: 'pointer',
+            width: 'auto',
           }}
         >
           {title}
         </h3>
+
+        <p
+          className={styles.sampleCategoryDescription}
+          data-active={displayDescription}
+        >
+          {category.description}
+        </p>
       </div>
       {sampleNames.map((slug) => {
         return (
diff --git a/src/pages/MainLayout.module.css b/src/pages/MainLayout.module.css
index f91ac2a9..c9a6f502 100644
--- a/src/pages/MainLayout.module.css
+++ b/src/pages/MainLayout.module.css
@@ -69,6 +69,10 @@
     max-height: 0px;
   }
 
+  .panel[data-expanded='false'] {
+    overflow: hidden;
+  }
+
   .panel[data-expanded='false'] .panelContents {
     max-height: 0vh;
     overflow: hidden;
diff --git a/src/pages/samples/[slug].tsx b/src/pages/samples/[slug].tsx
index 9ccaeff8..7a180e37 100644
--- a/src/pages/samples/[slug].tsx
+++ b/src/pages/samples/[slug].tsx
@@ -22,6 +22,9 @@ const graphicsBasicsPages: PageComponentType = {
   rotatingCube: dynamic(() => import('../../sample/rotatingCube/main')),
   twoCubes: dynamic(() => import('../../sample/twoCubes/main')),
   texturedCube: dynamic(() => import('../../sample/texturedCube/main')),
+  samplerParameters: dynamic(
+    () => import('../../sample/samplerParameters/main')
+  ),
   instancedCube: dynamic(() => import('../../sample/instancedCube/main')),
   fractalCube: dynamic(() => import('../../sample/fractalCube/main')),
   cubemap: dynamic(() => import('../../sample/cubemap/main')),
@@ -33,9 +36,6 @@ const graphicsBasicsPages: PageComponentType = {
 // the primary purpose of 'sampleParameters' is to demonstrate their specific nomenclature and
 // functionality within the context of the WebGPU API.
 const webGPUFeaturesPages: PageComponentType = {
-  samplerParameters: dynamic(
-    () => import('../../sample/samplerParameters/main')
-  ),
   reversedZ: dynamic(() => import('../../sample/reversedZ/main')),
   renderBundles: dynamic(() => import('../../sample/renderBundles/main')),
 };
@@ -94,28 +94,55 @@ const pages: PageComponentType = {
 
 export interface PageCategory {
   title: string;
+  description?: string;
   pages: PageComponentType;
   sampleNames: string[];
 }
 
 const createPageCategory = (
   title: string,
-  pages: PageComponentType
+  pages: PageComponentType,
+  description?: string
 ): PageCategory => {
   return {
     title,
+    description,
     pages,
     sampleNames: Object.keys(pages),
   };
 };
 
 export const pageCategories: PageCategory[] = [
-  createPageCategory('Basic Graphics', graphicsBasicsPages),
-  createPageCategory('WebGPU Features', webGPUFeaturesPages),
-  createPageCategory('GPGPU Demos', gpuComputeDemoPages),
-  createPageCategory('Graphics Techniques', graphicsDemoPages),
-  createPageCategory('Web Platform Integration', webPlatformPages),
-  createPageCategory('Benchmarks', benchmarkPages),
+  createPageCategory(
+    'Basic Graphics',
+    graphicsBasicsPages,
+    'Basic rendering functionality implemented with the WebGPU API.'
+  ),
+  createPageCategory(
+    'WebGPU Features',
+    webGPUFeaturesPages,
+    'Highlights of important WebGPU features.'
+  ),
+  createPageCategory(
+    'GPGPU Demos',
+    gpuComputeDemoPages,
+    'Visualizations of parallel GPU compute operations.'
+  ),
+  createPageCategory(
+    'Graphics Techniques',
+    graphicsDemoPages,
+    'A collection of graphics techniques implemented with WebGPU.'
+  ),
+  createPageCategory(
+    'Web Platform Integration',
+    webPlatformPages,
+    'Demos integrating WebGPU with other functionalities of the web platform.'
+  ),
+  createPageCategory(
+    'Benchmarks',
+    benchmarkPages,
+    'WebGPU Performance Benchmarks'
+  ),
 ];
 
 function Page({ slug }: Props): JSX.Element {
diff --git a/src/pages/styles.css b/src/pages/styles.css
index 7a697034..82c822eb 100644
--- a/src/pages/styles.css
+++ b/src/pages/styles.css
@@ -25,8 +25,8 @@ a:hover {
 }
 
 h3 {
-  margin-bottom: 5px;
-  margin-top: 5px;
+  margin-bottom: 0px;
+  margin-top: 0px;
 }
 
 main {
diff --git a/src/sample/skinnedMesh/glbUtils.ts b/src/sample/skinnedMesh/glbUtils.ts
index 96d4cdec..30b8c760 100644
--- a/src/sample/skinnedMesh/glbUtils.ts
+++ b/src/sample/skinnedMesh/glbUtils.ts
@@ -668,11 +668,8 @@ export class GLTFNode {
 
 export class GLTFScene {
   nodes?: number[];
-  name?: any;
-  extensions?: any;
-  extras?: any;
-  [k: string]: any;
   root: GLTFNode;
+  name?: string;
 
   constructor(
     device: GPUDevice,
diff --git a/src/sample/skinnedMesh/gltf.ts b/src/sample/skinnedMesh/gltf.ts
index e5cd3d52..d5325f22 100644
--- a/src/sample/skinnedMesh/gltf.ts
+++ b/src/sample/skinnedMesh/gltf.ts
@@ -100,7 +100,7 @@ export interface Camera {
   orthographic?: CameraOrthographic;
   perspective?: CameraPerspective;
   type: 'perspective' | 'orthographic' | string;
-  name?: any;
+  name?: string;
 }
 
 export interface Image {
@@ -123,13 +123,13 @@ export interface MaterialPbrMetallicRoughness {
   metallicRoughnessTexture?: TextureInfo;
 }
 export interface MaterialNormalTextureInfo {
-  index?: any;
-  texCoord?: any;
+  index?: number;
+  texCoord?: number;
   scale?: number;
 }
 export interface MaterialOcclusionTextureInfo {
-  index?: any;
-  texCoord?: any;
+  index?: number;
+  texCoord?: number;
   strength?: number;
 }
 
@@ -187,7 +187,7 @@ export interface Sampler {
 
 export interface Scene {
   nodes?: GlTfId[];
-  name?: any;
+  name?: string;
   root?: GLTFNode;
 }
 export interface Skin {