go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/headerNavbar.tsx (about)

     1  /**
     2   * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved.
     3   * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
     4   */
     5  'use client';
     6  
     7  import * as React from 'react';
     8  import * as graphApi from '../api/graphs';
     9  import { Navbar, NavbarDivider, Alignment, Button, Spinner, Intent, OverlayToaster, Position, Tooltip, Icon, Popover, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
    10  import { useSession } from './sessionProvider';
    11  
    12  export interface HeaderNavbarProps {
    13    graph: graphApi.Graph;
    14    stabilizing: boolean;
    15    onAdd: () => void;
    16    onRemove: () => void;
    17    onDuplicate: () => void;
    18    onLink: () => void;
    19    onSave: () => void;
    20    onLoad: () => void;
    21    onOmnibar: () => void;
    22    onStabilize: () => void;
    23    onRefresh: () => void;
    24    onAddGraph: () => void;
    25    onShowGraphLogs: () => void;
    26    onShowGraphs: () => void;
    27  }
    28  
    29  export function HeaderNavbar(props: HeaderNavbarProps) {
    30    const session = useSession();
    31    if (!session.authorized) {
    32      return <></>
    33    }
    34  
    35    return (
    36      <>
    37        <Navbar>
    38          <Navbar.Group align={Alignment.LEFT}>
    39            <Navbar.Heading>
    40              <h1 id="title">Nodes</h1>
    41            </Navbar.Heading>
    42          </Navbar.Group>
    43          <Navbar.Group align={Alignment.LEFT}>
    44            <Button id="graph-selector" minimal={true} onClick={props.onShowGraphs}>{props.graph.label}</Button>
    45          </Navbar.Group>
    46          <Navbar.Group align={Alignment.RIGHT}>
    47            <Popover content={<Menu>
    48              <MenuItem icon="add" intent={Intent.SUCCESS} text={"New Graph"} onClick={props.onAddGraph} />
    49              <MenuDivider />
    50              <MenuItem icon="application" text={"Show Logs"} onClick={props.onShowGraphLogs} />
    51              <MenuItem icon="cog" text={"Manage Graphs"} onClick={props.onShowGraphs} />
    52              <MenuDivider />
    53              <MenuItem icon="cloud-upload" text={"Upload Graph From File"} onClick={props.onLoad} />
    54              <MenuItem icon="cloud-download" text={"Download Graph As File"} onClick={props.onSave} />
    55            </Menu>} fill={true} placement="bottom">
    56              <Button
    57                alignText="left"
    58                fill={true}
    59                icon="applications"
    60                rightIcon="caret-down"
    61                text="Graph"
    62                minimal={true}
    63              />
    64            </Popover>
    65            <Popover content={<Menu>
    66              <MenuItem icon="add" intent={Intent.SUCCESS} text={"New Node"} onClick={props.onAdd} />
    67              <MenuDivider />
    68              <MenuItem icon="new-link" text={"Link Nodes"} onClick={props.onLink} />
    69              <MenuItem icon="duplicate" text={"Duplicate Nodes"} onClick={props.onDuplicate} />
    70              <MenuDivider />
    71              <MenuItem icon="delete" intent={Intent.DANGER} text={"Remove Nodes"} onClick={props.onRemove} />
    72            </Menu>} fill={true} placement="bottom">
    73              <Button
    74                alignText="left"
    75                fill={true}
    76                icon="document"
    77                rightIcon="caret-down"
    78                text="Nodes"
    79                minimal={true}
    80              />
    81            </Popover>
    82            <NavbarDivider />
    83            <Tooltip content={"Stabilize the computation; recomputing nodes that may have changed."} position='bottom-left' intent={Intent.PRIMARY} >
    84              <Button onClick={props.onStabilize} intent={Intent.PRIMARY} className={`bp5-navbar-item bp5-button ${props.stabilizing ? "" : "bp5-icon-refresh"}`} title="Stabilize" disabled={props.stabilizing} style={{ width: "96px" }}> {
    85                props.stabilizing ? <Spinner size={10} intent={Intent.PRIMARY} /> : <>Stabilize</>
    86              }</Button>
    87            </Tooltip>
    88            <NavbarDivider />
    89            <img className="header-profile-image" src={session.state?.User?.PictureURL} />
    90            <NavbarDivider />
    91            <Tooltip content={"Log out the current session."} position='bottom-left'>
    92              <a role="button" className="bp5-button bp5-minimal" href="/logout"><Icon icon="log-out" /></a>
    93            </Tooltip>
    94          </Navbar.Group>
    95        </Navbar>
    96      </>
    97    )
    98  }