Render indexer in type graph (#7620)

![image](https://github.com/user-attachments/assets/65b225f2-a58b-4ed1-89ca-130b3cf04d5d)

Author: timotheeguerin

.chronus/changes/type-graph-indexer-2025-5-12-16-32-37.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: feature
+packages:
+  - "@typespec/html-program-viewer"
+---
+
+Render `indexer` property on model

packages/html-program-viewer/src/react/inspect-type/inspect-type.tsx

@@ -4,7 +4,11 @@ import { useCallback, type FunctionComponent, type ReactElement, type ReactNode
 import { isNamedUnion } from "../../utils.js";
 import { Literal, Mono, TypeKind } from "../common.js";
 import { JsValue } from "../js-inspector/js-value/js-value.js";
-import { getPropertyRendering, type EntityPropertyConfig } from "../type-config.js";
+import {
+  getRenderingConfig,
+  type PropertiesRendering,
+  type PropertyRendering,
+} from "../type-config.js";
 import { useTreeNavigatorOptional } from "../use-tree-navigation.js";
 import style from "./inspect-type.module.css";
 
@@ -152,11 +156,23 @@ const SimpleType = ({ type, children }: { type: Type; children: ReactNode }) =>
   );
 };
 
-const EntityProperties = ({ entity: type }: { entity: Entity }) => {
-  const props = Object.entries(type)
+const EntityProperties = ({ entity }: { entity: Entity }) => {
+  return <InspectObject value={entity} config={getRenderingConfig(entity)} />;
+};
+const InspectObject = ({
+  value,
+  config,
+}: {
+  value: object | undefined;
+  config: PropertiesRendering<any> | null;
+}) => {
+  if (value === undefined) {
+    return null;
+  }
+  const props = Object.entries(value)
     .map(([key, value]) => {
-      const action = getPropertyRendering(type as any, key);
-      if (action === undefined || action === "skip") {
+      const action = config?.[key];
+      if (action === undefined || action === null || action.kind === "skip") {
         return undefined;
       }
       return <EntityProperty key={key} name={key} value={value} action={action} />;
@@ -169,7 +185,7 @@ const EntityProperties = ({ entity: type }: { entity: Entity }) => {
 interface EntityPropertyProps {
   name: string;
   value: any;
-  action: EntityPropertyConfig;
+  action: PropertyRendering<any>;
 }
 const EntityProperty = (props: EntityPropertyProps) => {
   return (
@@ -184,13 +200,17 @@ const EntityProperty = (props: EntityPropertyProps) => {
 
 const EntityPropertyValue = ({ value, action }: EntityPropertyProps) => {
   const render = (x: Entity) => {
-    if (action === "parent") {
+    if (action.kind === "parent") {
       return x.entityKind === "Type" ? <ParentReference type={x} /> : null;
     }
-    const renderRef = action === "ref";
+    const renderRef = action.kind === "ref";
     return renderRef ? <EntityReference entity={x} /> : <EntityUI entity={x} />;
   };
 
+  if (action.kind === "nested") {
+    return <InspectObject value={value} config={action.properties} />;
+  }
+
   if (value === undefined) {
     return null;
   } else if (value.entityKind) {

packages/html-program-viewer/src/react/type-config.ts

@@ -1,40 +1,90 @@
-import type { Type } from "@typespec/compiler";
+import type { Entity, Type } from "@typespec/compiler";
 
-export type EntityPropertyConfig = "parent" | "nested" | "ref" | "value" | "skip";
+export type PropertyRendering<T> =
+  | { kind: "parent" | "nested-items" | "ref" | "value" | "skip" }
+  | NestedPropertyRendering<T>;
+export type PropertyRenderingRaw<T> =
+  | "parent"
+  | "nested-items"
+  | "ref"
+  | "value"
+  | "skip"
+  | NestedPropertyRenderingRaw<T>;
 
-export const TypeConfig: TypeGraphConfig = {
+export type PropertiesRenderingRaw<T> = { [K in keyof T]: PropertyRenderingRaw<T[K]> };
+export type PropertiesRendering<T> = { [K in keyof T]: PropertyRendering<T[K]> };
+
+export type NestedPropertyRendering<T> = {
+  kind: "nested";
+  properties: PropertiesRendering<T>;
+};
+export type NestedPropertyRenderingRaw<T> = {
+  kind: "nested";
+  properties: PropertiesRenderingRaw<T>;
+};
+
+export const CommonPropsConfig = {
+  namespace: "parent",
+  name: "value",
+};
+
+const HiddenProps = [
+  "entityKind",
+  "kind",
+  "node",
+  "symbol",
+  "templateNode",
+  "templateArguments",
+  "templateMapper",
+  "instantiationParameters",
+  "decorators",
+  "isFinished",
+] as const;
+
+const HiddenPropsConfig = Object.fromEntries(HiddenProps.map((prop) => [prop, "skip"])) as Record<
+  HiddenPropsType,
+  "skip"
+>;
+
+export const TypeConfig: TypeGraphConfig = buildConfig({
   Namespace: {
     namespaces: "skip",
-    models: "nested",
-    scalars: "nested",
-    interfaces: "nested",
-    operations: "nested",
-    unions: "nested",
-    enums: "nested",
-    decoratorDeclarations: "nested",
+    models: "nested-items",
+    scalars: "nested-items",
+    interfaces: "nested-items",
+    operations: "nested-items",
+    unions: "nested-items",
+    enums: "nested-items",
+    decoratorDeclarations: "nested-items",
   },
   Interface: {
-    operations: "nested",
+    operations: "nested-items",
     sourceInterfaces: "ref",
   },
   Operation: {
     interface: "parent",
-    parameters: "nested",
+    parameters: "nested-items",
     returnType: "ref",
     sourceOperation: "ref",
   },
   Model: {
-    indexer: "skip",
+    indexer: {
+      kind: "nested",
+      properties: {
+        key: "ref",
+        value: "ref",
+      },
+    },
     baseModel: "ref",
     derivedModels: "ref",
-    properties: "nested",
+    properties: "nested-items",
     sourceModel: "ref",
     sourceModels: "value",
   },
   Scalar: {
     baseScalar: "ref",
     derivedScalars: "ref",
-    constructors: "nested",
+    constructors: "nested-items",
   },
   ModelProperty: {
     model: "parent",
@@ -44,16 +94,16 @@ export const TypeConfig: TypeGraphConfig = {
     defaultValue: "value",
   },
   Enum: {
-    members: "nested",
+    members: "nested-items",
   },
   EnumMember: {
     enum: "parent",
     sourceMember: "ref",
     value: "value",
   },
   Union: {
-    expression: "skip",
-    variants: "nested",
+    expression: "value",
+    variants: "nested-items",
   },
   UnionVariant: {
     union: "parent",
@@ -63,13 +113,13 @@ export const TypeConfig: TypeGraphConfig = {
     value: "value",
   },
   Decorator: {
-    parameters: "nested",
+    parameters: "nested-items",
     implementation: "skip",
     target: "ref",
   },
   ScalarConstructor: {
     scalar: "parent",
-    parameters: "nested",
+    parameters: "nested-items",
   },
   FunctionParameter: null,
   Number: {
@@ -81,10 +131,10 @@ export const TypeConfig: TypeGraphConfig = {
     value: "value",
   },
   Tuple: {
-    values: "nested",
+    values: "nested-items",
   },
   StringTemplate: {
-    spans: "nested",
+    spans: "nested-items",
     stringValue: "value",
   },
   StringTemplateSpan: {
@@ -98,44 +148,63 @@ export const TypeConfig: TypeGraphConfig = {
 
   // Don't want to expose those for now
   Intrinsic: null,
-};
+});
 
-type PropsToDefine<T extends Type> = Exclude<
-  keyof T,
-  HiddenPropsType | keyof typeof CommonPropsConfig
->;
-type TypeConfig<T extends Type> = Record<PropsToDefine<T>, EntityPropertyConfig> | null;
+type PropsToDefine<T extends Type> = Omit<T, HiddenPropsType | keyof typeof CommonPropsConfig>;
+type TypeRawConfig<T extends Type> = PropertiesRenderingRaw<PropsToDefine<T>> | null;
+type TypeGraphRawConfig = {
+  [K in Type["kind"]]: TypeRawConfig<Extract<Type, { kind: K }>>;
+};
+type TypeConfig<T extends Type> = PropertiesRendering<T> | null;
 type TypeGraphConfig = {
   [K in Type["kind"]]: TypeConfig<Extract<Type, { kind: K }>>;
 };
 
-export const CommonPropsConfig = {
-  namespace: "parent",
-};
-
-const HiddenProps = [
-  "entityKind",
-  "kind",
-  "name",
-  "node",
-  "symbol",
-  "templateNode",
-  "templateArguments",
-  "templateMapper",
-  "instantiationParameters",
-  "decorators",
-  "projector",
-  "isFinished",
-] as const;
 type HiddenPropsType = (typeof HiddenProps)[number];
 
 export const HiddenPropsSet = new Set(HiddenProps);
 
 export function getPropertyRendering<T extends Type, K extends keyof T>(
   type: T,
   key: K,
-): EntityPropertyConfig {
+): PropertyRenderingRaw<T> {
   const properties = (TypeConfig as any)[type.kind];
   const action = properties?.[key] ?? (CommonPropsConfig as any)[key];
   return action;
 }
+export function getRenderingConfig<T extends Entity>(type: T): PropertiesRendering<T> | null {
+  return (TypeConfig as any)[(type as any).kind];
+}
+
+function buildConfig(raw: TypeGraphRawConfig): TypeGraphConfig {
+  return Object.fromEntries(
+    Object.entries(raw).map(([kind, config]) => {
+      return [kind, buildConfigForKind(config as any)];
+    }),
+  ) as any;
+}
+
+function buildConfigForKind<T extends Type>(config: TypeRawConfig<T> | null): TypeConfig<T> | null {
+  if (config === null) {
+    return null;
+  }
+  return Object.fromEntries(
+    Object.entries({ ...CommonPropsConfig, ...HiddenPropsConfig, ...config }).map(
+      ([key, value]) => {
+        return [key, buildConfigForProperty(value as any)];
+      },
+    ),
+  ) as any;
+}
+
+function buildConfigForProperty<T extends Type>(
+  value: PropertyRenderingRaw<T>,
+): PropertyRendering<T> {
+  if (typeof value === "string") {
+    return { kind: value };
+  }
+  return {
+    kind: "nested",
+    properties: buildConfigForKind(value.properties) as PropertiesRendering<T>,
+  };
+}

packages/html-program-viewer/src/react/use-tree-navigation.tsx

@@ -117,7 +117,7 @@ function computeTypeNode(parentPath: string, type: NamedType, name?: string): Ty
 function computeTypeNodeProps(path: string, type: NamedType, name?: string): TypeGraphTypeNode {
   const typeRendering = (TypeConfig as any)[type.kind];
   const children: TypeGraphNode[] = Object.entries(type)
-    .filter(([key]) => typeRendering?.[key] === "nested")
+    .filter(([key]) => typeRendering?.[key]?.kind === "nested-items")
     .map(([key, value]): TypeGraphNode => {
       const propPath = path + "." + key;
       if (isMapLike(value)) {