// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SideNav display the correct GKE metadata 1`] = `
<SideNav
  buildInfo={Object {}}
  gkeMetadata={
    Object {
      "clusterName": "some-cluster-name",
      "projectId": "some-project-id",
    }
  }
  history={Object {}}
  page="/pipelines"
>
  <div
    className="root flexColumn noShrink"
    id="sideNav"
  >
    <div
      style={
        Object {
          "flexGrow": 1,
        }
      }
    >
      <div
        className="indicator"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Pipeline List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-60",
              "popperInteractive": "MuiTooltip-popperInteractive-61",
              "tooltip": "MuiTooltip-tooltip-62",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
              "touch": "MuiTooltip-touch-63",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Pipeline List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="pipelinesBtn"
              replace={false}
              title={null}
              to="/pipelines"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/pipelines"
                id="pipelinesBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button active"
                >
                  <Button
                    className="button active"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-89",
                        "contained": "MuiButton-contained-79",
                        "containedPrimary": "MuiButton-containedPrimary-80",
                        "containedSecondary": "MuiButton-containedSecondary-81",
                        "disabled": "MuiButton-disabled-88",
                        "extendedFab": "MuiButton-extendedFab-86",
                        "fab": "MuiButton-fab-85",
                        "flat": "MuiButton-flat-73",
                        "flatPrimary": "MuiButton-flatPrimary-74",
                        "flatSecondary": "MuiButton-flatSecondary-75",
                        "focusVisible": "MuiButton-focusVisible-87",
                        "fullWidth": "MuiButton-fullWidth-93",
                        "label": "MuiButton-label-69",
                        "mini": "MuiButton-mini-90",
                        "outlined": "MuiButton-outlined-76",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-77",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-78",
                        "raised": "MuiButton-raised-82",
                        "raisedPrimary": "MuiButton-raisedPrimary-83",
                        "raisedSecondary": "MuiButton-raisedSecondary-84",
                        "root": "MuiButton-root-68",
                        "sizeLarge": "MuiButton-sizeLarge-92",
                        "sizeSmall": "MuiButton-sizeSmall-91",
                        "text": "MuiButton-text-70",
                        "textPrimary": "MuiButton-textPrimary-71",
                        "textSecondary": "MuiButton-textSecondary-72",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button active"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-87"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button active"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-95",
                            "focusVisible": "MuiButtonBase-focusVisible-96",
                            "root": "MuiButtonBase-root-94",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-87"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button active"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-69"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <div
                                className="alignItems"
                              >
                                <PipelinesIcon
                                  color="#0d6de7"
                                >
                                  <svg
                                    height="20px"
                                    version="1.1"
                                    viewBox="0 0 20 20"
                                    width="20px"
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlnsXlink="http://www.w3.org/1999/xlink"
                                  >
                                    <g
                                      fill="none"
                                      fillRule="evenodd"
                                      id="Symbols"
                                      stroke="none"
                                      strokeWidth="1"
                                    >
                                      <g
                                        transform="translate(-2.000000, -4.000000)"
                                      >
                                        <polygon
                                          id="Shape"
                                          points="0 0 24 0 24 24 0 24"
                                        />
                                        <path
                                          d="M12.7244079,9.74960425 L17.4807112,9.74960425 C17.7675226,9.74960425 18,9.51894323 18,9.23437272 L18,4.51523153 C18,4.23066102 17.7675226,4 17.4807112,4 L12.7244079,4 C12.4375965,4 12.2051191,4.23066102 12.2051191,4.51523153 L12.2051191,6.06125154 L9.98218019,6.06125154 C9.52936032,6.06125154 9.16225043,6.42549311 9.16225043,6.87477501 L9.16225043,11.2135669 L7.05995053,11.2135669 C6.71661861,10.189612 5.74374462,9.45093267 4.59644424,9.45093267 C3.16249641,9.45093267 2,10.6043462 2,12.0270903 C2,13.4498886 3.16249641,14.603248 4.59644424,14.603248 C5.74379928,14.603248 6.71661861,13.8645687 7.06000519,12.8406138 L9.16225043,12.8406138 L9.16225043,17.1794057 C9.16225043,17.6286875 9.52936032,17.9929291 9.98218019,17.9929291 L12.2051191,17.9929291 L12.2051191,19.4847685 C12.2051191,19.769339 12.4375965,20 12.7244079,20 L17.4807112,20 C17.7675226,20 18,19.769339 18,19.4847685 L18,14.7656273 C18,14.4810568 17.7675226,14.2503957 17.4807112,14.2503957 L12.7244079,14.2503957 C12.4375965,14.2503957 12.2051191,14.4810568 12.2051191,14.7656273 L12.2051191,16.3658822 L10.80211,16.3658822 L10.80211,7.68829848 L12.2051191,7.68829848 L12.2051191,9.23437272 C12.2051191,9.51894323 12.4375965,9.74960425 12.7244079,9.74960425 Z"
                                          fill="#0d6de7"
                                          id="Path"
                                        />
                                      </g>
                                    </g>
                                  </svg>
                                </PipelinesIcon>
                              </div>
                              <span
                                className="label"
                              >
                                Pipelines
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-116",
                                    "childLeaving": "MuiTouchRipple-childLeaving-117",
                                    "childPulsate": "MuiTouchRipple-childPulsate-118",
                                    "ripple": "MuiTouchRipple-ripple-113",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-115",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-114",
                                    "root": "MuiTouchRipple-root-112",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-112"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-112"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/pipelines"
                id="pipelinesBtn"
              >
                <button
                  class="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button active"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-69"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <div
                        class="alignItems"
                      >
                        <svg
                          height="20px"
                          version="1.1"
                          viewBox="0 0 20 20"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                        >
                          <g
                            fill="none"
                            fill-rule="evenodd"
                            id="Symbols"
                            stroke="none"
                            stroke-width="1"
                          >
                            <g
                              transform="translate(-2.000000, -4.000000)"
                            >
                              <polygon
                                id="Shape"
                                points="0 0 24 0 24 24 0 24"
                              />
                              <path
                                d="M12.7244079,9.74960425 L17.4807112,9.74960425 C17.7675226,9.74960425 18,9.51894323 18,9.23437272 L18,4.51523153 C18,4.23066102 17.7675226,4 17.4807112,4 L12.7244079,4 C12.4375965,4 12.2051191,4.23066102 12.2051191,4.51523153 L12.2051191,6.06125154 L9.98218019,6.06125154 C9.52936032,6.06125154 9.16225043,6.42549311 9.16225043,6.87477501 L9.16225043,11.2135669 L7.05995053,11.2135669 C6.71661861,10.189612 5.74374462,9.45093267 4.59644424,9.45093267 C3.16249641,9.45093267 2,10.6043462 2,12.0270903 C2,13.4498886 3.16249641,14.603248 4.59644424,14.603248 C5.74379928,14.603248 6.71661861,13.8645687 7.06000519,12.8406138 L9.16225043,12.8406138 L9.16225043,17.1794057 C9.16225043,17.6286875 9.52936032,17.9929291 9.98218019,17.9929291 L12.2051191,17.9929291 L12.2051191,19.4847685 C12.2051191,19.769339 12.4375965,20 12.7244079,20 L17.4807112,20 C17.7675226,20 18,19.769339 18,19.4847685 L18,14.7656273 C18,14.4810568 17.7675226,14.2503957 17.4807112,14.2503957 L12.7244079,14.2503957 C12.4375965,14.2503957 12.2051191,14.4810568 12.2051191,14.7656273 L12.2051191,16.3658822 L10.80211,16.3658822 L10.80211,7.68829848 L12.2051191,7.68829848 L12.2051191,9.23437272 C12.2051191,9.51894323 12.4375965,9.74960425 12.7244079,9.74960425 Z"
                                fill="#0d6de7"
                                id="Path"
                              />
                            </g>
                          </g>
                        </svg>
                      </div>
                      <span
                        class="label"
                      >
                        Pipelines
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-112"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-60"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Experiment List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-60",
              "popperInteractive": "MuiTooltip-popperInteractive-61",
              "tooltip": "MuiTooltip-tooltip-62",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
              "touch": "MuiTooltip-touch-63",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Experiment List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="experimentsBtn"
              replace={false}
              title={null}
              to="/experiments"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/experiments"
                id="experimentsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-89",
                        "contained": "MuiButton-contained-79",
                        "containedPrimary": "MuiButton-containedPrimary-80",
                        "containedSecondary": "MuiButton-containedSecondary-81",
                        "disabled": "MuiButton-disabled-88",
                        "extendedFab": "MuiButton-extendedFab-86",
                        "fab": "MuiButton-fab-85",
                        "flat": "MuiButton-flat-73",
                        "flatPrimary": "MuiButton-flatPrimary-74",
                        "flatSecondary": "MuiButton-flatSecondary-75",
                        "focusVisible": "MuiButton-focusVisible-87",
                        "fullWidth": "MuiButton-fullWidth-93",
                        "label": "MuiButton-label-69",
                        "mini": "MuiButton-mini-90",
                        "outlined": "MuiButton-outlined-76",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-77",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-78",
                        "raised": "MuiButton-raised-82",
                        "raisedPrimary": "MuiButton-raisedPrimary-83",
                        "raisedSecondary": "MuiButton-raisedSecondary-84",
                        "root": "MuiButton-root-68",
                        "sizeLarge": "MuiButton-sizeLarge-92",
                        "sizeSmall": "MuiButton-sizeSmall-91",
                        "text": "MuiButton-text-70",
                        "textPrimary": "MuiButton-textPrimary-71",
                        "textSecondary": "MuiButton-textSecondary-72",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-87"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-95",
                            "focusVisible": "MuiButtonBase-focusVisible-96",
                            "root": "MuiButtonBase-root-94",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-87"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-69"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <div
                                className="alignItems"
                              >
                                <ExperimentsIcon
                                  color="#9aa0a6"
                                >
                                  <svg
                                    height="20"
                                    viewBox="0 0 20 12"
                                    width="20"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <g
                                      fill="none"
                                      fillRule="evenodd"
                                      id="Symbols"
                                    >
                                      <g
                                        transform="translate(-26 -72)"
                                      >
                                        <g
                                          transform="translate(0 12)"
                                        >
                                          <g
                                            transform="translate(0 44)"
                                          >
                                            <g
                                              id="Group-3"
                                            >
                                              <g
                                                transform="translate(26 12)"
                                              >
                                                <polygon
                                                  points="0 0 20 0 20 20 0 20"
                                                />
                                                <path
                                                  d="M15,5.83333333 L13.825,4.65833333 L8.54166667,9.94166667 L9.71666667,11.1166667 L15,5.83333333 Z M18.5333333,4.65833333 L9.71666667,13.475 L6.23333333,10 L5.05833333,11.175 L9.71666667,15.8333333 L19.7166667,5.83333333 L18.5333333,4.65833333 Z M0.341666667,11.175 L5,15.8333333 L6.175,14.6583333 L1.525,10 L0.341666667,11.175 Z"
                                                  fill="#9aa0a6"
                                                  fillRule="nonzero"
                                                />
                                              </g>
                                            </g>
                                          </g>
                                        </g>
                                      </g>
                                    </g>
                                  </svg>
                                </ExperimentsIcon>
                              </div>
                              <span
                                className="label"
                              >
                                Experiments
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-116",
                                    "childLeaving": "MuiTouchRipple-childLeaving-117",
                                    "childPulsate": "MuiTouchRipple-childPulsate-118",
                                    "ripple": "MuiTouchRipple-ripple-113",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-115",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-114",
                                    "root": "MuiTouchRipple-root-112",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-112"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-112"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/experiments"
                id="experimentsBtn"
              >
                <button
                  class="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-69"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <div
                        class="alignItems"
                      >
                        <svg
                          height="20"
                          viewBox="0 0 20 12"
                          width="20"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g
                            fill="none"
                            fill-rule="evenodd"
                            id="Symbols"
                          >
                            <g
                              transform="translate(-26 -72)"
                            >
                              <g
                                transform="translate(0 12)"
                              >
                                <g
                                  transform="translate(0 44)"
                                >
                                  <g
                                    id="Group-3"
                                  >
                                    <g
                                      transform="translate(26 12)"
                                    >
                                      <polygon
                                        points="0 0 20 0 20 20 0 20"
                                      />
                                      <path
                                        d="M15,5.83333333 L13.825,4.65833333 L8.54166667,9.94166667 L9.71666667,11.1166667 L15,5.83333333 Z M18.5333333,4.65833333 L9.71666667,13.475 L6.23333333,10 L5.05833333,11.175 L9.71666667,15.8333333 L19.7166667,5.83333333 L18.5333333,4.65833333 Z M0.341666667,11.175 L5,15.8333333 L6.175,14.6583333 L1.525,10 L0.341666667,11.175 Z"
                                        fill="#9aa0a6"
                                        fill-rule="nonzero"
                                      />
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </svg>
                      </div>
                      <span
                        class="label"
                      >
                        Experiments
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-112"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-60"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Runs List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-60",
              "popperInteractive": "MuiTooltip-popperInteractive-61",
              "tooltip": "MuiTooltip-tooltip-62",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
              "touch": "MuiTooltip-touch-63",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Runs List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="runsBtn"
              replace={false}
              title={null}
              to="/runs"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/runs"
                id="runsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-89",
                        "contained": "MuiButton-contained-79",
                        "containedPrimary": "MuiButton-containedPrimary-80",
                        "containedSecondary": "MuiButton-containedSecondary-81",
                        "disabled": "MuiButton-disabled-88",
                        "extendedFab": "MuiButton-extendedFab-86",
                        "fab": "MuiButton-fab-85",
                        "flat": "MuiButton-flat-73",
                        "flatPrimary": "MuiButton-flatPrimary-74",
                        "flatSecondary": "MuiButton-flatSecondary-75",
                        "focusVisible": "MuiButton-focusVisible-87",
                        "fullWidth": "MuiButton-fullWidth-93",
                        "label": "MuiButton-label-69",
                        "mini": "MuiButton-mini-90",
                        "outlined": "MuiButton-outlined-76",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-77",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-78",
                        "raised": "MuiButton-raised-82",
                        "raisedPrimary": "MuiButton-raisedPrimary-83",
                        "raisedSecondary": "MuiButton-raisedSecondary-84",
                        "root": "MuiButton-root-68",
                        "sizeLarge": "MuiButton-sizeLarge-92",
                        "sizeSmall": "MuiButton-sizeSmall-91",
                        "text": "MuiButton-text-70",
                        "textPrimary": "MuiButton-textPrimary-71",
                        "textSecondary": "MuiButton-textSecondary-72",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-87"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-95",
                            "focusVisible": "MuiButtonBase-focusVisible-96",
                            "root": "MuiButtonBase-root-94",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-87"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-69"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(DirectionsRunIcon)>
                                <DirectionsRunIcon>
                                  <WithStyles(SvgIcon)>
                                    <SvgIcon
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-100",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-102",
                                          "colorError": "MuiSvgIcon-colorError-101",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-98",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-99",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-103",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-105",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-104",
                                          "root": "MuiSvgIcon-root-97",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-97"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </DirectionsRunIcon>
                              </pure(DirectionsRunIcon)>
                              <span
                                className="label"
                              >
                                Runs
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-116",
                                    "childLeaving": "MuiTouchRipple-childLeaving-117",
                                    "childPulsate": "MuiTouchRipple-childPulsate-118",
                                    "ripple": "MuiTouchRipple-ripple-113",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-115",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-114",
                                    "root": "MuiTouchRipple-root-112",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-112"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-112"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/runs"
                id="runsBtn"
              >
                <button
                  class="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-69"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-97"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                        <path
                          d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
                        />
                      </svg>
                      <span
                        class="label"
                      >
                        Runs
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-112"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-60"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Recurring Runs List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-60",
              "popperInteractive": "MuiTooltip-popperInteractive-61",
              "tooltip": "MuiTooltip-tooltip-62",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
              "touch": "MuiTooltip-touch-63",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Recurring Runs List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="recurringRunsBtn"
              replace={false}
              title={null}
              to="/recurringruns"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/recurringruns"
                id="recurringRunsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-89",
                        "contained": "MuiButton-contained-79",
                        "containedPrimary": "MuiButton-containedPrimary-80",
                        "containedSecondary": "MuiButton-containedSecondary-81",
                        "disabled": "MuiButton-disabled-88",
                        "extendedFab": "MuiButton-extendedFab-86",
                        "fab": "MuiButton-fab-85",
                        "flat": "MuiButton-flat-73",
                        "flatPrimary": "MuiButton-flatPrimary-74",
                        "flatSecondary": "MuiButton-flatSecondary-75",
                        "focusVisible": "MuiButton-focusVisible-87",
                        "fullWidth": "MuiButton-fullWidth-93",
                        "label": "MuiButton-label-69",
                        "mini": "MuiButton-mini-90",
                        "outlined": "MuiButton-outlined-76",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-77",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-78",
                        "raised": "MuiButton-raised-82",
                        "raisedPrimary": "MuiButton-raisedPrimary-83",
                        "raisedSecondary": "MuiButton-raisedSecondary-84",
                        "root": "MuiButton-root-68",
                        "sizeLarge": "MuiButton-sizeLarge-92",
                        "sizeSmall": "MuiButton-sizeSmall-91",
                        "text": "MuiButton-text-70",
                        "textPrimary": "MuiButton-textPrimary-71",
                        "textSecondary": "MuiButton-textSecondary-72",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-87"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-95",
                            "focusVisible": "MuiButtonBase-focusVisible-96",
                            "root": "MuiButtonBase-root-94",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-87"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-69"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(AlarmIcon)>
                                <AlarmIcon>
                                  <WithStyles(SvgIcon)>
                                    <SvgIcon
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-100",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-102",
                                          "colorError": "MuiSvgIcon-colorError-101",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-98",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-99",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-103",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-105",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-104",
                                          "root": "MuiSvgIcon-root-97",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-97"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </AlarmIcon>
                              </pure(AlarmIcon)>
                              <span
                                className="label"
                              >
                                Recurring Runs
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-116",
                                    "childLeaving": "MuiTouchRipple-childLeaving-117",
                                    "childPulsate": "MuiTouchRipple-childPulsate-118",
                                    "ripple": "MuiTouchRipple-ripple-113",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-115",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-114",
                                    "root": "MuiTouchRipple-root-112",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-112"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-112"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/recurringruns"
                id="recurringRunsBtn"
              >
                <button
                  class="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-69"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-97"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                        <path
                          d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
                        />
                      </svg>
                      <span
                        class="label"
                      >
                        Recurring Runs
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-112"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-60"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Artifacts List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-60",
              "popperInteractive": "MuiTooltip-popperInteractive-61",
              "tooltip": "MuiTooltip-tooltip-62",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
              "touch": "MuiTooltip-touch-63",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Artifacts List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="artifactsBtn"
              replace={false}
              title={null}
              to="/artifacts"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/artifacts"
                id="artifactsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-89",
                        "contained": "MuiButton-contained-79",
                        "containedPrimary": "MuiButton-containedPrimary-80",
                        "containedSecondary": "MuiButton-containedSecondary-81",
                        "disabled": "MuiButton-disabled-88",
                        "extendedFab": "MuiButton-extendedFab-86",
                        "fab": "MuiButton-fab-85",
                        "flat": "MuiButton-flat-73",
                        "flatPrimary": "MuiButton-flatPrimary-74",
                        "flatSecondary": "MuiButton-flatSecondary-75",
                        "focusVisible": "MuiButton-focusVisible-87",
                        "fullWidth": "MuiButton-fullWidth-93",
                        "label": "MuiButton-label-69",
                        "mini": "MuiButton-mini-90",
                        "outlined": "MuiButton-outlined-76",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-77",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-78",
                        "raised": "MuiButton-raised-82",
                        "raisedPrimary": "MuiButton-raisedPrimary-83",
                        "raisedSecondary": "MuiButton-raisedSecondary-84",
                        "root": "MuiButton-root-68",
                        "sizeLarge": "MuiButton-sizeLarge-92",
                        "sizeSmall": "MuiButton-sizeSmall-91",
                        "text": "MuiButton-text-70",
                        "textPrimary": "MuiButton-textPrimary-71",
                        "textSecondary": "MuiButton-textSecondary-72",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-87"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-95",
                            "focusVisible": "MuiButtonBase-focusVisible-96",
                            "root": "MuiButtonBase-root-94",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-87"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-69"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(BubbleChartIcon)>
                                <BubbleChartIcon>
                                  <WithStyles(SvgIcon)>
                                    <SvgIcon
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-100",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-102",
                                          "colorError": "MuiSvgIcon-colorError-101",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-98",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-99",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-103",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-105",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-104",
                                          "root": "MuiSvgIcon-root-97",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-97"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <circle
                                          cx="7.2"
                                          cy="14.4"
                                          r="3.2"
                                        />
                                        <circle
                                          cx="14.8"
                                          cy="18"
                                          r="2"
                                        />
                                        <circle
                                          cx="15.2"
                                          cy="8.8"
                                          r="4.8"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </BubbleChartIcon>
                              </pure(BubbleChartIcon)>
                              <span
                                className="label"
                              >
                                Artifacts
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-116",
                                    "childLeaving": "MuiTouchRipple-childLeaving-117",
                                    "childPulsate": "MuiTouchRipple-childPulsate-118",
                                    "ripple": "MuiTouchRipple-ripple-113",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-115",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-114",
                                    "root": "MuiTouchRipple-root-112",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-112"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-112"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/artifacts"
                id="artifactsBtn"
              >
                <button
                  class="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-69"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-97"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                        <circle
                          cx="7.2"
                          cy="14.4"
                          r="3.2"
                        />
                        <circle
                          cx="14.8"
                          cy="18"
                          r="2"
                        />
                        <circle
                          cx="15.2"
                          cy="8.8"
                          r="4.8"
                        />
                      </svg>
                      <span
                        class="label"
                      >
                        Artifacts
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-112"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-60"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Executions List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-60",
              "popperInteractive": "MuiTooltip-popperInteractive-61",
              "tooltip": "MuiTooltip-tooltip-62",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
              "touch": "MuiTooltip-touch-63",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Executions List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="executionsBtn"
              replace={false}
              title={null}
              to="/executions"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/executions"
                id="executionsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-89",
                        "contained": "MuiButton-contained-79",
                        "containedPrimary": "MuiButton-containedPrimary-80",
                        "containedSecondary": "MuiButton-containedSecondary-81",
                        "disabled": "MuiButton-disabled-88",
                        "extendedFab": "MuiButton-extendedFab-86",
                        "fab": "MuiButton-fab-85",
                        "flat": "MuiButton-flat-73",
                        "flatPrimary": "MuiButton-flatPrimary-74",
                        "flatSecondary": "MuiButton-flatSecondary-75",
                        "focusVisible": "MuiButton-focusVisible-87",
                        "fullWidth": "MuiButton-fullWidth-93",
                        "label": "MuiButton-label-69",
                        "mini": "MuiButton-mini-90",
                        "outlined": "MuiButton-outlined-76",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-77",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-78",
                        "raised": "MuiButton-raised-82",
                        "raisedPrimary": "MuiButton-raisedPrimary-83",
                        "raisedSecondary": "MuiButton-raisedSecondary-84",
                        "root": "MuiButton-root-68",
                        "sizeLarge": "MuiButton-sizeLarge-92",
                        "sizeSmall": "MuiButton-sizeSmall-91",
                        "text": "MuiButton-text-70",
                        "textPrimary": "MuiButton-textPrimary-71",
                        "textSecondary": "MuiButton-textSecondary-72",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-87"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-95",
                            "focusVisible": "MuiButtonBase-focusVisible-96",
                            "root": "MuiButtonBase-root-94",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-87"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-69"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(PlayArrowIcon)>
                                <PlayArrowIcon>
                                  <WithStyles(SvgIcon)>
                                    <SvgIcon
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-100",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-102",
                                          "colorError": "MuiSvgIcon-colorError-101",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-98",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-99",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-103",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-105",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-104",
                                          "root": "MuiSvgIcon-root-97",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-97"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8 5v14l11-7z"
                                        />
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </PlayArrowIcon>
                              </pure(PlayArrowIcon)>
                              <span
                                className="label"
                              >
                                Executions
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-116",
                                    "childLeaving": "MuiTouchRipple-childLeaving-117",
                                    "childPulsate": "MuiTouchRipple-childPulsate-118",
                                    "ripple": "MuiTouchRipple-ripple-113",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-115",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-114",
                                    "root": "MuiTouchRipple-root-112",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-112"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-112"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/executions"
                id="executionsBtn"
              >
                <button
                  class="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-69"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-97"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M8 5v14l11-7z"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                      <span
                        class="label"
                      >
                        Executions
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-112"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-60"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <hr
        className="separator"
      />
      <ExternalUri
        collapsed={false}
        icon={[Function]}
        title="Documentation"
        to="https://www.kubeflow.org/docs/pipelines/"
      >
        <WithStyles(Tooltip)
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          placement="right-start"
          title="Documentation"
        >
          <Tooltip
            TransitionComponent={[Function]}
            classes={
              Object {
                "popper": "MuiTooltip-popper-60",
                "popperInteractive": "MuiTooltip-popperInteractive-61",
                "tooltip": "MuiTooltip-tooltip-62",
                "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
                "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
                "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
                "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
                "touch": "MuiTooltip-touch-63",
              }
            }
            disableFocusListener={true}
            disableHoverListener={true}
            disableTouchListener={true}
            enterDelay={300}
            enterTouchDelay={1000}
            interactive={false}
            leaveDelay={0}
            leaveTouchDelay={1500}
            placement="right-start"
            theme={
              Object {
                "breakpoints": Object {
                  "between": [Function],
                  "down": [Function],
                  "keys": Array [
                    "xs",
                    "sm",
                    "md",
                    "lg",
                    "xl",
                  ],
                  "only": [Function],
                  "up": [Function],
                  "values": Object {
                    "lg": 1280,
                    "md": 960,
                    "sm": 600,
                    "xl": 1920,
                    "xs": 0,
                  },
                  "width": [Function],
                },
                "direction": "ltr",
                "mixins": Object {
                  "gutters": [Function],
                  "toolbar": Object {
                    "@media (min-width:0px) and (orientation: landscape)": Object {
                      "minHeight": 48,
                    },
                    "@media (min-width:600px)": Object {
                      "minHeight": 64,
                    },
                    "minHeight": 56,
                  },
                },
                "overrides": Object {},
                "palette": Object {
                  "action": Object {
                    "active": "rgba(0, 0, 0, 0.54)",
                    "disabled": "rgba(0, 0, 0, 0.26)",
                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
                    "hover": "rgba(0, 0, 0, 0.08)",
                    "hoverOpacity": 0.08,
                    "selected": "rgba(0, 0, 0, 0.14)",
                  },
                  "augmentColor": [Function],
                  "background": Object {
                    "default": "#fafafa",
                    "paper": "#fff",
                  },
                  "common": Object {
                    "black": "#000",
                    "white": "#fff",
                  },
                  "contrastThreshold": 3,
                  "divider": "rgba(0, 0, 0, 0.12)",
                  "error": Object {
                    "contrastText": "#fff",
                    "dark": "#d32f2f",
                    "light": "#e57373",
                    "main": "#f44336",
                  },
                  "getContrastText": [Function],
                  "grey": Object {
                    "100": "#f5f5f5",
                    "200": "#eeeeee",
                    "300": "#e0e0e0",
                    "400": "#bdbdbd",
                    "50": "#fafafa",
                    "500": "#9e9e9e",
                    "600": "#757575",
                    "700": "#616161",
                    "800": "#424242",
                    "900": "#212121",
                    "A100": "#d5d5d5",
                    "A200": "#aaaaaa",
                    "A400": "#303030",
                    "A700": "#616161",
                  },
                  "primary": Object {
                    "contrastText": "#fff",
                    "dark": "#303f9f",
                    "light": "#7986cb",
                    "main": "#3f51b5",
                  },
                  "secondary": Object {
                    "contrastText": "#fff",
                    "dark": "#c51162",
                    "light": "#ff4081",
                    "main": "#f50057",
                  },
                  "text": Object {
                    "disabled": "rgba(0, 0, 0, 0.38)",
                    "hint": "rgba(0, 0, 0, 0.38)",
                    "primary": "rgba(0, 0, 0, 0.87)",
                    "secondary": "rgba(0, 0, 0, 0.54)",
                  },
                  "tonalOffset": 0.2,
                  "type": "light",
                },
                "props": Object {},
                "shadows": Array [
                  "none",
                  "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                  "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                  "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
                ],
                "shape": Object {
                  "borderRadius": 4,
                },
                "spacing": Object {
                  "unit": 8,
                },
                "transitions": Object {
                  "create": [Function],
                  "duration": Object {
                    "complex": 375,
                    "enteringScreen": 225,
                    "leavingScreen": 195,
                    "short": 250,
                    "shorter": 200,
                    "shortest": 150,
                    "standard": 300,
                  },
                  "easing": Object {
                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                  },
                  "getAutoHeightDuration": [Function],
                },
                "typography": Object {
                  "body1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 400,
                    "lineHeight": "1.46429em",
                  },
                  "body1Next": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00938em",
                    "lineHeight": 1.5,
                  },
                  "body2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "lineHeight": "1.71429em",
                  },
                  "body2Next": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.01071em",
                    "lineHeight": 1.5,
                  },
                  "button": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "textTransform": "uppercase",
                  },
                  "buttonNext": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.02857em",
                    "lineHeight": 1.75,
                    "textTransform": "uppercase",
                  },
                  "caption": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "lineHeight": "1.375em",
                  },
                  "captionNext": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.03333em",
                    "lineHeight": 1.66,
                  },
                  "display1": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.125rem",
                    "fontWeight": 400,
                    "lineHeight": "1.20588em",
                  },
                  "display2": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.8125rem",
                    "fontWeight": 400,
                    "lineHeight": "1.13333em",
                    "marginLeft": "-.02em",
                  },
                  "display3": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3.5rem",
                    "fontWeight": 400,
                    "letterSpacing": "-.02em",
                    "lineHeight": "1.30357em",
                    "marginLeft": "-.02em",
                  },
                  "display4": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "7rem",
                    "fontWeight": 300,
                    "letterSpacing": "-.04em",
                    "lineHeight": "1.14286em",
                    "marginLeft": "-.04em",
                  },
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": 14,
                  "fontWeightLight": 300,
                  "fontWeightMedium": 500,
                  "fontWeightRegular": 400,
                  "h1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "6rem",
                    "fontWeight": 300,
                    "letterSpacing": "-0.01562em",
                    "lineHeight": 1,
                  },
                  "h2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3.75rem",
                    "fontWeight": 300,
                    "letterSpacing": "-0.00833em",
                    "lineHeight": 1,
                  },
                  "h3": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3rem",
                    "fontWeight": 400,
                    "letterSpacing": "0em",
                    "lineHeight": 1.04,
                  },
                  "h4": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.125rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00735em",
                    "lineHeight": 1.17,
                  },
                  "h5": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.5rem",
                    "fontWeight": 400,
                    "letterSpacing": "0em",
                    "lineHeight": 1.33,
                  },
                  "h6": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.25rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.0075em",
                    "lineHeight": 1.6,
                  },
                  "headline": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.5rem",
                    "fontWeight": 400,
                    "lineHeight": "1.35417em",
                  },
                  "overline": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.08333em",
                    "lineHeight": 2.66,
                    "textTransform": "uppercase",
                  },
                  "pxToRem": [Function],
                  "round": [Function],
                  "subheading": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "lineHeight": "1.5em",
                  },
                  "subtitle1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00938em",
                    "lineHeight": 1.75,
                  },
                  "subtitle2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.00714em",
                    "lineHeight": 1.57,
                  },
                  "title": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.3125rem",
                    "fontWeight": 500,
                    "lineHeight": "1.16667em",
                  },
                  "useNextVariants": false,
                },
                "zIndex": Object {
                  "appBar": 1100,
                  "drawer": 1200,
                  "mobileStepper": 1000,
                  "modal": 1300,
                  "snackbar": 1400,
                  "tooltip": 1500,
                },
              }
            }
            title="Documentation"
          >
            <RootRef
              rootRef={[Function]}
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="https://www.kubeflow.org/docs/pipelines/"
                rel="noopener noreferrer"
                target="_blank"
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-89",
                        "contained": "MuiButton-contained-79",
                        "containedPrimary": "MuiButton-containedPrimary-80",
                        "containedSecondary": "MuiButton-containedSecondary-81",
                        "disabled": "MuiButton-disabled-88",
                        "extendedFab": "MuiButton-extendedFab-86",
                        "fab": "MuiButton-fab-85",
                        "flat": "MuiButton-flat-73",
                        "flatPrimary": "MuiButton-flatPrimary-74",
                        "flatSecondary": "MuiButton-flatSecondary-75",
                        "focusVisible": "MuiButton-focusVisible-87",
                        "fullWidth": "MuiButton-fullWidth-93",
                        "label": "MuiButton-label-69",
                        "mini": "MuiButton-mini-90",
                        "outlined": "MuiButton-outlined-76",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-77",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-78",
                        "raised": "MuiButton-raised-82",
                        "raisedPrimary": "MuiButton-raisedPrimary-83",
                        "raisedSecondary": "MuiButton-raisedSecondary-84",
                        "root": "MuiButton-root-68",
                        "sizeLarge": "MuiButton-sizeLarge-92",
                        "sizeSmall": "MuiButton-sizeSmall-91",
                        "text": "MuiButton-text-70",
                        "textPrimary": "MuiButton-textPrimary-71",
                        "textSecondary": "MuiButton-textSecondary-72",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-87"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-95",
                            "focusVisible": "MuiButtonBase-focusVisible-96",
                            "root": "MuiButtonBase-root-94",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-87"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-69"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(DescriptionIcon)
                                className="icon"
                              >
                                <DescriptionIcon
                                  className="icon"
                                >
                                  <WithStyles(SvgIcon)
                                    className="icon"
                                  >
                                    <SvgIcon
                                      className="icon"
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-100",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-102",
                                          "colorError": "MuiSvgIcon-colorError-101",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-98",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-99",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-103",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-105",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-104",
                                          "root": "MuiSvgIcon-root-97",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-97 icon"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </DescriptionIcon>
                              </pure(DescriptionIcon)>
                              <span
                                className="label"
                              >
                                Documentation
                              </span>
                              <pure(OpenInNewIcon)
                                className="openInNewTabIcon"
                              >
                                <OpenInNewIcon
                                  className="openInNewTabIcon"
                                >
                                  <WithStyles(SvgIcon)
                                    className="openInNewTabIcon"
                                  >
                                    <SvgIcon
                                      className="openInNewTabIcon"
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-100",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-102",
                                          "colorError": "MuiSvgIcon-colorError-101",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-98",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-99",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-103",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-105",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-104",
                                          "root": "MuiSvgIcon-root-97",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-97 openInNewTabIcon"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </OpenInNewIcon>
                              </pure(OpenInNewIcon)>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-116",
                                    "childLeaving": "MuiTouchRipple-childLeaving-117",
                                    "childPulsate": "MuiTouchRipple-childPulsate-118",
                                    "ripple": "MuiTouchRipple-ripple-113",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-115",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-114",
                                    "root": "MuiTouchRipple-root-112",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-112"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-112"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </RootRef>
            <Popper
              anchorEl={
                <a
                  class="unstyled"
                  href="https://www.kubeflow.org/docs/pipelines/"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  <button
                    class="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-69"
                    >
                      <div
                        class="flex flex-row flex-shrink-0"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-97 icon"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                          <path
                            d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
                          />
                        </svg>
                        <span
                          class="label"
                        >
                          Documentation
                        </span>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-97 openInNewTabIcon"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                          <path
                            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
                          />
                        </svg>
                      </div>
                    </span>
                    <span
                      class="MuiTouchRipple-root-112"
                    />
                  </button>
                </a>
              }
              className="MuiTooltip-popper-60"
              disablePortal={false}
              id={null}
              open={false}
              placement="right-start"
              transition={true}
            />
          </Tooltip>
        </WithStyles(Tooltip)>
      </ExternalUri>
      <ExternalUri
        collapsed={false}
        icon={[Function]}
        title="Github Repo"
        to="https://github.com/kubeflow/pipelines"
      >
        <WithStyles(Tooltip)
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          placement="right-start"
          title="Github Repo"
        >
          <Tooltip
            TransitionComponent={[Function]}
            classes={
              Object {
                "popper": "MuiTooltip-popper-60",
                "popperInteractive": "MuiTooltip-popperInteractive-61",
                "tooltip": "MuiTooltip-tooltip-62",
                "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
                "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
                "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
                "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
                "touch": "MuiTooltip-touch-63",
              }
            }
            disableFocusListener={true}
            disableHoverListener={true}
            disableTouchListener={true}
            enterDelay={300}
            enterTouchDelay={1000}
            interactive={false}
            leaveDelay={0}
            leaveTouchDelay={1500}
            placement="right-start"
            theme={
              Object {
                "breakpoints": Object {
                  "between": [Function],
                  "down": [Function],
                  "keys": Array [
                    "xs",
                    "sm",
                    "md",
                    "lg",
                    "xl",
                  ],
                  "only": [Function],
                  "up": [Function],
                  "values": Object {
                    "lg": 1280,
                    "md": 960,
                    "sm": 600,
                    "xl": 1920,
                    "xs": 0,
                  },
                  "width": [Function],
                },
                "direction": "ltr",
                "mixins": Object {
                  "gutters": [Function],
                  "toolbar": Object {
                    "@media (min-width:0px) and (orientation: landscape)": Object {
                      "minHeight": 48,
                    },
                    "@media (min-width:600px)": Object {
                      "minHeight": 64,
                    },
                    "minHeight": 56,
                  },
                },
                "overrides": Object {},
                "palette": Object {
                  "action": Object {
                    "active": "rgba(0, 0, 0, 0.54)",
                    "disabled": "rgba(0, 0, 0, 0.26)",
                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
                    "hover": "rgba(0, 0, 0, 0.08)",
                    "hoverOpacity": 0.08,
                    "selected": "rgba(0, 0, 0, 0.14)",
                  },
                  "augmentColor": [Function],
                  "background": Object {
                    "default": "#fafafa",
                    "paper": "#fff",
                  },
                  "common": Object {
                    "black": "#000",
                    "white": "#fff",
                  },
                  "contrastThreshold": 3,
                  "divider": "rgba(0, 0, 0, 0.12)",
                  "error": Object {
                    "contrastText": "#fff",
                    "dark": "#d32f2f",
                    "light": "#e57373",
                    "main": "#f44336",
                  },
                  "getContrastText": [Function],
                  "grey": Object {
                    "100": "#f5f5f5",
                    "200": "#eeeeee",
                    "300": "#e0e0e0",
                    "400": "#bdbdbd",
                    "50": "#fafafa",
                    "500": "#9e9e9e",
                    "600": "#757575",
                    "700": "#616161",
                    "800": "#424242",
                    "900": "#212121",
                    "A100": "#d5d5d5",
                    "A200": "#aaaaaa",
                    "A400": "#303030",
                    "A700": "#616161",
                  },
                  "primary": Object {
                    "contrastText": "#fff",
                    "dark": "#303f9f",
                    "light": "#7986cb",
                    "main": "#3f51b5",
                  },
                  "secondary": Object {
                    "contrastText": "#fff",
                    "dark": "#c51162",
                    "light": "#ff4081",
                    "main": "#f50057",
                  },
                  "text": Object {
                    "disabled": "rgba(0, 0, 0, 0.38)",
                    "hint": "rgba(0, 0, 0, 0.38)",
                    "primary": "rgba(0, 0, 0, 0.87)",
                    "secondary": "rgba(0, 0, 0, 0.54)",
                  },
                  "tonalOffset": 0.2,
                  "type": "light",
                },
                "props": Object {},
                "shadows": Array [
                  "none",
                  "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                  "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                  "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
                ],
                "shape": Object {
                  "borderRadius": 4,
                },
                "spacing": Object {
                  "unit": 8,
                },
                "transitions": Object {
                  "create": [Function],
                  "duration": Object {
                    "complex": 375,
                    "enteringScreen": 225,
                    "leavingScreen": 195,
                    "short": 250,
                    "shorter": 200,
                    "shortest": 150,
                    "standard": 300,
                  },
                  "easing": Object {
                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                  },
                  "getAutoHeightDuration": [Function],
                },
                "typography": Object {
                  "body1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 400,
                    "lineHeight": "1.46429em",
                  },
                  "body1Next": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00938em",
                    "lineHeight": 1.5,
                  },
                  "body2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "lineHeight": "1.71429em",
                  },
                  "body2Next": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.01071em",
                    "lineHeight": 1.5,
                  },
                  "button": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "textTransform": "uppercase",
                  },
                  "buttonNext": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.02857em",
                    "lineHeight": 1.75,
                    "textTransform": "uppercase",
                  },
                  "caption": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "lineHeight": "1.375em",
                  },
                  "captionNext": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.03333em",
                    "lineHeight": 1.66,
                  },
                  "display1": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.125rem",
                    "fontWeight": 400,
                    "lineHeight": "1.20588em",
                  },
                  "display2": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.8125rem",
                    "fontWeight": 400,
                    "lineHeight": "1.13333em",
                    "marginLeft": "-.02em",
                  },
                  "display3": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3.5rem",
                    "fontWeight": 400,
                    "letterSpacing": "-.02em",
                    "lineHeight": "1.30357em",
                    "marginLeft": "-.02em",
                  },
                  "display4": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "7rem",
                    "fontWeight": 300,
                    "letterSpacing": "-.04em",
                    "lineHeight": "1.14286em",
                    "marginLeft": "-.04em",
                  },
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": 14,
                  "fontWeightLight": 300,
                  "fontWeightMedium": 500,
                  "fontWeightRegular": 400,
                  "h1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "6rem",
                    "fontWeight": 300,
                    "letterSpacing": "-0.01562em",
                    "lineHeight": 1,
                  },
                  "h2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3.75rem",
                    "fontWeight": 300,
                    "letterSpacing": "-0.00833em",
                    "lineHeight": 1,
                  },
                  "h3": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3rem",
                    "fontWeight": 400,
                    "letterSpacing": "0em",
                    "lineHeight": 1.04,
                  },
                  "h4": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.125rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00735em",
                    "lineHeight": 1.17,
                  },
                  "h5": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.5rem",
                    "fontWeight": 400,
                    "letterSpacing": "0em",
                    "lineHeight": 1.33,
                  },
                  "h6": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.25rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.0075em",
                    "lineHeight": 1.6,
                  },
                  "headline": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.5rem",
                    "fontWeight": 400,
                    "lineHeight": "1.35417em",
                  },
                  "overline": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.08333em",
                    "lineHeight": 2.66,
                    "textTransform": "uppercase",
                  },
                  "pxToRem": [Function],
                  "round": [Function],
                  "subheading": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "lineHeight": "1.5em",
                  },
                  "subtitle1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00938em",
                    "lineHeight": 1.75,
                  },
                  "subtitle2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.00714em",
                    "lineHeight": 1.57,
                  },
                  "title": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.3125rem",
                    "fontWeight": 500,
                    "lineHeight": "1.16667em",
                  },
                  "useNextVariants": false,
                },
                "zIndex": Object {
                  "appBar": 1100,
                  "drawer": 1200,
                  "mobileStepper": 1000,
                  "modal": 1300,
                  "snackbar": 1400,
                  "tooltip": 1500,
                },
              }
            }
            title="Github Repo"
          >
            <RootRef
              rootRef={[Function]}
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="https://github.com/kubeflow/pipelines"
                rel="noopener noreferrer"
                target="_blank"
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-89",
                        "contained": "MuiButton-contained-79",
                        "containedPrimary": "MuiButton-containedPrimary-80",
                        "containedSecondary": "MuiButton-containedSecondary-81",
                        "disabled": "MuiButton-disabled-88",
                        "extendedFab": "MuiButton-extendedFab-86",
                        "fab": "MuiButton-fab-85",
                        "flat": "MuiButton-flat-73",
                        "flatPrimary": "MuiButton-flatPrimary-74",
                        "flatSecondary": "MuiButton-flatSecondary-75",
                        "focusVisible": "MuiButton-focusVisible-87",
                        "fullWidth": "MuiButton-fullWidth-93",
                        "label": "MuiButton-label-69",
                        "mini": "MuiButton-mini-90",
                        "outlined": "MuiButton-outlined-76",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-77",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-78",
                        "raised": "MuiButton-raised-82",
                        "raisedPrimary": "MuiButton-raisedPrimary-83",
                        "raisedSecondary": "MuiButton-raisedSecondary-84",
                        "root": "MuiButton-root-68",
                        "sizeLarge": "MuiButton-sizeLarge-92",
                        "sizeSmall": "MuiButton-sizeSmall-91",
                        "text": "MuiButton-text-70",
                        "textPrimary": "MuiButton-textPrimary-71",
                        "textSecondary": "MuiButton-textSecondary-72",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-87"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-95",
                            "focusVisible": "MuiButtonBase-focusVisible-96",
                            "root": "MuiButtonBase-root-94",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-87"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-69"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <img
                                alt="Github"
                                className="icon iconImage"
                                src="GitHub-Mark-120px-plus.png"
                              />
                              <span
                                className="label"
                              >
                                Github Repo
                              </span>
                              <pure(OpenInNewIcon)
                                className="openInNewTabIcon"
                              >
                                <OpenInNewIcon
                                  className="openInNewTabIcon"
                                >
                                  <WithStyles(SvgIcon)
                                    className="openInNewTabIcon"
                                  >
                                    <SvgIcon
                                      className="openInNewTabIcon"
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-100",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-102",
                                          "colorError": "MuiSvgIcon-colorError-101",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-98",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-99",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-103",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-105",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-104",
                                          "root": "MuiSvgIcon-root-97",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-97 openInNewTabIcon"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </OpenInNewIcon>
                              </pure(OpenInNewIcon)>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-116",
                                    "childLeaving": "MuiTouchRipple-childLeaving-117",
                                    "childPulsate": "MuiTouchRipple-childPulsate-118",
                                    "ripple": "MuiTouchRipple-ripple-113",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-115",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-114",
                                    "root": "MuiTouchRipple-root-112",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-112"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-112"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </RootRef>
            <Popper
              anchorEl={
                <a
                  class="unstyled"
                  href="https://github.com/kubeflow/pipelines"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  <button
                    class="MuiButtonBase-root-94 MuiButton-root-68 MuiButton-text-70 MuiButton-flat-73 button"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-69"
                    >
                      <div
                        class="flex flex-row flex-shrink-0"
                      >
                        <img
                          alt="Github"
                          class="icon iconImage"
                          src="GitHub-Mark-120px-plus.png"
                        />
                        <span
                          class="label"
                        >
                          Github Repo
                        </span>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-97 openInNewTabIcon"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                          <path
                            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
                          />
                        </svg>
                      </div>
                    </span>
                    <span
                      class="MuiTouchRipple-root-112"
                    />
                  </button>
                </a>
              }
              className="MuiTooltip-popper-60"
              disablePortal={false}
              id={null}
              open={false}
              placement="right-start"
              transition={true}
            />
          </Tooltip>
        </WithStyles(Tooltip)>
      </ExternalUri>
      <hr
        className="separator"
      />
      <WithStyles(IconButton)
        className="chevron"
        onClick={[Function]}
      >
        <IconButton
          className="chevron"
          classes={
            Object {
              "colorInherit": "MuiIconButton-colorInherit-107",
              "colorPrimary": "MuiIconButton-colorPrimary-108",
              "colorSecondary": "MuiIconButton-colorSecondary-109",
              "disabled": "MuiIconButton-disabled-110",
              "label": "MuiIconButton-label-111",
              "root": "MuiIconButton-root-106",
            }
          }
          color="default"
          disabled={false}
          onClick={[Function]}
        >
          <WithStyles(ButtonBase)
            centerRipple={true}
            className="MuiIconButton-root-106 chevron"
            disabled={false}
            focusRipple={true}
            onClick={[Function]}
          >
            <ButtonBase
              centerRipple={true}
              className="MuiIconButton-root-106 chevron"
              classes={
                Object {
                  "disabled": "MuiButtonBase-disabled-95",
                  "focusVisible": "MuiButtonBase-focusVisible-96",
                  "root": "MuiButtonBase-root-94",
                }
              }
              component="button"
              disableRipple={false}
              disableTouchRipple={false}
              disabled={false}
              focusRipple={true}
              onClick={[Function]}
              tabIndex="0"
              type="button"
            >
              <button
                className="MuiButtonBase-root-94 MuiIconButton-root-106 chevron"
                disabled={false}
                onBlur={[Function]}
                onClick={[Function]}
                onContextMenu={[Function]}
                onFocus={[Function]}
                onKeyDown={[Function]}
                onKeyUp={[Function]}
                onMouseDown={[Function]}
                onMouseLeave={[Function]}
                onMouseUp={[Function]}
                onTouchEnd={[Function]}
                onTouchMove={[Function]}
                onTouchStart={[Function]}
                tabIndex="0"
                type="button"
              >
                <span
                  className="MuiIconButton-label-111"
                >
                  <pure(ChevronLeftIcon)>
                    <ChevronLeftIcon>
                      <WithStyles(SvgIcon)>
                        <SvgIcon
                          classes={
                            Object {
                              "colorAction": "MuiSvgIcon-colorAction-100",
                              "colorDisabled": "MuiSvgIcon-colorDisabled-102",
                              "colorError": "MuiSvgIcon-colorError-101",
                              "colorPrimary": "MuiSvgIcon-colorPrimary-98",
                              "colorSecondary": "MuiSvgIcon-colorSecondary-99",
                              "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-103",
                              "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-105",
                              "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-104",
                              "root": "MuiSvgIcon-root-97",
                            }
                          }
                          color="inherit"
                          component="svg"
                          fontSize="default"
                          viewBox="0 0 24 24"
                        >
                          <svg
                            aria-hidden="true"
                            className="MuiSvgIcon-root-97"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                            />
                            <path
                              d="M0 0h24v24H0z"
                              fill="none"
                            />
                          </svg>
                        </SvgIcon>
                      </WithStyles(SvgIcon)>
                    </ChevronLeftIcon>
                  </pure(ChevronLeftIcon)>
                </span>
                <NoSsr
                  defer={false}
                  fallback={null}
                >
                  <WithStyles(TouchRipple)
                    center={true}
                    innerRef={[Function]}
                  >
                    <TouchRipple
                      center={true}
                      classes={
                        Object {
                          "child": "MuiTouchRipple-child-116",
                          "childLeaving": "MuiTouchRipple-childLeaving-117",
                          "childPulsate": "MuiTouchRipple-childPulsate-118",
                          "ripple": "MuiTouchRipple-ripple-113",
                          "ripplePulsate": "MuiTouchRipple-ripplePulsate-115",
                          "rippleVisible": "MuiTouchRipple-rippleVisible-114",
                          "root": "MuiTouchRipple-root-112",
                        }
                      }
                    >
                      <TransitionGroup
                        childFactory={[Function]}
                        className="MuiTouchRipple-root-112"
                        component="span"
                        enter={true}
                        exit={true}
                      >
                        <span
                          className="MuiTouchRipple-root-112"
                        />
                      </TransitionGroup>
                    </TouchRipple>
                  </WithStyles(TouchRipple)>
                </NoSsr>
              </button>
            </ButtonBase>
          </WithStyles(ButtonBase)>
        </IconButton>
      </WithStyles(IconButton)>
    </div>
    <div
      className="infoVisible"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        placement="top-start"
        title="Cluster name: some-cluster-name, Project ID: some-project-id"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-60",
              "popperInteractive": "MuiTooltip-popperInteractive-61",
              "tooltip": "MuiTooltip-tooltip-62",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
              "touch": "MuiTooltip-touch-63",
            }
          }
          disableFocusListener={false}
          disableHoverListener={false}
          disableTouchListener={false}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="top-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Cluster name: some-cluster-name, Project ID: some-project-id"
        >
          <RootRef
            rootRef={[Function]}
          >
            <div
              aria-describedby={null}
              className="envMetadata"
              onBlur={[Function]}
              onFocus={[Function]}
              onMouseLeave={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              onTouchStart={[Function]}
              title="Cluster name: some-cluster-name, Project ID: some-project-id"
            >
              <span>
                Cluster name: 
              </span>
              <a
                className="link unstyled"
                href="https://console.cloud.google.com/kubernetes/list?project=some-project-id&filter=name:some-cluster-name"
                rel="noopener"
                target="_blank"
              >
                some-cluster-name
              </a>
            </div>
          </RootRef>
          <Popper
            anchorEl={
              <div
                class="envMetadata"
                title="Cluster name: some-cluster-name, Project ID: some-project-id"
              >
                <span>
                  Cluster name: 
                </span>
                <a
                  class="link unstyled"
                  href="https://console.cloud.google.com/kubernetes/list?project=some-project-id&filter=name:some-cluster-name"
                  rel="noopener"
                  target="_blank"
                >
                  some-cluster-name
                </a>
              </div>
            }
            className="MuiTooltip-popper-60"
            disablePortal={false}
            id={null}
            open={false}
            placement="top-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <WithStyles(Tooltip)
        enterDelay={300}
        placement="top-start"
        title="Build date: unknown, Commit hash: unknown"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-60",
              "popperInteractive": "MuiTooltip-popperInteractive-61",
              "tooltip": "MuiTooltip-tooltip-62",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
              "touch": "MuiTooltip-touch-63",
            }
          }
          disableFocusListener={false}
          disableHoverListener={false}
          disableTouchListener={false}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="top-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Build date: unknown, Commit hash: unknown"
        >
          <RootRef
            rootRef={[Function]}
          >
            <div
              aria-describedby={null}
              className="envMetadata"
              onBlur={[Function]}
              onFocus={[Function]}
              onMouseLeave={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              onTouchStart={[Function]}
              title="Build date: unknown, Commit hash: unknown"
            >
              <span>
                Version: 
              </span>
              <a
                className="link unstyled"
                href="https://www.github.com/kubeflow/pipelines"
                rel="noopener"
                target="_blank"
              >
                unknown
              </a>
            </div>
          </RootRef>
          <Popper
            anchorEl={
              <div
                class="envMetadata"
                title="Build date: unknown, Commit hash: unknown"
              >
                <span>
                  Version: 
                </span>
                <a
                  class="link unstyled"
                  href="https://www.github.com/kubeflow/pipelines"
                  rel="noopener"
                  target="_blank"
                >
                  unknown
                </a>
              </div>
            }
            className="MuiTooltip-popper-60"
            disablePortal={false}
            id={null}
            open={false}
            placement="top-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <WithStyles(Tooltip)
        enterDelay={300}
        placement="top-start"
        title="Report an Issue"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-60",
              "popperInteractive": "MuiTooltip-popperInteractive-61",
              "tooltip": "MuiTooltip-tooltip-62",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-67",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-64",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-65",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-66",
              "touch": "MuiTooltip-touch-63",
            }
          }
          disableFocusListener={false}
          disableHoverListener={false}
          disableTouchListener={false}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="top-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Report an Issue"
        >
          <RootRef
            rootRef={[Function]}
          >
            <div
              aria-describedby={null}
              className="envMetadata"
              onBlur={[Function]}
              onFocus={[Function]}
              onMouseLeave={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              onTouchStart={[Function]}
              title="Report an Issue"
            >
              <a
                className="link unstyled"
                href="https://github.com/kubeflow/pipelines/issues/new/choose"
                rel="noopener"
                target="_blank"
              >
                Report an Issue
              </a>
            </div>
          </RootRef>
          <Popper
            anchorEl={
              <div
                class="envMetadata"
                title="Report an Issue"
              >
                <a
                  class="link unstyled"
                  href="https://github.com/kubeflow/pipelines/issues/new/choose"
                  rel="noopener"
                  target="_blank"
                >
                  Report an Issue
                </a>
              </div>
            }
            className="MuiTooltip-popper-60"
            disablePortal={false}
            id={null}
            open={false}
            placement="top-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
    </div>
  </div>
</SideNav>
`;

exports[`SideNav populates the display build information using the default props 1`] = `
<SideNav
  buildInfo={
    Object {
      "apiServerCommitHash": "0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5",
      "apiServerReady": true,
      "apiServerTagName": "1.0.0",
      "buildDate": "Tue Oct 23 14:23:53 UTC 2018",
      "frontendCommitHash": "302e93ce99099173f387c7e0635476fe1b69ea98",
      "frontendTagName": "1.0.0-rc1",
    }
  }
  gkeMetadata={Object {}}
  history={Object {}}
  page="/pipelines"
>
  <div
    className="root flexColumn noShrink"
    id="sideNav"
  >
    <div
      style={
        Object {
          "flexGrow": 1,
        }
      }
    >
      <div
        className="indicator"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Pipeline List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-1",
              "popperInteractive": "MuiTooltip-popperInteractive-2",
              "tooltip": "MuiTooltip-tooltip-3",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
              "touch": "MuiTooltip-touch-4",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Pipeline List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="pipelinesBtn"
              replace={false}
              title={null}
              to="/pipelines"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/pipelines"
                id="pipelinesBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button active"
                >
                  <Button
                    className="button active"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-30",
                        "contained": "MuiButton-contained-20",
                        "containedPrimary": "MuiButton-containedPrimary-21",
                        "containedSecondary": "MuiButton-containedSecondary-22",
                        "disabled": "MuiButton-disabled-29",
                        "extendedFab": "MuiButton-extendedFab-27",
                        "fab": "MuiButton-fab-26",
                        "flat": "MuiButton-flat-14",
                        "flatPrimary": "MuiButton-flatPrimary-15",
                        "flatSecondary": "MuiButton-flatSecondary-16",
                        "focusVisible": "MuiButton-focusVisible-28",
                        "fullWidth": "MuiButton-fullWidth-34",
                        "label": "MuiButton-label-10",
                        "mini": "MuiButton-mini-31",
                        "outlined": "MuiButton-outlined-17",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-18",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-19",
                        "raised": "MuiButton-raised-23",
                        "raisedPrimary": "MuiButton-raisedPrimary-24",
                        "raisedSecondary": "MuiButton-raisedSecondary-25",
                        "root": "MuiButton-root-9",
                        "sizeLarge": "MuiButton-sizeLarge-33",
                        "sizeSmall": "MuiButton-sizeSmall-32",
                        "text": "MuiButton-text-11",
                        "textPrimary": "MuiButton-textPrimary-12",
                        "textSecondary": "MuiButton-textSecondary-13",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button active"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-28"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button active"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-36",
                            "focusVisible": "MuiButtonBase-focusVisible-37",
                            "root": "MuiButtonBase-root-35",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-28"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button active"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-10"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <div
                                className="alignItems"
                              >
                                <PipelinesIcon
                                  color="#0d6de7"
                                >
                                  <svg
                                    height="20px"
                                    version="1.1"
                                    viewBox="0 0 20 20"
                                    width="20px"
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlnsXlink="http://www.w3.org/1999/xlink"
                                  >
                                    <g
                                      fill="none"
                                      fillRule="evenodd"
                                      id="Symbols"
                                      stroke="none"
                                      strokeWidth="1"
                                    >
                                      <g
                                        transform="translate(-2.000000, -4.000000)"
                                      >
                                        <polygon
                                          id="Shape"
                                          points="0 0 24 0 24 24 0 24"
                                        />
                                        <path
                                          d="M12.7244079,9.74960425 L17.4807112,9.74960425 C17.7675226,9.74960425 18,9.51894323 18,9.23437272 L18,4.51523153 C18,4.23066102 17.7675226,4 17.4807112,4 L12.7244079,4 C12.4375965,4 12.2051191,4.23066102 12.2051191,4.51523153 L12.2051191,6.06125154 L9.98218019,6.06125154 C9.52936032,6.06125154 9.16225043,6.42549311 9.16225043,6.87477501 L9.16225043,11.2135669 L7.05995053,11.2135669 C6.71661861,10.189612 5.74374462,9.45093267 4.59644424,9.45093267 C3.16249641,9.45093267 2,10.6043462 2,12.0270903 C2,13.4498886 3.16249641,14.603248 4.59644424,14.603248 C5.74379928,14.603248 6.71661861,13.8645687 7.06000519,12.8406138 L9.16225043,12.8406138 L9.16225043,17.1794057 C9.16225043,17.6286875 9.52936032,17.9929291 9.98218019,17.9929291 L12.2051191,17.9929291 L12.2051191,19.4847685 C12.2051191,19.769339 12.4375965,20 12.7244079,20 L17.4807112,20 C17.7675226,20 18,19.769339 18,19.4847685 L18,14.7656273 C18,14.4810568 17.7675226,14.2503957 17.4807112,14.2503957 L12.7244079,14.2503957 C12.4375965,14.2503957 12.2051191,14.4810568 12.2051191,14.7656273 L12.2051191,16.3658822 L10.80211,16.3658822 L10.80211,7.68829848 L12.2051191,7.68829848 L12.2051191,9.23437272 C12.2051191,9.51894323 12.4375965,9.74960425 12.7244079,9.74960425 Z"
                                          fill="#0d6de7"
                                          id="Path"
                                        />
                                      </g>
                                    </g>
                                  </svg>
                                </PipelinesIcon>
                              </div>
                              <span
                                className="label"
                              >
                                Pipelines
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-57",
                                    "childLeaving": "MuiTouchRipple-childLeaving-58",
                                    "childPulsate": "MuiTouchRipple-childPulsate-59",
                                    "ripple": "MuiTouchRipple-ripple-54",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-56",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-55",
                                    "root": "MuiTouchRipple-root-53",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-53"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-53"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/pipelines"
                id="pipelinesBtn"
              >
                <button
                  class="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button active"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-10"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <div
                        class="alignItems"
                      >
                        <svg
                          height="20px"
                          version="1.1"
                          viewBox="0 0 20 20"
                          width="20px"
                          xmlns="http://www.w3.org/2000/svg"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                        >
                          <g
                            fill="none"
                            fill-rule="evenodd"
                            id="Symbols"
                            stroke="none"
                            stroke-width="1"
                          >
                            <g
                              transform="translate(-2.000000, -4.000000)"
                            >
                              <polygon
                                id="Shape"
                                points="0 0 24 0 24 24 0 24"
                              />
                              <path
                                d="M12.7244079,9.74960425 L17.4807112,9.74960425 C17.7675226,9.74960425 18,9.51894323 18,9.23437272 L18,4.51523153 C18,4.23066102 17.7675226,4 17.4807112,4 L12.7244079,4 C12.4375965,4 12.2051191,4.23066102 12.2051191,4.51523153 L12.2051191,6.06125154 L9.98218019,6.06125154 C9.52936032,6.06125154 9.16225043,6.42549311 9.16225043,6.87477501 L9.16225043,11.2135669 L7.05995053,11.2135669 C6.71661861,10.189612 5.74374462,9.45093267 4.59644424,9.45093267 C3.16249641,9.45093267 2,10.6043462 2,12.0270903 C2,13.4498886 3.16249641,14.603248 4.59644424,14.603248 C5.74379928,14.603248 6.71661861,13.8645687 7.06000519,12.8406138 L9.16225043,12.8406138 L9.16225043,17.1794057 C9.16225043,17.6286875 9.52936032,17.9929291 9.98218019,17.9929291 L12.2051191,17.9929291 L12.2051191,19.4847685 C12.2051191,19.769339 12.4375965,20 12.7244079,20 L17.4807112,20 C17.7675226,20 18,19.769339 18,19.4847685 L18,14.7656273 C18,14.4810568 17.7675226,14.2503957 17.4807112,14.2503957 L12.7244079,14.2503957 C12.4375965,14.2503957 12.2051191,14.4810568 12.2051191,14.7656273 L12.2051191,16.3658822 L10.80211,16.3658822 L10.80211,7.68829848 L12.2051191,7.68829848 L12.2051191,9.23437272 C12.2051191,9.51894323 12.4375965,9.74960425 12.7244079,9.74960425 Z"
                                fill="#0d6de7"
                                id="Path"
                              />
                            </g>
                          </g>
                        </svg>
                      </div>
                      <span
                        class="label"
                      >
                        Pipelines
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-53"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-1"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Experiment List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-1",
              "popperInteractive": "MuiTooltip-popperInteractive-2",
              "tooltip": "MuiTooltip-tooltip-3",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
              "touch": "MuiTooltip-touch-4",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Experiment List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="experimentsBtn"
              replace={false}
              title={null}
              to="/experiments"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/experiments"
                id="experimentsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-30",
                        "contained": "MuiButton-contained-20",
                        "containedPrimary": "MuiButton-containedPrimary-21",
                        "containedSecondary": "MuiButton-containedSecondary-22",
                        "disabled": "MuiButton-disabled-29",
                        "extendedFab": "MuiButton-extendedFab-27",
                        "fab": "MuiButton-fab-26",
                        "flat": "MuiButton-flat-14",
                        "flatPrimary": "MuiButton-flatPrimary-15",
                        "flatSecondary": "MuiButton-flatSecondary-16",
                        "focusVisible": "MuiButton-focusVisible-28",
                        "fullWidth": "MuiButton-fullWidth-34",
                        "label": "MuiButton-label-10",
                        "mini": "MuiButton-mini-31",
                        "outlined": "MuiButton-outlined-17",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-18",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-19",
                        "raised": "MuiButton-raised-23",
                        "raisedPrimary": "MuiButton-raisedPrimary-24",
                        "raisedSecondary": "MuiButton-raisedSecondary-25",
                        "root": "MuiButton-root-9",
                        "sizeLarge": "MuiButton-sizeLarge-33",
                        "sizeSmall": "MuiButton-sizeSmall-32",
                        "text": "MuiButton-text-11",
                        "textPrimary": "MuiButton-textPrimary-12",
                        "textSecondary": "MuiButton-textSecondary-13",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-28"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-36",
                            "focusVisible": "MuiButtonBase-focusVisible-37",
                            "root": "MuiButtonBase-root-35",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-28"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-10"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <div
                                className="alignItems"
                              >
                                <ExperimentsIcon
                                  color="#9aa0a6"
                                >
                                  <svg
                                    height="20"
                                    viewBox="0 0 20 12"
                                    width="20"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <g
                                      fill="none"
                                      fillRule="evenodd"
                                      id="Symbols"
                                    >
                                      <g
                                        transform="translate(-26 -72)"
                                      >
                                        <g
                                          transform="translate(0 12)"
                                        >
                                          <g
                                            transform="translate(0 44)"
                                          >
                                            <g
                                              id="Group-3"
                                            >
                                              <g
                                                transform="translate(26 12)"
                                              >
                                                <polygon
                                                  points="0 0 20 0 20 20 0 20"
                                                />
                                                <path
                                                  d="M15,5.83333333 L13.825,4.65833333 L8.54166667,9.94166667 L9.71666667,11.1166667 L15,5.83333333 Z M18.5333333,4.65833333 L9.71666667,13.475 L6.23333333,10 L5.05833333,11.175 L9.71666667,15.8333333 L19.7166667,5.83333333 L18.5333333,4.65833333 Z M0.341666667,11.175 L5,15.8333333 L6.175,14.6583333 L1.525,10 L0.341666667,11.175 Z"
                                                  fill="#9aa0a6"
                                                  fillRule="nonzero"
                                                />
                                              </g>
                                            </g>
                                          </g>
                                        </g>
                                      </g>
                                    </g>
                                  </svg>
                                </ExperimentsIcon>
                              </div>
                              <span
                                className="label"
                              >
                                Experiments
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-57",
                                    "childLeaving": "MuiTouchRipple-childLeaving-58",
                                    "childPulsate": "MuiTouchRipple-childPulsate-59",
                                    "ripple": "MuiTouchRipple-ripple-54",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-56",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-55",
                                    "root": "MuiTouchRipple-root-53",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-53"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-53"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/experiments"
                id="experimentsBtn"
              >
                <button
                  class="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-10"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <div
                        class="alignItems"
                      >
                        <svg
                          height="20"
                          viewBox="0 0 20 12"
                          width="20"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g
                            fill="none"
                            fill-rule="evenodd"
                            id="Symbols"
                          >
                            <g
                              transform="translate(-26 -72)"
                            >
                              <g
                                transform="translate(0 12)"
                              >
                                <g
                                  transform="translate(0 44)"
                                >
                                  <g
                                    id="Group-3"
                                  >
                                    <g
                                      transform="translate(26 12)"
                                    >
                                      <polygon
                                        points="0 0 20 0 20 20 0 20"
                                      />
                                      <path
                                        d="M15,5.83333333 L13.825,4.65833333 L8.54166667,9.94166667 L9.71666667,11.1166667 L15,5.83333333 Z M18.5333333,4.65833333 L9.71666667,13.475 L6.23333333,10 L5.05833333,11.175 L9.71666667,15.8333333 L19.7166667,5.83333333 L18.5333333,4.65833333 Z M0.341666667,11.175 L5,15.8333333 L6.175,14.6583333 L1.525,10 L0.341666667,11.175 Z"
                                        fill="#9aa0a6"
                                        fill-rule="nonzero"
                                      />
                                    </g>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </g>
                        </svg>
                      </div>
                      <span
                        class="label"
                      >
                        Experiments
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-53"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-1"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Runs List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-1",
              "popperInteractive": "MuiTooltip-popperInteractive-2",
              "tooltip": "MuiTooltip-tooltip-3",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
              "touch": "MuiTooltip-touch-4",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Runs List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="runsBtn"
              replace={false}
              title={null}
              to="/runs"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/runs"
                id="runsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-30",
                        "contained": "MuiButton-contained-20",
                        "containedPrimary": "MuiButton-containedPrimary-21",
                        "containedSecondary": "MuiButton-containedSecondary-22",
                        "disabled": "MuiButton-disabled-29",
                        "extendedFab": "MuiButton-extendedFab-27",
                        "fab": "MuiButton-fab-26",
                        "flat": "MuiButton-flat-14",
                        "flatPrimary": "MuiButton-flatPrimary-15",
                        "flatSecondary": "MuiButton-flatSecondary-16",
                        "focusVisible": "MuiButton-focusVisible-28",
                        "fullWidth": "MuiButton-fullWidth-34",
                        "label": "MuiButton-label-10",
                        "mini": "MuiButton-mini-31",
                        "outlined": "MuiButton-outlined-17",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-18",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-19",
                        "raised": "MuiButton-raised-23",
                        "raisedPrimary": "MuiButton-raisedPrimary-24",
                        "raisedSecondary": "MuiButton-raisedSecondary-25",
                        "root": "MuiButton-root-9",
                        "sizeLarge": "MuiButton-sizeLarge-33",
                        "sizeSmall": "MuiButton-sizeSmall-32",
                        "text": "MuiButton-text-11",
                        "textPrimary": "MuiButton-textPrimary-12",
                        "textSecondary": "MuiButton-textSecondary-13",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-28"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-36",
                            "focusVisible": "MuiButtonBase-focusVisible-37",
                            "root": "MuiButtonBase-root-35",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-28"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-10"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(DirectionsRunIcon)>
                                <DirectionsRunIcon>
                                  <WithStyles(SvgIcon)>
                                    <SvgIcon
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-41",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-43",
                                          "colorError": "MuiSvgIcon-colorError-42",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-39",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-40",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-44",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-46",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-45",
                                          "root": "MuiSvgIcon-root-38",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-38"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </DirectionsRunIcon>
                              </pure(DirectionsRunIcon)>
                              <span
                                className="label"
                              >
                                Runs
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-57",
                                    "childLeaving": "MuiTouchRipple-childLeaving-58",
                                    "childPulsate": "MuiTouchRipple-childPulsate-59",
                                    "ripple": "MuiTouchRipple-ripple-54",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-56",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-55",
                                    "root": "MuiTouchRipple-root-53",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-53"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-53"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/runs"
                id="runsBtn"
              >
                <button
                  class="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-10"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-38"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                        <path
                          d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"
                        />
                      </svg>
                      <span
                        class="label"
                      >
                        Runs
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-53"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-1"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Recurring Runs List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-1",
              "popperInteractive": "MuiTooltip-popperInteractive-2",
              "tooltip": "MuiTooltip-tooltip-3",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
              "touch": "MuiTooltip-touch-4",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Recurring Runs List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="recurringRunsBtn"
              replace={false}
              title={null}
              to="/recurringruns"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/recurringruns"
                id="recurringRunsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-30",
                        "contained": "MuiButton-contained-20",
                        "containedPrimary": "MuiButton-containedPrimary-21",
                        "containedSecondary": "MuiButton-containedSecondary-22",
                        "disabled": "MuiButton-disabled-29",
                        "extendedFab": "MuiButton-extendedFab-27",
                        "fab": "MuiButton-fab-26",
                        "flat": "MuiButton-flat-14",
                        "flatPrimary": "MuiButton-flatPrimary-15",
                        "flatSecondary": "MuiButton-flatSecondary-16",
                        "focusVisible": "MuiButton-focusVisible-28",
                        "fullWidth": "MuiButton-fullWidth-34",
                        "label": "MuiButton-label-10",
                        "mini": "MuiButton-mini-31",
                        "outlined": "MuiButton-outlined-17",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-18",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-19",
                        "raised": "MuiButton-raised-23",
                        "raisedPrimary": "MuiButton-raisedPrimary-24",
                        "raisedSecondary": "MuiButton-raisedSecondary-25",
                        "root": "MuiButton-root-9",
                        "sizeLarge": "MuiButton-sizeLarge-33",
                        "sizeSmall": "MuiButton-sizeSmall-32",
                        "text": "MuiButton-text-11",
                        "textPrimary": "MuiButton-textPrimary-12",
                        "textSecondary": "MuiButton-textSecondary-13",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-28"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-36",
                            "focusVisible": "MuiButtonBase-focusVisible-37",
                            "root": "MuiButtonBase-root-35",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-28"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-10"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(AlarmIcon)>
                                <AlarmIcon>
                                  <WithStyles(SvgIcon)>
                                    <SvgIcon
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-41",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-43",
                                          "colorError": "MuiSvgIcon-colorError-42",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-39",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-40",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-44",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-46",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-45",
                                          "root": "MuiSvgIcon-root-38",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-38"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </AlarmIcon>
                              </pure(AlarmIcon)>
                              <span
                                className="label"
                              >
                                Recurring Runs
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-57",
                                    "childLeaving": "MuiTouchRipple-childLeaving-58",
                                    "childPulsate": "MuiTouchRipple-childPulsate-59",
                                    "ripple": "MuiTouchRipple-ripple-54",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-56",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-55",
                                    "root": "MuiTouchRipple-root-53",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-53"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-53"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/recurringruns"
                id="recurringRunsBtn"
              >
                <button
                  class="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-10"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-38"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                        <path
                          d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
                        />
                      </svg>
                      <span
                        class="label"
                      >
                        Recurring Runs
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-53"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-1"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Artifacts List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-1",
              "popperInteractive": "MuiTooltip-popperInteractive-2",
              "tooltip": "MuiTooltip-tooltip-3",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
              "touch": "MuiTooltip-touch-4",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Artifacts List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="artifactsBtn"
              replace={false}
              title={null}
              to="/artifacts"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/artifacts"
                id="artifactsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-30",
                        "contained": "MuiButton-contained-20",
                        "containedPrimary": "MuiButton-containedPrimary-21",
                        "containedSecondary": "MuiButton-containedSecondary-22",
                        "disabled": "MuiButton-disabled-29",
                        "extendedFab": "MuiButton-extendedFab-27",
                        "fab": "MuiButton-fab-26",
                        "flat": "MuiButton-flat-14",
                        "flatPrimary": "MuiButton-flatPrimary-15",
                        "flatSecondary": "MuiButton-flatSecondary-16",
                        "focusVisible": "MuiButton-focusVisible-28",
                        "fullWidth": "MuiButton-fullWidth-34",
                        "label": "MuiButton-label-10",
                        "mini": "MuiButton-mini-31",
                        "outlined": "MuiButton-outlined-17",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-18",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-19",
                        "raised": "MuiButton-raised-23",
                        "raisedPrimary": "MuiButton-raisedPrimary-24",
                        "raisedSecondary": "MuiButton-raisedSecondary-25",
                        "root": "MuiButton-root-9",
                        "sizeLarge": "MuiButton-sizeLarge-33",
                        "sizeSmall": "MuiButton-sizeSmall-32",
                        "text": "MuiButton-text-11",
                        "textPrimary": "MuiButton-textPrimary-12",
                        "textSecondary": "MuiButton-textSecondary-13",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-28"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-36",
                            "focusVisible": "MuiButtonBase-focusVisible-37",
                            "root": "MuiButtonBase-root-35",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-28"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-10"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(BubbleChartIcon)>
                                <BubbleChartIcon>
                                  <WithStyles(SvgIcon)>
                                    <SvgIcon
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-41",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-43",
                                          "colorError": "MuiSvgIcon-colorError-42",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-39",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-40",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-44",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-46",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-45",
                                          "root": "MuiSvgIcon-root-38",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-38"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <circle
                                          cx="7.2"
                                          cy="14.4"
                                          r="3.2"
                                        />
                                        <circle
                                          cx="14.8"
                                          cy="18"
                                          r="2"
                                        />
                                        <circle
                                          cx="15.2"
                                          cy="8.8"
                                          r="4.8"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </BubbleChartIcon>
                              </pure(BubbleChartIcon)>
                              <span
                                className="label"
                              >
                                Artifacts
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-57",
                                    "childLeaving": "MuiTouchRipple-childLeaving-58",
                                    "childPulsate": "MuiTouchRipple-childPulsate-59",
                                    "ripple": "MuiTouchRipple-ripple-54",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-56",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-55",
                                    "root": "MuiTouchRipple-root-53",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-53"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-53"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/artifacts"
                id="artifactsBtn"
              >
                <button
                  class="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-10"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-38"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                        <circle
                          cx="7.2"
                          cy="14.4"
                          r="3.2"
                        />
                        <circle
                          cx="14.8"
                          cy="18"
                          r="2"
                        />
                        <circle
                          cx="15.2"
                          cy="8.8"
                          r="4.8"
                        />
                      </svg>
                      <span
                        class="label"
                      >
                        Artifacts
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-53"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-1"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <div
        className="indicator indicatorHidden"
      />
      <WithStyles(Tooltip)
        disableFocusListener={true}
        disableHoverListener={true}
        disableTouchListener={true}
        enterDelay={300}
        placement="right-start"
        title="Executions List"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-1",
              "popperInteractive": "MuiTooltip-popperInteractive-2",
              "tooltip": "MuiTooltip-tooltip-3",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
              "touch": "MuiTooltip-touch-4",
            }
          }
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="right-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Executions List"
        >
          <RootRef
            rootRef={[Function]}
          >
            <Link
              aria-describedby={null}
              className="unstyled"
              id="executionsBtn"
              replace={false}
              title={null}
              to="/executions"
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="/executions"
                id="executionsBtn"
                onClick={[Function]}
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-30",
                        "contained": "MuiButton-contained-20",
                        "containedPrimary": "MuiButton-containedPrimary-21",
                        "containedSecondary": "MuiButton-containedSecondary-22",
                        "disabled": "MuiButton-disabled-29",
                        "extendedFab": "MuiButton-extendedFab-27",
                        "fab": "MuiButton-fab-26",
                        "flat": "MuiButton-flat-14",
                        "flatPrimary": "MuiButton-flatPrimary-15",
                        "flatSecondary": "MuiButton-flatSecondary-16",
                        "focusVisible": "MuiButton-focusVisible-28",
                        "fullWidth": "MuiButton-fullWidth-34",
                        "label": "MuiButton-label-10",
                        "mini": "MuiButton-mini-31",
                        "outlined": "MuiButton-outlined-17",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-18",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-19",
                        "raised": "MuiButton-raised-23",
                        "raisedPrimary": "MuiButton-raisedPrimary-24",
                        "raisedSecondary": "MuiButton-raisedSecondary-25",
                        "root": "MuiButton-root-9",
                        "sizeLarge": "MuiButton-sizeLarge-33",
                        "sizeSmall": "MuiButton-sizeSmall-32",
                        "text": "MuiButton-text-11",
                        "textPrimary": "MuiButton-textPrimary-12",
                        "textSecondary": "MuiButton-textSecondary-13",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-28"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-36",
                            "focusVisible": "MuiButtonBase-focusVisible-37",
                            "root": "MuiButtonBase-root-35",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-28"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-10"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(PlayArrowIcon)>
                                <PlayArrowIcon>
                                  <WithStyles(SvgIcon)>
                                    <SvgIcon
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-41",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-43",
                                          "colorError": "MuiSvgIcon-colorError-42",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-39",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-40",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-44",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-46",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-45",
                                          "root": "MuiSvgIcon-root-38",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-38"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8 5v14l11-7z"
                                        />
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </PlayArrowIcon>
                              </pure(PlayArrowIcon)>
                              <span
                                className="label"
                              >
                                Executions
                              </span>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-57",
                                    "childLeaving": "MuiTouchRipple-childLeaving-58",
                                    "childPulsate": "MuiTouchRipple-childPulsate-59",
                                    "ripple": "MuiTouchRipple-ripple-54",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-56",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-55",
                                    "root": "MuiTouchRipple-root-53",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-53"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-53"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </Link>
          </RootRef>
          <Popper
            anchorEl={
              <a
                class="unstyled"
                href="/executions"
                id="executionsBtn"
              >
                <button
                  class="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-10"
                  >
                    <div
                      class="flex flex-row flex-shrink-0"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-38"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M8 5v14l11-7z"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                      <span
                        class="label"
                      >
                        Executions
                      </span>
                    </div>
                  </span>
                  <span
                    class="MuiTouchRipple-root-53"
                  />
                </button>
              </a>
            }
            className="MuiTooltip-popper-1"
            disablePortal={false}
            id={null}
            open={false}
            placement="right-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <hr
        className="separator"
      />
      <ExternalUri
        collapsed={false}
        icon={[Function]}
        title="Documentation"
        to="https://www.kubeflow.org/docs/pipelines/"
      >
        <WithStyles(Tooltip)
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          placement="right-start"
          title="Documentation"
        >
          <Tooltip
            TransitionComponent={[Function]}
            classes={
              Object {
                "popper": "MuiTooltip-popper-1",
                "popperInteractive": "MuiTooltip-popperInteractive-2",
                "tooltip": "MuiTooltip-tooltip-3",
                "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
                "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
                "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
                "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
                "touch": "MuiTooltip-touch-4",
              }
            }
            disableFocusListener={true}
            disableHoverListener={true}
            disableTouchListener={true}
            enterDelay={300}
            enterTouchDelay={1000}
            interactive={false}
            leaveDelay={0}
            leaveTouchDelay={1500}
            placement="right-start"
            theme={
              Object {
                "breakpoints": Object {
                  "between": [Function],
                  "down": [Function],
                  "keys": Array [
                    "xs",
                    "sm",
                    "md",
                    "lg",
                    "xl",
                  ],
                  "only": [Function],
                  "up": [Function],
                  "values": Object {
                    "lg": 1280,
                    "md": 960,
                    "sm": 600,
                    "xl": 1920,
                    "xs": 0,
                  },
                  "width": [Function],
                },
                "direction": "ltr",
                "mixins": Object {
                  "gutters": [Function],
                  "toolbar": Object {
                    "@media (min-width:0px) and (orientation: landscape)": Object {
                      "minHeight": 48,
                    },
                    "@media (min-width:600px)": Object {
                      "minHeight": 64,
                    },
                    "minHeight": 56,
                  },
                },
                "overrides": Object {},
                "palette": Object {
                  "action": Object {
                    "active": "rgba(0, 0, 0, 0.54)",
                    "disabled": "rgba(0, 0, 0, 0.26)",
                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
                    "hover": "rgba(0, 0, 0, 0.08)",
                    "hoverOpacity": 0.08,
                    "selected": "rgba(0, 0, 0, 0.14)",
                  },
                  "augmentColor": [Function],
                  "background": Object {
                    "default": "#fafafa",
                    "paper": "#fff",
                  },
                  "common": Object {
                    "black": "#000",
                    "white": "#fff",
                  },
                  "contrastThreshold": 3,
                  "divider": "rgba(0, 0, 0, 0.12)",
                  "error": Object {
                    "contrastText": "#fff",
                    "dark": "#d32f2f",
                    "light": "#e57373",
                    "main": "#f44336",
                  },
                  "getContrastText": [Function],
                  "grey": Object {
                    "100": "#f5f5f5",
                    "200": "#eeeeee",
                    "300": "#e0e0e0",
                    "400": "#bdbdbd",
                    "50": "#fafafa",
                    "500": "#9e9e9e",
                    "600": "#757575",
                    "700": "#616161",
                    "800": "#424242",
                    "900": "#212121",
                    "A100": "#d5d5d5",
                    "A200": "#aaaaaa",
                    "A400": "#303030",
                    "A700": "#616161",
                  },
                  "primary": Object {
                    "contrastText": "#fff",
                    "dark": "#303f9f",
                    "light": "#7986cb",
                    "main": "#3f51b5",
                  },
                  "secondary": Object {
                    "contrastText": "#fff",
                    "dark": "#c51162",
                    "light": "#ff4081",
                    "main": "#f50057",
                  },
                  "text": Object {
                    "disabled": "rgba(0, 0, 0, 0.38)",
                    "hint": "rgba(0, 0, 0, 0.38)",
                    "primary": "rgba(0, 0, 0, 0.87)",
                    "secondary": "rgba(0, 0, 0, 0.54)",
                  },
                  "tonalOffset": 0.2,
                  "type": "light",
                },
                "props": Object {},
                "shadows": Array [
                  "none",
                  "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                  "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                  "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
                ],
                "shape": Object {
                  "borderRadius": 4,
                },
                "spacing": Object {
                  "unit": 8,
                },
                "transitions": Object {
                  "create": [Function],
                  "duration": Object {
                    "complex": 375,
                    "enteringScreen": 225,
                    "leavingScreen": 195,
                    "short": 250,
                    "shorter": 200,
                    "shortest": 150,
                    "standard": 300,
                  },
                  "easing": Object {
                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                  },
                  "getAutoHeightDuration": [Function],
                },
                "typography": Object {
                  "body1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 400,
                    "lineHeight": "1.46429em",
                  },
                  "body1Next": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00938em",
                    "lineHeight": 1.5,
                  },
                  "body2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "lineHeight": "1.71429em",
                  },
                  "body2Next": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.01071em",
                    "lineHeight": 1.5,
                  },
                  "button": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "textTransform": "uppercase",
                  },
                  "buttonNext": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.02857em",
                    "lineHeight": 1.75,
                    "textTransform": "uppercase",
                  },
                  "caption": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "lineHeight": "1.375em",
                  },
                  "captionNext": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.03333em",
                    "lineHeight": 1.66,
                  },
                  "display1": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.125rem",
                    "fontWeight": 400,
                    "lineHeight": "1.20588em",
                  },
                  "display2": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.8125rem",
                    "fontWeight": 400,
                    "lineHeight": "1.13333em",
                    "marginLeft": "-.02em",
                  },
                  "display3": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3.5rem",
                    "fontWeight": 400,
                    "letterSpacing": "-.02em",
                    "lineHeight": "1.30357em",
                    "marginLeft": "-.02em",
                  },
                  "display4": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "7rem",
                    "fontWeight": 300,
                    "letterSpacing": "-.04em",
                    "lineHeight": "1.14286em",
                    "marginLeft": "-.04em",
                  },
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": 14,
                  "fontWeightLight": 300,
                  "fontWeightMedium": 500,
                  "fontWeightRegular": 400,
                  "h1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "6rem",
                    "fontWeight": 300,
                    "letterSpacing": "-0.01562em",
                    "lineHeight": 1,
                  },
                  "h2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3.75rem",
                    "fontWeight": 300,
                    "letterSpacing": "-0.00833em",
                    "lineHeight": 1,
                  },
                  "h3": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3rem",
                    "fontWeight": 400,
                    "letterSpacing": "0em",
                    "lineHeight": 1.04,
                  },
                  "h4": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.125rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00735em",
                    "lineHeight": 1.17,
                  },
                  "h5": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.5rem",
                    "fontWeight": 400,
                    "letterSpacing": "0em",
                    "lineHeight": 1.33,
                  },
                  "h6": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.25rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.0075em",
                    "lineHeight": 1.6,
                  },
                  "headline": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.5rem",
                    "fontWeight": 400,
                    "lineHeight": "1.35417em",
                  },
                  "overline": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.08333em",
                    "lineHeight": 2.66,
                    "textTransform": "uppercase",
                  },
                  "pxToRem": [Function],
                  "round": [Function],
                  "subheading": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "lineHeight": "1.5em",
                  },
                  "subtitle1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00938em",
                    "lineHeight": 1.75,
                  },
                  "subtitle2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.00714em",
                    "lineHeight": 1.57,
                  },
                  "title": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.3125rem",
                    "fontWeight": 500,
                    "lineHeight": "1.16667em",
                  },
                  "useNextVariants": false,
                },
                "zIndex": Object {
                  "appBar": 1100,
                  "drawer": 1200,
                  "mobileStepper": 1000,
                  "modal": 1300,
                  "snackbar": 1400,
                  "tooltip": 1500,
                },
              }
            }
            title="Documentation"
          >
            <RootRef
              rootRef={[Function]}
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="https://www.kubeflow.org/docs/pipelines/"
                rel="noopener noreferrer"
                target="_blank"
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-30",
                        "contained": "MuiButton-contained-20",
                        "containedPrimary": "MuiButton-containedPrimary-21",
                        "containedSecondary": "MuiButton-containedSecondary-22",
                        "disabled": "MuiButton-disabled-29",
                        "extendedFab": "MuiButton-extendedFab-27",
                        "fab": "MuiButton-fab-26",
                        "flat": "MuiButton-flat-14",
                        "flatPrimary": "MuiButton-flatPrimary-15",
                        "flatSecondary": "MuiButton-flatSecondary-16",
                        "focusVisible": "MuiButton-focusVisible-28",
                        "fullWidth": "MuiButton-fullWidth-34",
                        "label": "MuiButton-label-10",
                        "mini": "MuiButton-mini-31",
                        "outlined": "MuiButton-outlined-17",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-18",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-19",
                        "raised": "MuiButton-raised-23",
                        "raisedPrimary": "MuiButton-raisedPrimary-24",
                        "raisedSecondary": "MuiButton-raisedSecondary-25",
                        "root": "MuiButton-root-9",
                        "sizeLarge": "MuiButton-sizeLarge-33",
                        "sizeSmall": "MuiButton-sizeSmall-32",
                        "text": "MuiButton-text-11",
                        "textPrimary": "MuiButton-textPrimary-12",
                        "textSecondary": "MuiButton-textSecondary-13",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-28"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-36",
                            "focusVisible": "MuiButtonBase-focusVisible-37",
                            "root": "MuiButtonBase-root-35",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-28"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-10"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <pure(DescriptionIcon)
                                className="icon"
                              >
                                <DescriptionIcon
                                  className="icon"
                                >
                                  <WithStyles(SvgIcon)
                                    className="icon"
                                  >
                                    <SvgIcon
                                      className="icon"
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-41",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-43",
                                          "colorError": "MuiSvgIcon-colorError-42",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-39",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-40",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-44",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-46",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-45",
                                          "root": "MuiSvgIcon-root-38",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-38 icon"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </DescriptionIcon>
                              </pure(DescriptionIcon)>
                              <span
                                className="label"
                              >
                                Documentation
                              </span>
                              <pure(OpenInNewIcon)
                                className="openInNewTabIcon"
                              >
                                <OpenInNewIcon
                                  className="openInNewTabIcon"
                                >
                                  <WithStyles(SvgIcon)
                                    className="openInNewTabIcon"
                                  >
                                    <SvgIcon
                                      className="openInNewTabIcon"
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-41",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-43",
                                          "colorError": "MuiSvgIcon-colorError-42",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-39",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-40",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-44",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-46",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-45",
                                          "root": "MuiSvgIcon-root-38",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-38 openInNewTabIcon"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </OpenInNewIcon>
                              </pure(OpenInNewIcon)>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-57",
                                    "childLeaving": "MuiTouchRipple-childLeaving-58",
                                    "childPulsate": "MuiTouchRipple-childPulsate-59",
                                    "ripple": "MuiTouchRipple-ripple-54",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-56",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-55",
                                    "root": "MuiTouchRipple-root-53",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-53"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-53"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </RootRef>
            <Popper
              anchorEl={
                <a
                  class="unstyled"
                  href="https://www.kubeflow.org/docs/pipelines/"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  <button
                    class="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-10"
                    >
                      <div
                        class="flex flex-row flex-shrink-0"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-38 icon"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                          <path
                            d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
                          />
                        </svg>
                        <span
                          class="label"
                        >
                          Documentation
                        </span>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-38 openInNewTabIcon"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                          <path
                            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
                          />
                        </svg>
                      </div>
                    </span>
                    <span
                      class="MuiTouchRipple-root-53"
                    />
                  </button>
                </a>
              }
              className="MuiTooltip-popper-1"
              disablePortal={false}
              id={null}
              open={false}
              placement="right-start"
              transition={true}
            />
          </Tooltip>
        </WithStyles(Tooltip)>
      </ExternalUri>
      <ExternalUri
        collapsed={false}
        icon={[Function]}
        title="Github Repo"
        to="https://github.com/kubeflow/pipelines"
      >
        <WithStyles(Tooltip)
          disableFocusListener={true}
          disableHoverListener={true}
          disableTouchListener={true}
          enterDelay={300}
          placement="right-start"
          title="Github Repo"
        >
          <Tooltip
            TransitionComponent={[Function]}
            classes={
              Object {
                "popper": "MuiTooltip-popper-1",
                "popperInteractive": "MuiTooltip-popperInteractive-2",
                "tooltip": "MuiTooltip-tooltip-3",
                "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
                "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
                "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
                "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
                "touch": "MuiTooltip-touch-4",
              }
            }
            disableFocusListener={true}
            disableHoverListener={true}
            disableTouchListener={true}
            enterDelay={300}
            enterTouchDelay={1000}
            interactive={false}
            leaveDelay={0}
            leaveTouchDelay={1500}
            placement="right-start"
            theme={
              Object {
                "breakpoints": Object {
                  "between": [Function],
                  "down": [Function],
                  "keys": Array [
                    "xs",
                    "sm",
                    "md",
                    "lg",
                    "xl",
                  ],
                  "only": [Function],
                  "up": [Function],
                  "values": Object {
                    "lg": 1280,
                    "md": 960,
                    "sm": 600,
                    "xl": 1920,
                    "xs": 0,
                  },
                  "width": [Function],
                },
                "direction": "ltr",
                "mixins": Object {
                  "gutters": [Function],
                  "toolbar": Object {
                    "@media (min-width:0px) and (orientation: landscape)": Object {
                      "minHeight": 48,
                    },
                    "@media (min-width:600px)": Object {
                      "minHeight": 64,
                    },
                    "minHeight": 56,
                  },
                },
                "overrides": Object {},
                "palette": Object {
                  "action": Object {
                    "active": "rgba(0, 0, 0, 0.54)",
                    "disabled": "rgba(0, 0, 0, 0.26)",
                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
                    "hover": "rgba(0, 0, 0, 0.08)",
                    "hoverOpacity": 0.08,
                    "selected": "rgba(0, 0, 0, 0.14)",
                  },
                  "augmentColor": [Function],
                  "background": Object {
                    "default": "#fafafa",
                    "paper": "#fff",
                  },
                  "common": Object {
                    "black": "#000",
                    "white": "#fff",
                  },
                  "contrastThreshold": 3,
                  "divider": "rgba(0, 0, 0, 0.12)",
                  "error": Object {
                    "contrastText": "#fff",
                    "dark": "#d32f2f",
                    "light": "#e57373",
                    "main": "#f44336",
                  },
                  "getContrastText": [Function],
                  "grey": Object {
                    "100": "#f5f5f5",
                    "200": "#eeeeee",
                    "300": "#e0e0e0",
                    "400": "#bdbdbd",
                    "50": "#fafafa",
                    "500": "#9e9e9e",
                    "600": "#757575",
                    "700": "#616161",
                    "800": "#424242",
                    "900": "#212121",
                    "A100": "#d5d5d5",
                    "A200": "#aaaaaa",
                    "A400": "#303030",
                    "A700": "#616161",
                  },
                  "primary": Object {
                    "contrastText": "#fff",
                    "dark": "#303f9f",
                    "light": "#7986cb",
                    "main": "#3f51b5",
                  },
                  "secondary": Object {
                    "contrastText": "#fff",
                    "dark": "#c51162",
                    "light": "#ff4081",
                    "main": "#f50057",
                  },
                  "text": Object {
                    "disabled": "rgba(0, 0, 0, 0.38)",
                    "hint": "rgba(0, 0, 0, 0.38)",
                    "primary": "rgba(0, 0, 0, 0.87)",
                    "secondary": "rgba(0, 0, 0, 0.54)",
                  },
                  "tonalOffset": 0.2,
                  "type": "light",
                },
                "props": Object {},
                "shadows": Array [
                  "none",
                  "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                  "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                  "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
                ],
                "shape": Object {
                  "borderRadius": 4,
                },
                "spacing": Object {
                  "unit": 8,
                },
                "transitions": Object {
                  "create": [Function],
                  "duration": Object {
                    "complex": 375,
                    "enteringScreen": 225,
                    "leavingScreen": 195,
                    "short": 250,
                    "shorter": 200,
                    "shortest": 150,
                    "standard": 300,
                  },
                  "easing": Object {
                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                  },
                  "getAutoHeightDuration": [Function],
                },
                "typography": Object {
                  "body1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 400,
                    "lineHeight": "1.46429em",
                  },
                  "body1Next": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00938em",
                    "lineHeight": 1.5,
                  },
                  "body2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "lineHeight": "1.71429em",
                  },
                  "body2Next": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.01071em",
                    "lineHeight": 1.5,
                  },
                  "button": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "textTransform": "uppercase",
                  },
                  "buttonNext": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.02857em",
                    "lineHeight": 1.75,
                    "textTransform": "uppercase",
                  },
                  "caption": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "lineHeight": "1.375em",
                  },
                  "captionNext": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.03333em",
                    "lineHeight": 1.66,
                  },
                  "display1": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.125rem",
                    "fontWeight": 400,
                    "lineHeight": "1.20588em",
                  },
                  "display2": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.8125rem",
                    "fontWeight": 400,
                    "lineHeight": "1.13333em",
                    "marginLeft": "-.02em",
                  },
                  "display3": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3.5rem",
                    "fontWeight": 400,
                    "letterSpacing": "-.02em",
                    "lineHeight": "1.30357em",
                    "marginLeft": "-.02em",
                  },
                  "display4": Object {
                    "color": "rgba(0, 0, 0, 0.54)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "7rem",
                    "fontWeight": 300,
                    "letterSpacing": "-.04em",
                    "lineHeight": "1.14286em",
                    "marginLeft": "-.04em",
                  },
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": 14,
                  "fontWeightLight": 300,
                  "fontWeightMedium": 500,
                  "fontWeightRegular": 400,
                  "h1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "6rem",
                    "fontWeight": 300,
                    "letterSpacing": "-0.01562em",
                    "lineHeight": 1,
                  },
                  "h2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3.75rem",
                    "fontWeight": 300,
                    "letterSpacing": "-0.00833em",
                    "lineHeight": 1,
                  },
                  "h3": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "3rem",
                    "fontWeight": 400,
                    "letterSpacing": "0em",
                    "lineHeight": 1.04,
                  },
                  "h4": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "2.125rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00735em",
                    "lineHeight": 1.17,
                  },
                  "h5": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.5rem",
                    "fontWeight": 400,
                    "letterSpacing": "0em",
                    "lineHeight": 1.33,
                  },
                  "h6": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.25rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.0075em",
                    "lineHeight": 1.6,
                  },
                  "headline": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.5rem",
                    "fontWeight": 400,
                    "lineHeight": "1.35417em",
                  },
                  "overline": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.75rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.08333em",
                    "lineHeight": 2.66,
                    "textTransform": "uppercase",
                  },
                  "pxToRem": [Function],
                  "round": [Function],
                  "subheading": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "lineHeight": "1.5em",
                  },
                  "subtitle1": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1rem",
                    "fontWeight": 400,
                    "letterSpacing": "0.00938em",
                    "lineHeight": 1.75,
                  },
                  "subtitle2": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "0.875rem",
                    "fontWeight": 500,
                    "letterSpacing": "0.00714em",
                    "lineHeight": 1.57,
                  },
                  "title": Object {
                    "color": "rgba(0, 0, 0, 0.87)",
                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                    "fontSize": "1.3125rem",
                    "fontWeight": 500,
                    "lineHeight": "1.16667em",
                  },
                  "useNextVariants": false,
                },
                "zIndex": Object {
                  "appBar": 1100,
                  "drawer": 1200,
                  "mobileStepper": 1000,
                  "modal": 1300,
                  "snackbar": 1400,
                  "tooltip": 1500,
                },
              }
            }
            title="Github Repo"
          >
            <RootRef
              rootRef={[Function]}
            >
              <a
                aria-describedby={null}
                className="unstyled"
                href="https://github.com/kubeflow/pipelines"
                rel="noopener noreferrer"
                target="_blank"
                title={null}
              >
                <WithStyles(Button)
                  className="button"
                >
                  <Button
                    className="button"
                    classes={
                      Object {
                        "colorInherit": "MuiButton-colorInherit-30",
                        "contained": "MuiButton-contained-20",
                        "containedPrimary": "MuiButton-containedPrimary-21",
                        "containedSecondary": "MuiButton-containedSecondary-22",
                        "disabled": "MuiButton-disabled-29",
                        "extendedFab": "MuiButton-extendedFab-27",
                        "fab": "MuiButton-fab-26",
                        "flat": "MuiButton-flat-14",
                        "flatPrimary": "MuiButton-flatPrimary-15",
                        "flatSecondary": "MuiButton-flatSecondary-16",
                        "focusVisible": "MuiButton-focusVisible-28",
                        "fullWidth": "MuiButton-fullWidth-34",
                        "label": "MuiButton-label-10",
                        "mini": "MuiButton-mini-31",
                        "outlined": "MuiButton-outlined-17",
                        "outlinedPrimary": "MuiButton-outlinedPrimary-18",
                        "outlinedSecondary": "MuiButton-outlinedSecondary-19",
                        "raised": "MuiButton-raised-23",
                        "raisedPrimary": "MuiButton-raisedPrimary-24",
                        "raisedSecondary": "MuiButton-raisedSecondary-25",
                        "root": "MuiButton-root-9",
                        "sizeLarge": "MuiButton-sizeLarge-33",
                        "sizeSmall": "MuiButton-sizeSmall-32",
                        "text": "MuiButton-text-11",
                        "textPrimary": "MuiButton-textPrimary-12",
                        "textSecondary": "MuiButton-textSecondary-13",
                      }
                    }
                    color="default"
                    component="button"
                    disableFocusRipple={false}
                    disabled={false}
                    fullWidth={false}
                    mini={false}
                    size="medium"
                    type="button"
                    variant="text"
                  >
                    <WithStyles(ButtonBase)
                      className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                      component="button"
                      disabled={false}
                      focusRipple={true}
                      focusVisibleClassName="MuiButton-focusVisible-28"
                      type="button"
                    >
                      <ButtonBase
                        centerRipple={false}
                        className="MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                        classes={
                          Object {
                            "disabled": "MuiButtonBase-disabled-36",
                            "focusVisible": "MuiButtonBase-focusVisible-37",
                            "root": "MuiButtonBase-root-35",
                          }
                        }
                        component="button"
                        disableRipple={false}
                        disableTouchRipple={false}
                        disabled={false}
                        focusRipple={true}
                        focusVisibleClassName="MuiButton-focusVisible-28"
                        tabIndex="0"
                        type="button"
                      >
                        <button
                          className="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                          disabled={false}
                          onBlur={[Function]}
                          onContextMenu={[Function]}
                          onFocus={[Function]}
                          onKeyDown={[Function]}
                          onKeyUp={[Function]}
                          onMouseDown={[Function]}
                          onMouseLeave={[Function]}
                          onMouseUp={[Function]}
                          onTouchEnd={[Function]}
                          onTouchMove={[Function]}
                          onTouchStart={[Function]}
                          tabIndex="0"
                          type="button"
                        >
                          <span
                            className="MuiButton-label-10"
                          >
                            <div
                              className="flex flex-row flex-shrink-0"
                            >
                              <img
                                alt="Github"
                                className="icon iconImage"
                                src="GitHub-Mark-120px-plus.png"
                              />
                              <span
                                className="label"
                              >
                                Github Repo
                              </span>
                              <pure(OpenInNewIcon)
                                className="openInNewTabIcon"
                              >
                                <OpenInNewIcon
                                  className="openInNewTabIcon"
                                >
                                  <WithStyles(SvgIcon)
                                    className="openInNewTabIcon"
                                  >
                                    <SvgIcon
                                      className="openInNewTabIcon"
                                      classes={
                                        Object {
                                          "colorAction": "MuiSvgIcon-colorAction-41",
                                          "colorDisabled": "MuiSvgIcon-colorDisabled-43",
                                          "colorError": "MuiSvgIcon-colorError-42",
                                          "colorPrimary": "MuiSvgIcon-colorPrimary-39",
                                          "colorSecondary": "MuiSvgIcon-colorSecondary-40",
                                          "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-44",
                                          "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-46",
                                          "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-45",
                                          "root": "MuiSvgIcon-root-38",
                                        }
                                      }
                                      color="inherit"
                                      component="svg"
                                      fontSize="default"
                                      viewBox="0 0 24 24"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        className="MuiSvgIcon-root-38 openInNewTabIcon"
                                        focusable="false"
                                        role="presentation"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M0 0h24v24H0z"
                                          fill="none"
                                        />
                                        <path
                                          d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
                                        />
                                      </svg>
                                    </SvgIcon>
                                  </WithStyles(SvgIcon)>
                                </OpenInNewIcon>
                              </pure(OpenInNewIcon)>
                            </div>
                          </span>
                          <NoSsr
                            defer={false}
                            fallback={null}
                          >
                            <WithStyles(TouchRipple)
                              center={false}
                              innerRef={[Function]}
                            >
                              <TouchRipple
                                center={false}
                                classes={
                                  Object {
                                    "child": "MuiTouchRipple-child-57",
                                    "childLeaving": "MuiTouchRipple-childLeaving-58",
                                    "childPulsate": "MuiTouchRipple-childPulsate-59",
                                    "ripple": "MuiTouchRipple-ripple-54",
                                    "ripplePulsate": "MuiTouchRipple-ripplePulsate-56",
                                    "rippleVisible": "MuiTouchRipple-rippleVisible-55",
                                    "root": "MuiTouchRipple-root-53",
                                  }
                                }
                              >
                                <TransitionGroup
                                  childFactory={[Function]}
                                  className="MuiTouchRipple-root-53"
                                  component="span"
                                  enter={true}
                                  exit={true}
                                >
                                  <span
                                    className="MuiTouchRipple-root-53"
                                  />
                                </TransitionGroup>
                              </TouchRipple>
                            </WithStyles(TouchRipple)>
                          </NoSsr>
                        </button>
                      </ButtonBase>
                    </WithStyles(ButtonBase)>
                  </Button>
                </WithStyles(Button)>
              </a>
            </RootRef>
            <Popper
              anchorEl={
                <a
                  class="unstyled"
                  href="https://github.com/kubeflow/pipelines"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  <button
                    class="MuiButtonBase-root-35 MuiButton-root-9 MuiButton-text-11 MuiButton-flat-14 button"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiButton-label-10"
                    >
                      <div
                        class="flex flex-row flex-shrink-0"
                      >
                        <img
                          alt="Github"
                          class="icon iconImage"
                          src="GitHub-Mark-120px-plus.png"
                        />
                        <span
                          class="label"
                        >
                          Github Repo
                        </span>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-38 openInNewTabIcon"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                          <path
                            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
                          />
                        </svg>
                      </div>
                    </span>
                    <span
                      class="MuiTouchRipple-root-53"
                    />
                  </button>
                </a>
              }
              className="MuiTooltip-popper-1"
              disablePortal={false}
              id={null}
              open={false}
              placement="right-start"
              transition={true}
            />
          </Tooltip>
        </WithStyles(Tooltip)>
      </ExternalUri>
      <hr
        className="separator"
      />
      <WithStyles(IconButton)
        className="chevron"
        onClick={[Function]}
      >
        <IconButton
          className="chevron"
          classes={
            Object {
              "colorInherit": "MuiIconButton-colorInherit-48",
              "colorPrimary": "MuiIconButton-colorPrimary-49",
              "colorSecondary": "MuiIconButton-colorSecondary-50",
              "disabled": "MuiIconButton-disabled-51",
              "label": "MuiIconButton-label-52",
              "root": "MuiIconButton-root-47",
            }
          }
          color="default"
          disabled={false}
          onClick={[Function]}
        >
          <WithStyles(ButtonBase)
            centerRipple={true}
            className="MuiIconButton-root-47 chevron"
            disabled={false}
            focusRipple={true}
            onClick={[Function]}
          >
            <ButtonBase
              centerRipple={true}
              className="MuiIconButton-root-47 chevron"
              classes={
                Object {
                  "disabled": "MuiButtonBase-disabled-36",
                  "focusVisible": "MuiButtonBase-focusVisible-37",
                  "root": "MuiButtonBase-root-35",
                }
              }
              component="button"
              disableRipple={false}
              disableTouchRipple={false}
              disabled={false}
              focusRipple={true}
              onClick={[Function]}
              tabIndex="0"
              type="button"
            >
              <button
                className="MuiButtonBase-root-35 MuiIconButton-root-47 chevron"
                disabled={false}
                onBlur={[Function]}
                onClick={[Function]}
                onContextMenu={[Function]}
                onFocus={[Function]}
                onKeyDown={[Function]}
                onKeyUp={[Function]}
                onMouseDown={[Function]}
                onMouseLeave={[Function]}
                onMouseUp={[Function]}
                onTouchEnd={[Function]}
                onTouchMove={[Function]}
                onTouchStart={[Function]}
                tabIndex="0"
                type="button"
              >
                <span
                  className="MuiIconButton-label-52"
                >
                  <pure(ChevronLeftIcon)>
                    <ChevronLeftIcon>
                      <WithStyles(SvgIcon)>
                        <SvgIcon
                          classes={
                            Object {
                              "colorAction": "MuiSvgIcon-colorAction-41",
                              "colorDisabled": "MuiSvgIcon-colorDisabled-43",
                              "colorError": "MuiSvgIcon-colorError-42",
                              "colorPrimary": "MuiSvgIcon-colorPrimary-39",
                              "colorSecondary": "MuiSvgIcon-colorSecondary-40",
                              "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-44",
                              "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-46",
                              "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-45",
                              "root": "MuiSvgIcon-root-38",
                            }
                          }
                          color="inherit"
                          component="svg"
                          fontSize="default"
                          viewBox="0 0 24 24"
                        >
                          <svg
                            aria-hidden="true"
                            className="MuiSvgIcon-root-38"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                            />
                            <path
                              d="M0 0h24v24H0z"
                              fill="none"
                            />
                          </svg>
                        </SvgIcon>
                      </WithStyles(SvgIcon)>
                    </ChevronLeftIcon>
                  </pure(ChevronLeftIcon)>
                </span>
                <NoSsr
                  defer={false}
                  fallback={null}
                >
                  <WithStyles(TouchRipple)
                    center={true}
                    innerRef={[Function]}
                  >
                    <TouchRipple
                      center={true}
                      classes={
                        Object {
                          "child": "MuiTouchRipple-child-57",
                          "childLeaving": "MuiTouchRipple-childLeaving-58",
                          "childPulsate": "MuiTouchRipple-childPulsate-59",
                          "ripple": "MuiTouchRipple-ripple-54",
                          "ripplePulsate": "MuiTouchRipple-ripplePulsate-56",
                          "rippleVisible": "MuiTouchRipple-rippleVisible-55",
                          "root": "MuiTouchRipple-root-53",
                        }
                      }
                    >
                      <TransitionGroup
                        childFactory={[Function]}
                        className="MuiTouchRipple-root-53"
                        component="span"
                        enter={true}
                        exit={true}
                      >
                        <span
                          className="MuiTouchRipple-root-53"
                        />
                      </TransitionGroup>
                    </TouchRipple>
                  </WithStyles(TouchRipple)>
                </NoSsr>
              </button>
            </ButtonBase>
          </WithStyles(ButtonBase)>
        </IconButton>
      </WithStyles(IconButton)>
    </div>
    <div
      className="infoVisible"
    >
      <WithStyles(Tooltip)
        enterDelay={300}
        placement="top-start"
        title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-1",
              "popperInteractive": "MuiTooltip-popperInteractive-2",
              "tooltip": "MuiTooltip-tooltip-3",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
              "touch": "MuiTooltip-touch-4",
            }
          }
          disableFocusListener={false}
          disableHoverListener={false}
          disableTouchListener={false}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="top-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
        >
          <RootRef
            rootRef={[Function]}
          >
            <div
              aria-describedby={null}
              className="envMetadata"
              onBlur={[Function]}
              onFocus={[Function]}
              onMouseLeave={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              onTouchStart={[Function]}
              title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
            >
              <span>
                Version: 
              </span>
              <a
                className="link unstyled"
                href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
                rel="noopener"
                target="_blank"
              >
                1.0.0
              </a>
            </div>
          </RootRef>
          <Popper
            anchorEl={
              <div
                class="envMetadata"
                title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
              >
                <span>
                  Version: 
                </span>
                <a
                  class="link unstyled"
                  href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
                  rel="noopener"
                  target="_blank"
                >
                  1.0.0
                </a>
              </div>
            }
            className="MuiTooltip-popper-1"
            disablePortal={false}
            id={null}
            open={false}
            placement="top-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
      <WithStyles(Tooltip)
        enterDelay={300}
        placement="top-start"
        title="Report an Issue"
      >
        <Tooltip
          TransitionComponent={[Function]}
          classes={
            Object {
              "popper": "MuiTooltip-popper-1",
              "popperInteractive": "MuiTooltip-popperInteractive-2",
              "tooltip": "MuiTooltip-tooltip-3",
              "tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom-8",
              "tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft-5",
              "tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight-6",
              "tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop-7",
              "touch": "MuiTooltip-touch-4",
            }
          }
          disableFocusListener={false}
          disableHoverListener={false}
          disableTouchListener={false}
          enterDelay={300}
          enterTouchDelay={1000}
          interactive={false}
          leaveDelay={0}
          leaveTouchDelay={1500}
          placement="top-start"
          theme={
            Object {
              "breakpoints": Object {
                "between": [Function],
                "down": [Function],
                "keys": Array [
                  "xs",
                  "sm",
                  "md",
                  "lg",
                  "xl",
                ],
                "only": [Function],
                "up": [Function],
                "values": Object {
                  "lg": 1280,
                  "md": 960,
                  "sm": 600,
                  "xl": 1920,
                  "xs": 0,
                },
                "width": [Function],
              },
              "direction": "ltr",
              "mixins": Object {
                "gutters": [Function],
                "toolbar": Object {
                  "@media (min-width:0px) and (orientation: landscape)": Object {
                    "minHeight": 48,
                  },
                  "@media (min-width:600px)": Object {
                    "minHeight": 64,
                  },
                  "minHeight": 56,
                },
              },
              "overrides": Object {},
              "palette": Object {
                "action": Object {
                  "active": "rgba(0, 0, 0, 0.54)",
                  "disabled": "rgba(0, 0, 0, 0.26)",
                  "disabledBackground": "rgba(0, 0, 0, 0.12)",
                  "hover": "rgba(0, 0, 0, 0.08)",
                  "hoverOpacity": 0.08,
                  "selected": "rgba(0, 0, 0, 0.14)",
                },
                "augmentColor": [Function],
                "background": Object {
                  "default": "#fafafa",
                  "paper": "#fff",
                },
                "common": Object {
                  "black": "#000",
                  "white": "#fff",
                },
                "contrastThreshold": 3,
                "divider": "rgba(0, 0, 0, 0.12)",
                "error": Object {
                  "contrastText": "#fff",
                  "dark": "#d32f2f",
                  "light": "#e57373",
                  "main": "#f44336",
                },
                "getContrastText": [Function],
                "grey": Object {
                  "100": "#f5f5f5",
                  "200": "#eeeeee",
                  "300": "#e0e0e0",
                  "400": "#bdbdbd",
                  "50": "#fafafa",
                  "500": "#9e9e9e",
                  "600": "#757575",
                  "700": "#616161",
                  "800": "#424242",
                  "900": "#212121",
                  "A100": "#d5d5d5",
                  "A200": "#aaaaaa",
                  "A400": "#303030",
                  "A700": "#616161",
                },
                "primary": Object {
                  "contrastText": "#fff",
                  "dark": "#303f9f",
                  "light": "#7986cb",
                  "main": "#3f51b5",
                },
                "secondary": Object {
                  "contrastText": "#fff",
                  "dark": "#c51162",
                  "light": "#ff4081",
                  "main": "#f50057",
                },
                "text": Object {
                  "disabled": "rgba(0, 0, 0, 0.38)",
                  "hint": "rgba(0, 0, 0, 0.38)",
                  "primary": "rgba(0, 0, 0, 0.87)",
                  "secondary": "rgba(0, 0, 0, 0.54)",
                },
                "tonalOffset": 0.2,
                "type": "light",
              },
              "props": Object {},
              "shadows": Array [
                "none",
                "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
                "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
                "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
                "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
                "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
                "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
                "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
                "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
                "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
                "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
                "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
                "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
                "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
                "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
                "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
                "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
                "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
                "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
                "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
                "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
                "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
              ],
              "shape": Object {
                "borderRadius": 4,
              },
              "spacing": Object {
                "unit": 8,
              },
              "transitions": Object {
                "create": [Function],
                "duration": Object {
                  "complex": 375,
                  "enteringScreen": 225,
                  "leavingScreen": 195,
                  "short": 250,
                  "shorter": 200,
                  "shortest": 150,
                  "standard": 300,
                },
                "easing": Object {
                  "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
                  "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
                  "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
                  "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
                },
                "getAutoHeightDuration": [Function],
              },
              "typography": Object {
                "body1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "lineHeight": "1.46429em",
                },
                "body1Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.5,
                },
                "body2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "lineHeight": "1.71429em",
                },
                "body2Next": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.01071em",
                  "lineHeight": 1.5,
                },
                "button": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "textTransform": "uppercase",
                },
                "buttonNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.02857em",
                  "lineHeight": 1.75,
                  "textTransform": "uppercase",
                },
                "caption": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "lineHeight": "1.375em",
                },
                "captionNext": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.03333em",
                  "lineHeight": 1.66,
                },
                "display1": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.20588em",
                },
                "display2": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.8125rem",
                  "fontWeight": 400,
                  "lineHeight": "1.13333em",
                  "marginLeft": "-.02em",
                },
                "display3": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "-.02em",
                  "lineHeight": "1.30357em",
                  "marginLeft": "-.02em",
                },
                "display4": Object {
                  "color": "rgba(0, 0, 0, 0.54)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "7rem",
                  "fontWeight": 300,
                  "letterSpacing": "-.04em",
                  "lineHeight": "1.14286em",
                  "marginLeft": "-.04em",
                },
                "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                "fontSize": 14,
                "fontWeightLight": 300,
                "fontWeightMedium": 500,
                "fontWeightRegular": 400,
                "h1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "6rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.01562em",
                  "lineHeight": 1,
                },
                "h2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3.75rem",
                  "fontWeight": 300,
                  "letterSpacing": "-0.00833em",
                  "lineHeight": 1,
                },
                "h3": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "3rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.04,
                },
                "h4": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "2.125rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00735em",
                  "lineHeight": 1.17,
                },
                "h5": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "letterSpacing": "0em",
                  "lineHeight": 1.33,
                },
                "h6": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.25rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.0075em",
                  "lineHeight": 1.6,
                },
                "headline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.5rem",
                  "fontWeight": 400,
                  "lineHeight": "1.35417em",
                },
                "overline": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.75rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.08333em",
                  "lineHeight": 2.66,
                  "textTransform": "uppercase",
                },
                "pxToRem": [Function],
                "round": [Function],
                "subheading": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "lineHeight": "1.5em",
                },
                "subtitle1": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1rem",
                  "fontWeight": 400,
                  "letterSpacing": "0.00938em",
                  "lineHeight": 1.75,
                },
                "subtitle2": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "0.875rem",
                  "fontWeight": 500,
                  "letterSpacing": "0.00714em",
                  "lineHeight": 1.57,
                },
                "title": Object {
                  "color": "rgba(0, 0, 0, 0.87)",
                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
                  "fontSize": "1.3125rem",
                  "fontWeight": 500,
                  "lineHeight": "1.16667em",
                },
                "useNextVariants": false,
              },
              "zIndex": Object {
                "appBar": 1100,
                "drawer": 1200,
                "mobileStepper": 1000,
                "modal": 1300,
                "snackbar": 1400,
                "tooltip": 1500,
              },
            }
          }
          title="Report an Issue"
        >
          <RootRef
            rootRef={[Function]}
          >
            <div
              aria-describedby={null}
              className="envMetadata"
              onBlur={[Function]}
              onFocus={[Function]}
              onMouseLeave={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              onTouchStart={[Function]}
              title="Report an Issue"
            >
              <a
                className="link unstyled"
                href="https://github.com/kubeflow/pipelines/issues/new/choose"
                rel="noopener"
                target="_blank"
              >
                Report an Issue
              </a>
            </div>
          </RootRef>
          <Popper
            anchorEl={
              <div
                class="envMetadata"
                title="Report an Issue"
              >
                <a
                  class="link unstyled"
                  href="https://github.com/kubeflow/pipelines/issues/new/choose"
                  rel="noopener"
                  target="_blank"
                >
                  Report an Issue
                </a>
              </div>
            }
            className="MuiTooltip-popper-1"
            disablePortal={false}
            id={null}
            open={false}
            placement="top-start"
            transition={true}
          />
        </Tooltip>
      </WithStyles(Tooltip)>
    </div>
  </div>
</SideNav>
`;

exports[`SideNav renders Pipelines as active page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders Pipelines as active when on PipelineDetails page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders collapsed state 1`] = `
<div
  className="root flexColumn noShrink collapsedRoot"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button active collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="collapsedLabel label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="collapsedLabel label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="collapsedLabel label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="collapsedLabel label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="collapsedLabel label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={false}
      disableHoverListener={false}
      disableTouchListener={false}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button collapsedButton"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="collapsedLabel label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator collapsedSeparator"
    />
    <ExternalUri
      collapsed={true}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={true}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator collapsedSeparator"
    />
    <WithStyles(IconButton)
      className="chevron collapsedChevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoHidden"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders expanded state 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on AllRuns page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on Compare page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on NewExperiment page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on NewRun page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on RecurringRunDetails page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active page when on RunDetails page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav renders experiments as active when on ExperimentDetails page 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#0d6de7"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;

exports[`SideNav show jupyterhub link if accessible 1`] = `
<div
  className="root flexColumn noShrink"
  id="sideNav"
>
  <div
    style={
      Object {
        "flexGrow": 1,
      }
    }
  >
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Pipeline List"
    >
      <Link
        className="unstyled"
        id="pipelinesBtn"
        replace={false}
        to="/pipelines"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <PipelinesIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Pipelines
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Experiment List"
    >
      <Link
        className="unstyled"
        id="experimentsBtn"
        replace={false}
        to="/experiments"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <div
              className="alignItems"
            >
              <ExperimentsIcon
                color="#9aa0a6"
              />
            </div>
            <span
              className="label"
            >
              Experiments
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Runs List"
    >
      <Link
        className="unstyled"
        id="runsBtn"
        replace={false}
        to="/runs"
      >
        <WithStyles(Button)
          className="button active"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(DirectionsRunIcon) />
            <span
              className="label"
            >
              Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Recurring Runs List"
    >
      <Link
        className="unstyled"
        id="recurringRunsBtn"
        replace={false}
        to="/recurringruns"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(AlarmIcon) />
            <span
              className="label"
            >
              Recurring Runs
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Artifacts List"
    >
      <Link
        className="unstyled"
        id="artifactsBtn"
        replace={false}
        to="/artifacts"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(BubbleChartIcon) />
            <span
              className="label"
            >
              Artifacts
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <div
      className="indicator indicatorHidden"
    />
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Executions List"
    >
      <Link
        className="unstyled"
        id="executionsBtn"
        replace={false}
        to="/executions"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(PlayArrowIcon) />
            <span
              className="label"
            >
              Executions
            </span>
          </div>
        </WithStyles(Button)>
      </Link>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      disableFocusListener={true}
      disableHoverListener={true}
      disableTouchListener={true}
      enterDelay={300}
      placement="right-start"
      title="Open Jupyter Notebook"
    >
      <a
        className="unstyled"
        href="/hub/"
        id="jupyterhubBtn"
        rel="noopener"
        target="_blank"
      >
        <WithStyles(Button)
          className="button"
        >
          <div
            className="flex flex-row flex-shrink-0"
          >
            <pure(CodeIcon)
              style={
                Object {
                  "height": 20,
                  "width": 20,
                }
              }
            />
            <span
              className="label"
            >
              Notebooks
            </span>
            <pure(OpenInNewIcon)
              className="openInNewTabIcon"
            />
          </div>
        </WithStyles(Button)>
      </a>
    </WithStyles(Tooltip)>
    <hr
      className="separator"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Documentation"
      to="https://www.kubeflow.org/docs/pipelines/"
    />
    <ExternalUri
      collapsed={false}
      icon={[Function]}
      title="Github Repo"
      to="https://github.com/kubeflow/pipelines"
    />
    <hr
      className="separator"
    />
    <WithStyles(IconButton)
      className="chevron"
      onClick={[Function]}
    >
      <pure(ChevronLeftIcon) />
    </WithStyles(IconButton)>
  </div>
  <div
    className="infoVisible"
  >
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Build date: 10/23/2018, Commit hash: 0a7b9e3"
    >
      <div
        className="envMetadata"
      >
        <span>
          Version: 
        </span>
        <a
          className="link unstyled"
          href="https://www.github.com/kubeflow/pipelines/commit/0a7b9e38f2b9bcdef4bbf3234d971e1635b50cd5"
          rel="noopener"
          target="_blank"
        >
          1.0.0
        </a>
      </div>
    </WithStyles(Tooltip)>
    <WithStyles(Tooltip)
      enterDelay={300}
      placement="top-start"
      title="Report an Issue"
    >
      <div
        className="envMetadata"
      >
        <a
          className="link unstyled"
          href="https://github.com/kubeflow/pipelines/issues/new/choose"
          rel="noopener"
          target="_blank"
        >
          Report an Issue
        </a>
      </div>
    </WithStyles(Tooltip)>
  </div>
</div>
`;
