continue adding structured output

hyperglass/ui/components/ChakraSelect.js

@@ -4,53 +4,77 @@ import Select from "react-select";
 import { opposingColor } from "~/util";
 
 const ChakraSelect = React.forwardRef(
-    ({ placeholder = "Select...", isFullWidth, size, children, ...props }, ref) => {
+  (
+    { placeholder = "Select...", isFullWidth, size, children, ...props },
+    ref
+  ) => {
     const theme = useTheme();
     const { colorMode } = useColorMode();
     const sizeMap = {
       lg: { height: theme.space[12] },
       md: { height: theme.space[10] },
-            sm: { height: theme.space[8] },
+      sm: { height: theme.space[8] }
     };
     const colorSetPrimaryBg = {
       dark: theme.colors.primary[300],
-            light: theme.colors.primary[500],
+      light: theme.colors.primary[500]
+    };
+    const colorSetPrimaryColor = opposingColor(
+      theme,
+      colorSetPrimaryBg[colorMode]
+    );
+    const bg = {
+      dark: theme.colors.whiteAlpha[100],
+      light: theme.colors.white
+    };
+    const color = {
+      dark: theme.colors.whiteAlpha[800],
+      light: theme.colors.black
     };
-        const colorSetPrimaryColor = opposingColor(theme, colorSetPrimaryBg[colorMode]);
-        const bg = { dark: theme.colors.whiteAlpha[100], light: theme.colors.white };
-        const color = { dark: theme.colors.whiteAlpha[800], light: theme.colors.black };
     const borderFocused = theme.colors.secondary[500];
     const borderDisabled = theme.colors.whiteAlpha[100];
-        const border = { dark: theme.colors.whiteAlpha[50], light: theme.colors.gray[100] };
+    const border = {
+      dark: theme.colors.whiteAlpha[50],
+      light: theme.colors.gray[100]
+    };
     const borderRadius = theme.space[1];
-        const hoverColor = { dark: theme.colors.whiteAlpha[200], light: theme.colors.gray[300] };
+    const hoverColor = {
+      dark: theme.colors.whiteAlpha[200],
+      light: theme.colors.gray[300]
+    };
     const { height } = sizeMap[size];
     const optionBgActive = {
       dark: theme.colors.primary[400],
-            light: theme.colors.primary[600],
+      light: theme.colors.primary[600]
     };
     const optionBgColor = opposingColor(theme, optionBgActive[colorMode]);
     const optionSelectedBg = {
       dark: theme.colors.whiteAlpha[400],
-            light: theme.colors.blackAlpha[400],
+      light: theme.colors.blackAlpha[400]
     };
-        const optionSelectedColor = opposingColor(theme, optionSelectedBg[colorMode]);
+    const optionSelectedColor = opposingColor(
+      theme,
+      optionSelectedBg[colorMode]
+    );
     const selectedDisabled = theme.colors.whiteAlpha[400];
     const placeholderColor = {
       dark: theme.colors.whiteAlpha[400],
-            light: theme.colors.gray[400],
+      light: theme.colors.gray[400]
     };
     const menuBg = { dark: theme.colors.black, light: theme.colors.white };
-        const menuColor = { dark: theme.colors.white, light: theme.colors.blackAlpha[800] };
+    const menuColor = {
+      dark: theme.colors.white,
+      light: theme.colors.blackAlpha[800]
+    };
     return (
       <Select
         ref={ref}
         styles={{
-                    container: (base) => ({
+          container: base => ({
             ...base,
             minHeight: height,
             borderRadius: borderRadius,
-                        width: "100%",
+            width: "100%"
           }),
           control: (base, state) => ({
             ...base,
@@ -64,13 +88,13 @@ const ChakraSelect = React.forwardRef(
               : border[colorMode],
             borderRadius: borderRadius,
             "&:hover": {
-                            borderColor: hoverColor[colorMode],
-                        },
+              borderColor: hoverColor[colorMode]
+            }
           }),
-                    menu: (base) => ({
+          menu: base => ({
             ...base,
             backgroundColor: menuBg[colorMode],
-                        borderRadius: borderRadius,
+            borderRadius: borderRadius
           }),
           option: (base, state) => ({
             ...base,
@@ -91,46 +115,46 @@ const ChakraSelect = React.forwardRef(
             fontSize: theme.fontSizes[size],
             "&:active": {
               backgroundColor: optionBgActive[colorMode],
-                            color: optionBgColor,
-                        },
+              color: optionBgColor
+            }
           }),
-                    indicatorSeparator: (base) => ({
+          indicatorSeparator: base => ({
             ...base,
-                        backgroundColor: placeholderColor[colorMode],
+            backgroundColor: placeholderColor[colorMode]
           }),
-                    dropdownIndicator: (base) => ({
+          dropdownIndicator: base => ({
             ...base,
             color: placeholderColor[colorMode],
             "&:hover": {
-                            color: color[colorMode],
-                        },
+              color: color[colorMode]
+            }
           }),
-                    valueContainer: (base) => ({
+          valueContainer: base => ({
             ...base,
             paddingLeft: theme.space[4],
-                        paddingRight: theme.space[4],
+            paddingRight: theme.space[4]
           }),
-                    multiValue: (base) => ({
+          multiValue: base => ({
             ...base,
-                        backgroundColor: colorSetPrimaryBg[colorMode],
+            backgroundColor: colorSetPrimaryBg[colorMode]
           }),
-                    multiValueLabel: (base) => ({
+          multiValueLabel: base => ({
             ...base,
-                        color: colorSetPrimaryColor,
+            color: colorSetPrimaryColor
           }),
-                    multiValueRemove: (base) => ({
+          multiValueRemove: base => ({
             ...base,
             color: colorSetPrimaryColor,
             "&:hover": {
               color: colorSetPrimaryColor,
-                            backgroundColor: "inherit",
-                        },
+              backgroundColor: "inherit"
+            }
           }),
-                    singleValue: (base) => ({
+          singleValue: base => ({
             ...base,
             color: color[colorMode],
-                        fontSize: theme.fontSizes[size],
-                    }),
+            fontSize: theme.fontSizes[size]
+          })
         }}
         placeholder={
           <Text

hyperglass/ui/components/HyperglassProvider.js

@@ -21,6 +21,8 @@ export const HyperglassProvider = ({ config, children }) => {
   const value = useMemo(() => config, [config]);
   const userTheme = value && makeTheme(value.web.theme);
   const theme = value ? userTheme : defaultTheme;
+  // console.log(value);
+  // console.log(theme);
   return (
     <HyperglassContext.Provider value={value}>
       <ThemeProvider theme={theme}>

hyperglass/ui/components/Table/MainTable.js

@@ -11,6 +11,7 @@ const MainTable = ({ children, ...props }) => {
   const { colorMode } = useColorMode();
   return (
     <Box
+      as="table"
       css={css({
         "&::-webkit-scrollbar": { height: "5px" },
         "&::-webkit-scrollbar-track": {

hyperglass/ui/pages/_app.js

@@ -1,9 +1,15 @@
 import React from "react";
+import { useRouter } from "next/router";
 import { HyperglassProvider } from "~/components/HyperglassProvider";
+import Error from "./_error";
 
 const config = process.env._HYPERGLASS_CONFIG_;
 
 const Hyperglass = ({ Component, pageProps }) => {
+  const { asPath } = useRouter();
+  if (asPath === "/structured") {
+    return <Error msg="/structured" statusCode={404} />;
+  }
   return (
     <HyperglassProvider config={config}>
       <Component {...pageProps} />

hyperglass/ui/util.js

@@ -10,7 +10,7 @@ const isDark = color => {
 const isLight = color => isDark(color);
 
 const opposingColor = (theme, color) => {
-  if (color.includes(".")) {
+  if (color.match(/^\w+\.\d+$/m)) {
     const colorParts = color.split(".");
     if (colorParts.length !== 2) {
       throw Error(`Color is improperly formatted. Got '${color}'`);