[DCJ-741] refactor dataset table into two dataset and studies table

src/components/SimpleTable.jsx

@@ -104,7 +104,7 @@ const DataRows = ({rowData, baseStyle, columnHeaders, rowWrapper = ({renderedRow
           let output;
           //columnHeaders determine width of the columns,
           //therefore extract width from columnHeader and apply to cell style
-          const columnWidthStyle = columnHeaders[cellIndex].cellStyle;
+          const columnWidthStyle = { width: columnHeaders[cellIndex].cellStyle.width };
           const appliedStyle = Object.assign({}, style, columnWidthStyle);
           //assume component is in hyperscript format
           //wrap component in dive with columnWidth applied

src/components/Tooltips.tsx

@@ -0,0 +1,36 @@
+import ReactTooltip from 'react-tooltip';
+import * as React from 'react';
+import {useEffect, useRef, useState} from 'react';
+
+// Copied from ReactTooltip Types
+type Place = 'top' | 'right' | 'bottom' | 'left';
+
+interface TooltipProps {
+  tooltipText: string;
+  children: React.ReactNode | React.ReactNode[];
+  id: string;
+  place: Place
+}
+export const OverflowTooltip = (props: TooltipProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isOverflown, setIsOverflown] = useState(false);
+  useEffect(() => {
+    const element = ref.current!;
+    setIsOverflown(element.offsetWidth < element.scrollWidth);
+  }, []);
+
+  return <>
+    <div
+      data-tip='Full details'
+      data-for={props.id}
+      ref={ref}
+      style={{overflow: 'hidden', textOverflow: 'ellipsis'}}
+    >{props.children}</div>
+    <ReactTooltip
+      place={'top'}
+      effect={'solid'}
+      disable={!isOverflown}
+      scrollHide={true}
+      id={props.id}><div style={{maxWidth: '30vw', textWrap: 'wrap'}}>{props.tooltipText}</div></ReactTooltip>
+  </>;
+};