@material-ui/lab#TreeView TypeScript Examples

export function SchemaBrowser({ schema }: { schema: Schema }) {
  const scroll = useScrollTargets();
  const expandedRef = useRef<string[]>([]);
  const data = useMemo(() => {
    const expanded = new Array<string>();

    const items = createSchemaBrowserItems(expanded, schema);

    return { items, expanded };
  }, [schema]);

  if (!scroll) {
    throw new Error('No scroll handler available');
  }

  const handleToggle = (_event: unknown, expanded: string[]) => {
    expandedRef.current = expanded;
  };

  const handleSelect = (_event: unknown, nodeId: string) => {
    if (expandedRef.current.includes(nodeId)) {
      scroll.scrollTo(nodeId);
    }
  };

  return (
    <TreeView
      defaultExpanded={data.expanded}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
      onNodeToggle={handleToggle}
      onNodeSelect={handleSelect}
    >
      {data.items}
    </TreeView>
  );
}

export default function MinimaxPage(props: { size: 3 | 4 }) {
    const [board, setBoard] = useState(Array.from({length: props.size},
        () => Array.from({length: props.size},
            () => 0
        )
    ) as number[][]);
    const [player, setPlayer] = useState(1);
    const [result, setResult] = useState({} as resultFromGo);

    const [loading, setLoading] = useState(false);

    const [depth, setDepth] = useState(4);

    const [rich, setRich] = useState(true);

    useEffect(() => {
        fetchResult("t".repeat(props.size))();
    }, [board, rich, depth]);

    useEffect(() => {
        fetchResult("t".repeat(props.size))();
    }, []);

    function fetchResult(name_: string): () => Promise<void> {
        return async () => {
            setLoading(true);

            let res = await fetch(
                `/api/${name_}/${name_}`, {
                    body: JSON.stringify({
                        Board: board.flat(),
                        Player: player,
                        Depth: depth,
                        Rich: rich,
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    method: 'POST'
                }
            );

            if (res.status >= 500) {
                console.error(await res.text());
                return;
            }

            let result = await res.json();

            //console.log(result);

            //console.log(loading);

            setLoading(false);
            setResult(result as resultFromGo);
        };
    }

    function toJSX(ele: resultFromGo, last: number = -1, key: number = 0, mode: number = player - 1) {
        return [
            <TreeItem key={key} nodeId={String(last++)} label=
                {
                    <Typography variant={"subtitle2"}>
                         <pre style={OpenSans}>
                             {`#${ele.Move + 1} | Score: ${ele.Score} (${ele.Children ? (mode === 1 ? "max" : "min") : "end of branch"})`}
                         </pre>
                    </Typography>
                }
            >
                {
                    ele.Children ?
                        ele.Children.sort((a, b) =>
                            (mode === 0 ? 1 : -1) * (b.Score - a.Score)
                        ).map(
                            (x, i) => {
                                let [v, l] = toJSX(x, last, i, mode ^ 1);
                                last = l as number;
                                return v;
                            }
                        )
                        : null
                }
            </TreeItem>
            , last];
    }

    function display() {
        let last = -1;
        return result.Children ?
            result.Children.sort((a, b) =>
                (player - 1 === 0 ? 1 : -1) * (b.Score - a.Score)
            ).map(
                (x, i) => {
                    let [v, l] = toJSX(x, last, i);
                    last = l as number;
                    return v;
                }
            )
            : null;
    }

    const handleChange = (event: ChangeEvent<{ value: unknown }>) => {
        setDepth(event.target.value as number);
    };

    const handleChangeRich = (event: ChangeEvent<HTMLInputElement>) => {
        setRich(event.target.checked as boolean);
    };

    return <div className="m-4">
        <div className={styles.inputDiv}>
            <br/>
            <br/>
            <TicTacToe size={props.size} onBoardChange={setBoard} onPlayerChange={setPlayer}/>

            <div className="text-center">
                <br/>
                <FormControlLabel
                    control={<Switch checked={rich} onChange={handleChangeRich} name="Rich Mode"/>}
                    label="Rich Mode"
                />
                <FormControl variant="filled" style={{width: "8rem", height: "6rem", marginRight: "1rem"}}>
                    <InputLabel id="depth selector">Depth</InputLabel>
                    <Select
                        labelId="depth selector"
                        value={depth}
                        onChange={handleChange}
                    >
                        <MenuItem value={1}>1</MenuItem>
                        <MenuItem value={2}>2</MenuItem>
                        <MenuItem value={3}>3</MenuItem>
                        <MenuItem value={4}>4</MenuItem>
                        <MenuItem value={5}>5</MenuItem>
                        <MenuItem value={6}>6</MenuItem>
                        <MenuItem value={9}>9 (Unbeatable)</MenuItem>
                    </Select>
                </FormControl>
                <Button onClick={
                    () => {
                        fetchResult("t".repeat(props.size))();
                    }
                } style={{...noBorder, height: "3.5rem"}} variant={"contained"}>
                    <Typography variant="subtitle2">
                        Analyze Position
                    </Typography>
                </Button>
            </div>
        </div>
        <div className={styles.resultCard}>
            <div className={styles.tree}>
                {
                    !loading ? <TreeView
                        defaultCollapseIcon={<ExpandMoreIcon/>}
                        defaultExpandIcon={<ChevronRightIcon/>}>
                        <FlipMove>
                            {
                                display()
                            }
                        </FlipMove>
                    </TreeView> : <Typography variant={"subtitle2"}>
                        Loading...
                    </Typography>
                }
            </div>

            <br/>
            <br/>

            <LinearProgressWithLabel value={result.Score}/>
        </div>
    </div>;
}