continue typescript & chakra v1 migrations [skip ci]

hyperglass/ui/components/Card/body.tsx

@@ -11,7 +11,7 @@ export const CardBody = (props: ICardBody) => {
     <Flex
       bg={bg}
       w="100%"
-      maxW="100%"
+      maxW="95%"
       rounded="md"
       color={color}
       onClick={onClick}

hyperglass/ui/components/Table/main.tsx

@@ -15,7 +15,13 @@ import { TableSelectShow } from './pageSelect';
 import type { TableOptions, PluginHook, Row } from 'react-table';
 import type { TTable } from './types';
 
-const ChevronUp = dynamic<MeronexIcon>(() => import('@meronex/icons/fa').then(i => i.FaChevronUp));
+const ChevronRight = dynamic<MeronexIcon>(() =>
+  import('@meronex/icons/fa').then(i => i.FaChevronRight),
+);
+
+const ChevronLeft = dynamic<MeronexIcon>(() =>
+  import('@meronex/icons/fa').then(i => i.FaChevronLeft),
+);
 
 const ChevronDown = dynamic<MeronexIcon>(() =>
   import('@meronex/icons/fa').then(i => i.FaChevronDown),
@@ -105,7 +111,7 @@ export function Table(props: TTable) {
                       <Icon as={ChevronDown} boxSize={4} ml={1} />
                     </If>
                     <If c={!column.isSortedDesc}>
-                      <Icon as={ChevronUp} boxSize={4} ml={1} />
+                      <Icon as={ChevronRight} boxSize={4} ml={1} />
                     </If>
                   </If>
                   <If c={!column.isSorted}>{''}</If>
@@ -147,13 +153,13 @@ export function Table(props: TTable) {
             mr={2}
             onClick={() => gotoPage(0)}
             isDisabled={!canPreviousPage}
-            icon={<Icon as={DoubleChevronLeft} boxSize={3} />}
+            icon={<Icon as={DoubleChevronLeft} boxSize={4} />}
           />
           <TableIconButton
             mr={2}
             onClick={() => previousPage()}
             isDisabled={!canPreviousPage}
-            icon={<Icon as={DoubleChevronLeft} boxSize={6} />}
+            icon={<Icon as={ChevronLeft} boxSize={3} />}
           />
         </Flex>
         <Flex justifyContent="center" alignItems="center">
@@ -177,12 +183,12 @@ export function Table(props: TTable) {
             ml={2}
             onClick={nextPage}
             isDisabled={!canNextPage}
-            icon={<Icon as={ChevronUp} boxSize={6} />}
+            icon={<Icon as={ChevronRight} boxSize={3} />}
           />
           <TableIconButton
             ml={2}
             isDisabled={!canNextPage}
-            icon={<Icon as={DoubleChevronRight} boxSize={3} />}
+            icon={<Icon as={DoubleChevronRight} boxSize={4} />}
             onClick={() => gotoPage(pageCount ? pageCount - 1 : 1)}
           />
         </Flex>

hyperglass/ui/components/Table/row.tsx

@@ -23,7 +23,6 @@ export const TableRow = (props: TTableRow) => {
     { borderTop: '1px', borderTopColor: 'whiteAlpha.100' },
   );
   let bg;
-  const color = useOpposingColor(bgStripe);
 
   if (highlight) {
     bg = `${highlightBg}.${alpha}`;
@@ -31,14 +30,15 @@ export const TableRow = (props: TTableRow) => {
   } else if (doStripe && index % 2 !== 0) {
     bg = bgStripe;
   }
-
+  const defaultBg = useColorValue('white', 'black');
+  const color = useOpposingColor(bg ?? defaultBg);
   const borderProps = doHorizontalBorders && index !== 0 ? rowBorder : {};
 
   return (
     <Box
       as="tr"
       bg={bg}
-      color={highlight ? color : undefined}
+      css={{ '& > td': { color } }}
       fontWeight={highlight ? 'bold' : undefined}
       _hover={{
         cursor: 'pointer',

hyperglass/ui/components/output/cell.tsx

@@ -5,10 +5,6 @@ import type { TCell } from './types';
 export const Cell = (props: TCell) => {
   const { data, rawData } = props;
   const cellId = data.column.id as keyof TRoute;
-  console.group(cellId);
-  console.dir(data);
-  console.dir(rawData);
-  console.groupEnd();
   const component = {
     med: <MonoField v={data.value} />,
     age: <Age inSeconds={data.value} />,

hyperglass/ui/components/output/fields.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { Icon, Text, Box, Tooltip, Menu, MenuButton, MenuList } from '@chakra-ui/react';
 import { CgMoreO as More } from '@meronex/icons/cg';
 import { BisError as Warning } from '@meronex/icons/bi';
@@ -9,6 +10,7 @@ import relativeTimePlugin from 'dayjs/plugin/relativeTime';
 import utcPlugin from 'dayjs/plugin/utc';
 import { useConfig, useColorValue } from '~/context';
 import { If } from '~/components';
+import { useOpposingColor } from '~/hooks';
 
 import type {
   TAge,
@@ -76,8 +78,10 @@ export const Weight = (props: TWeight) => {
 export const ASPath = (props: TASPath) => {
   const { path, active } = props;
   const color = useColorValue(
+    // light: inactive, active
     ['blackAlpha.500', 'blackAlpha.500'],
-    ['blackAlpha.500', 'whiteAlpha.300'],
+    // dark: inactive, active
+    ['whiteAlpha.600', 'blackAlpha.700'],
   );
 
   if (path.length === 0) {
@@ -88,7 +92,10 @@ export const ASPath = (props: TASPath) => {
 
   path.map((asn, i) => {
     const asnStr = String(asn);
-    i !== 0 && paths.push(<Icon as={ChevronRight} key={`separator-${i}`} color={color[+active]} />);
+    i !== 0 &&
+      paths.push(
+        <Icon as={ChevronRight} key={`separator-${i}`} color={color[+active]} boxSize={5} px={2} />,
+      );
     paths.push(
       <Text fontSize="sm" as="span" whiteSpace="pre" fontFamily="mono" key={`as-${asnStr}-${i}`}>
         {asnStr}
@@ -130,10 +137,10 @@ export const Communities = (props: TCommunities) => {
   );
 };
 
-export const RPKIState = (props: TRPKIState) => {
+export const RPKIState = forwardRef<HTMLDivElement, TRPKIState>((props, ref) => {
   const { state, active } = props;
   const { web } = useConfig();
-  const color = useColorValue(
+  const bg = useColorValue(
     [
       ['red.400', 'green.500', 'yellow.400', 'gray.500'],
       ['red.500', 'green.500', 'yellow.500', 'gray.600'],
@@ -143,6 +150,7 @@ export const RPKIState = (props: TRPKIState) => {
       ['red.500', 'green.600', 'yellow.500', 'gray.800'],
     ],
   );
+  const color = useOpposingColor(bg[+active][state]);
   const icon = [NotAllowed, Check, Warning, Question];
 
   const text = [
@@ -153,8 +161,15 @@ export const RPKIState = (props: TRPKIState) => {
   ];
 
   return (
-    <Tooltip hasArrow placement="right" label={text[state] ?? text[3]}>
-      <Box as={icon[state]} color={color[+active][state]} />
+    <Tooltip
+      hasArrow
+      placement="right"
+      label={text[state] ?? text[3]}
+      bg={bg[+active][state]}
+      color={color}>
+      <Box ref={ref} boxSize={5}>
+        <Box as={icon[state]} color={bg[+active][state]} />
+      </Box>
     </Tooltip>
   );
-};
+});

hyperglass/ui/components/output/table.tsx

@@ -32,7 +32,7 @@ export const BGPTable = (props: TBGPTable) => {
   const columns = makeColumns(parsed_data_fields);
 
   return (
-    <Flex my={8} maxW={['100%', '100%', '100%', '100%']} w="100%" {...rest}>
+    <Flex my={8} justify="center" maxW={['100%', '100%', '100%', '100%']} w="100%" {...rest}>
       <Table
         columns={columns}
         data={data.routes}

hyperglass/ui/components/results/header.tsx

@@ -3,7 +3,7 @@ import { AccordionIcon, Box, Spinner, HStack, Text, Tooltip } from '@chakra-ui/r
 import { BisError as Warning } from '@meronex/icons/bi';
 import { FaCheckCircle as Check } from '@meronex/icons/fa';
 import { useConfig, useColorValue } from '~/context';
-import { useStrf } from '~/hooks';
+import { useOpposingColor, useStrf } from '~/hooks';
 
 import type { TResultHeader } from './types';
 
@@ -26,6 +26,8 @@ export const ResultHeader = (props: TResultHeader) => {
   const text = useStrf(web.text.complete_time, { seconds: runtime }, [runtime]);
   const label = useMemo(() => runtimeText(runtime, text), [runtime]);
 
+  const color = useOpposingColor(isError ? warning : defaultStatus);
+
   return (
     <HStack alignItems="center" w="100%">
       <Tooltip
@@ -33,17 +35,20 @@ export const ResultHeader = (props: TResultHeader) => {
         placement="top"
         isDisabled={loading}
         label={isError ? errorMsg : label}
-        colorScheme={isError ? errorLevel : 'success'}>
-        {loading ? (
-          <Spinner size="sm" mr={4} color={status} />
-        ) : (
-          <Box
-            as={isError ? Warning : Check}
-            color={isError ? warning : defaultStatus}
-            mr={4}
-            boxSize={6}
-          />
-        )}
+        bg={isError ? warning : defaultStatus}
+        color={color}>
+        <Box boxSize={6}>
+          {loading ? (
+            <Spinner size="sm" mr={4} color={status} />
+          ) : (
+            <Box
+              as={isError ? Warning : Check}
+              color={isError ? warning : defaultStatus}
+              mr={4}
+              boxSize="100%"
+            />
+          )}
+        </Box>
       </Tooltip>
 
       <Text fontSize="lg">{title}</Text>

hyperglass/ui/components/results/individual.tsx

@@ -191,20 +191,22 @@ export const Result = forwardRef<HTMLDivElement, TResult>((props, ref) => {
 
           '-ms-overflow-style': { display: 'none' },
         }}>
-        <Flex direction="column" flexWrap="wrap">
+        <Box>
           <Flex direction="column" flex="1 0 auto" maxW={error ? '100%' : undefined}>
             {!isError && typeof data !== 'undefined' && (
               <>
-                {isStructuredOutput(data) && tableComponent ? (
+                {isStructuredOutput(data) && data.level === 'success' && tableComponent ? (
                   <BGPTable>{data.output}</BGPTable>
-                ) : isStringOutput(data) && !tableComponent ? (
+                ) : isStringOutput(data) && data.level === 'success' && !tableComponent ? (
                   <TextOutput>{data.output}</TextOutput>
+                ) : isStringOutput(data) && data.level !== 'success' ? (
+                  <FormattedError message={data.output} keywords={errorKeywords} />
                 ) : null}
               </>
             )}
             {isError && <Alert rounded="lg" my={2} py={4} status={errorLevel}></Alert>}
           </Flex>
-        </Flex>
+        </Box>
 
         <Flex direction="row" flexWrap="wrap">
           <Flex

hyperglass/ui/hooks/useOpposingColor.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useToken } from '@chakra-ui/react';
 import { getColor, isLight } from '@chakra-ui/theme-tools';
 import { useTheme } from '~/context';
@@ -20,16 +20,15 @@ export function useIsDark(color: string) {
 }
 
 export function useOpposingColor(color: string, options?: TOpposingOptions): string {
-  const [opposingColor, setOpposingColor] = useState<string>('inherit');
   const isBlack = useIsDark(color);
 
-  const dark = useToken('colors', options?.dark ?? 'original.dark');
-  const light = useToken('colors', options?.light ?? 'original.light');
-
-  isBlack && opposingColor !== dark && setOpposingColor(dark);
-  !isBlack && opposingColor !== light && setOpposingColor(light);
-
-  return opposingColor;
+  return useMemo(() => {
+    if (isBlack) {
+      return options?.dark ?? 'black';
+    } else {
+      return options?.light ?? 'white';
+    }
+  }, [color]);
 }
 
 export function useOpposingToken(color: string, options?: TOpposingOptions): string {
@@ -40,5 +39,5 @@ export function useOpposingToken(color: string, options?: TOpposingOptions): str
 
   isBlack && opposingColor !== dark && setOpposingColor(dark);
   !isBlack && opposingColor !== light && setOpposingColor(light);
-  return opposingColor;
+  return useMemo(() => opposingColor, [color]);
 }