fix structured output table

hyperglass/ui/components/Card/CardBody.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Flex, useColorMode } from "@chakra-ui/core";
+
+const bg = { light: "white", dark: "original.dark" };
+const color = { light: "original.dark", dark: "white" };
+
+const CardBody = ({ onClick = () => false, children, ...props }) => {
+  const { colorMode } = useColorMode();
+  return (
+    <Flex
+      w="100%"
+      maxW="100%"
+      rounded="md"
+      borderWidth="1px"
+      direction="column"
+      onClick={onClick}
+      bg={bg[colorMode]}
+      color={color[colorMode]}
+      overflow="hidden"
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+CardBody.displayName = "CardBody";
+
+export default CardBody;

hyperglass/ui/components/Card/index.js

@@ -1,28 +1,5 @@
-import * as React from "react";
-import { Flex, useColorMode } from "@chakra-ui/core";
+import CardBody from "./CardBody";
+import CardFooter from "./CardFooter";
+import CardHeader from "./CardHeader";
 
-const bg = { light: "white", dark: "black" };
-const color = { light: "black", dark: "white" };
-
-const Card = ({ onClick = () => false, children, ...props }) => {
-  const { colorMode } = useColorMode();
-  return (
-    <Flex
-      w="100%"
-      maxW="100%"
-      rounded="md"
-      borderWidth="1px"
-      direction="column"
-      onClick={onClick}
-      bg={bg[colorMode]}
-      color={color[colorMode]}
-      {...props}
-    >
-      {children}
-    </Flex>
-  );
-};
-
-Card.displayName = "Card";
-
-export default Card;
+export { CardBody, CardFooter, CardHeader };

hyperglass/ui/components/Table/TableCell.js

@@ -39,6 +39,7 @@ const TableCell = ({
       m={0}
       w="1%"
       whiteSpace="nowrap"
+      textAlign={align}
       {...borderProps}
       {...props}
     >

hyperglass/ui/components/Table/TableMain.js

@@ -1,4 +1,4 @@
-/*@jsx jsx*/
+/** @jsx jsx */
 import { jsx } from "@emotion/core";
 import { Box, css, useTheme, useColorMode } from "@chakra-ui/core";
 
@@ -12,6 +12,7 @@ const MainTable = ({ children, ...props }) => {
   return (
     <Box
       as="table"
+      display="block"
       css={css({
         "&::-webkit-scrollbar": { height: "5px" },
         "&::-webkit-scrollbar-track": {
@@ -26,7 +27,7 @@ const MainTable = ({ children, ...props }) => {
 
         "-ms-overflow-style": { display: "none" }
       })(theme)}
-      overflow="auto"
+      overflowX="auto"
       borderRadius="md"
       boxSizing="border-box"
       {...props}

hyperglass/ui/components/Table/TableRow.js

@@ -9,7 +9,7 @@ import { opposingColor } from "~/util";
 //     }
 // `;
 
-const hoverBg = { dark: "whiteAlpha.100", light: "blackAlpha.100" };
+const hoverBg = { dark: "whiteAlpha.50", light: "blackAlpha.50" };
 const bgStripe = { dark: "whiteAlpha.50", light: "blackAlpha.50" };
 const rowBorder = {
   dark: { borderTop: "1px", borderTopColor: "whiteAlpha.100" },

hyperglass/ui/components/Table/TableSelectShow.js

@@ -16,7 +16,7 @@ import { Select } from "@chakra-ui/core";
 
 const TableSelectShow = ({ value, onChange, children, ...props }) => {
   return (
-    <Select onChange={onChange} {...props}>
+    <Select size="sm" onChange={onChange} {...props}>
       {[5, 10, 20, 30, 40, 50].map(value => (
         <option key={value} value={value}>
           Show {value}

hyperglass/ui/components/Table/index.js

@@ -1,12 +1,10 @@
 import * as React from "react";
 import { useMemo } from "react";
 import { Flex, Icon, Text } from "@chakra-ui/core";
-import useMedia from "~/components/MediaProvider";
 import { usePagination, useSortBy, useTable } from "react-table";
-import Card from "~/components/Card";
-import BottomSection from "~/components/Card/CardFooter";
-import TopSection from "~/components/Card/CardHeader";
-import MainTable from "./MainTable";
+import useMedia from "~/components/MediaProvider";
+import { CardBody, CardFooter, CardHeader } from "~/components/Card";
+import TableMain from "./TableMain";
 import TableCell from "./TableCell";
 import TableHead from "./TableHead";
 import TableRow from "./TableRow";
@@ -32,8 +30,6 @@ const Table = ({
 
   const { isSm, isMd } = useMedia();
 
-  const isTabletOrMobile = isSm ? true : isMd ? true : false;
-
   const defaultColumn = useMemo(
     () => ({
       minWidth: 100,
@@ -43,6 +39,14 @@ const Table = ({
     []
   );
 
+  let hiddenColumns = [];
+
+  tableColumns.map(col => {
+    if (col.hidden === true) {
+      hiddenColumns.push(col.accessor);
+    }
+  });
+
   const {
     getTableProps,
     headerGroups,
@@ -56,22 +60,33 @@ const Table = ({
     nextPage,
     previousPage,
     setPageSize,
+    setHiddenColumns,
     state: { pageIndex, pageSize }
   } = useTable(
     {
       columns: tableColumns,
       defaultColumn,
       data,
-      initialState: { pageIndex: 0, pageSize: initialPageSize }
+      initialState: {
+        pageIndex: 0,
+        pageSize: initialPageSize,
+        hiddenColumns: hiddenColumns
+      }
     },
     useSortBy,
     usePagination
   );
 
+  // tableColumns.map(col => {
+  //   if (col.hidden === true) {
+  //     setHiddenColumns(old => [...old, col.id]);
+  //   }
+  // });
+
   return (
-    <Card>
-      {!!tableHeading && <TopSection>{tableHeading}</TopSection>}
-      <MainTable {...getTableProps()}>
+    <CardBody>
+      {!!tableHeading && <CardHeader>{tableHeading}</CardHeader>}
+      <TableMain {...getTableProps()}>
         <TableHead>
           {headerGroups.map(headerGroup => (
             <TableRow
@@ -135,8 +150,8 @@ const Table = ({
               )
           )}
         </TableBody>
-      </MainTable>
-      <BottomSection>
+      </TableMain>
+      <CardFooter>
         <Flex direction="row">
           <TableIconButton
             mr={2}
@@ -152,13 +167,13 @@ const Table = ({
           />
         </Flex>
         <Flex justifyContent="center" alignItems="center">
-          <Text mr={4} whiteSpace="nowrap">
+          <Text fontSize="sm" mr={4} whiteSpace="nowrap">
             Page{" "}
             <strong>
               {pageIndex + 1} of {pageOptions.length}
             </strong>{" "}
           </Text>
-          {!isTabletOrMobile && (
+          {!(isSm || isMd) && (
             <TableSelectShow
               value={pageSize}
               onChange={e => {
@@ -181,8 +196,8 @@ const Table = ({
             icon={() => <Icon name="arrow-right" size={3} />}
           />
         </Flex>
-      </BottomSection>
-    </Card>
+      </CardFooter>
+    </CardBody>
   );
 };
 

hyperglass/ui/components/Table/styles.js

@@ -1,70 +0,0 @@
-import React from "react";
-import { Flex, IconButton } from "@chakra-ui/core";
-import styled from "@emotion/styled";
-import {
-    color,
-    ColorProps,
-    justifyContent,
-    JustifyContentProps,
-    space,
-    SpaceProps,
-} from "styled-system";
-
-export const StyledTable = styled.div`
-    ${space};
-    flex: 1;
-    width: 100%;
-    display: flex;
-    max-width: 100%;
-    overflow-x: auto;
-    border-radius: 4px;
-    flex-direction: column;
-    box-sizing: border-box;
-`;
-
-export const TableHead = styled.div`
-    ${space};
-    display: flex;
-    flex-direction: row;
-`;
-
-export const TableCell = styled("div")`
-    ${space};
-    ${color};
-    ${justifyContent};
-    flex: 1;
-    display: flex;
-    min-width: 150px;
-    align-items: center;
-    border-bottom-width: 1px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
-
-export const TableRow = styled(Flex)`
-    &:hover {
-        cursor: pointer;
-        background-color: rgba(0, 0, 0, 0.01);
-    }
-`;
-
-export const TableIconButton = ({ icon, onClick, isDisabled, children, variantColor, ...rest }) => {
-    return (
-        <IconButton
-            size="sm"
-            {...rest}
-            icon={icon}
-            borderWidth={1}
-            onClick={onClick}
-            variantColor={variantColor}
-            isDisabled={isDisabled}
-            aria-label="Table Icon button"
-        >
-            {children}
-        </IconButton>
-    );
-};
-
-TableIconButton.defaultProps = {
-    variantColor: "gray",
-};

hyperglass/ui/pages/_app.js

@@ -6,10 +6,10 @@ 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} />;
-  }
+  // const { asPath } = useRouter();
+  // if (asPath === "/structured") {
+  //   return <Error msg="/structured" statusCode={404} />;
+  // }
   return (
     <HyperglassProvider config={config}>
       <Component {...pageProps} />

hyperglass/ui/pages/structured.js

@@ -143,7 +143,16 @@ const rpkiColor = {
 const makeColumns = fields => {
   return fields.map(pair => {
     const [header, accessor, align] = pair;
-    return { Header: header, accessor: accessor, align: align };
+    let columnConfig = {
+      Header: header,
+      accessor: accessor,
+      align: align,
+      hidden: false
+    };
+    if (align === null) {
+      columnConfig.hidden = true;
+    }
+    return columnConfig;
   });
 };
 
@@ -282,8 +291,6 @@ const RPKIState = ({ state, active }) => {
 };
 
 const Cell = ({ data, rawData, longestASN }) => {
-  hiddenCols.includes(data.column.id) &&
-    data.setHiddenColumns(old => [...old, data.column.id]);
   const component = {
     active: <Active isActive={data.value} />,
     age: <Age inSeconds={data.value} />,