#110

Committed 11 Sep 2025 02:31PM UTC coverage: 77.346% (-1.2%) from 78.51%

Build # #110

Build Type

push

Committed by

Commit Message

Remove deprecated ReactDOM.findDOMNode

Signed-off-by: Michael Mior <mmior@mail.rit.edu>

Run Details

524 of 741 branches covered (70.72%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

40 existing lines in 10 files now uncovered.

1009 of 1241 relevant lines covered (81.31%)

14408.74 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

74.42

/src/MultiTable.js

// @flow
import * as React from 'react';
import Table from './Table';
import {BrowserView, MobileOnlyView, isMobileOnly} from 'react-device-detect';
import {useReactGA} from './contexts/ReactGAContext';

import './MultiTable.css';

import type {StatelessFunctionalComponent} from 'react';
import type {Data} from './modules/data';

type Props = {
  tables: {[string]: Data},
  ReactGA?: any, // For backwards compatibility with tests
  testIsMobile?: boolean,
};

const tableHiddenText = 'Show Table';
const tableShownText = 'Hide Table';

/** Displays more than one table with a dropdown to choose */
const MultiTable: StatelessFunctionalComponent<Props> = (props) => {
  const [showTableMobile, setShowTableMobile] = React.useState(false);
  const [selected, setSelected] = React.useState(Object.keys(props.tables)[0]);
  const [isMobile] = React.useState(isMobileOnly);
  const [buttonText, setButtonText] = React.useState(tableHiddenText);
  const contextReactGA = useReactGA();
  const ReactGA = props.ReactGA || contextReactGA;

  // TODO: Fix type annotation below
  const handleChange = (e: any) => {
    if (e.target !== undefined) {
      setSelected(e.target.value);
      if (ReactGA) {
        ReactGA.event({
          category: 'User Selecting A Table',
          action: e.target.value,
        });
      }
    }
  };

  function handleButtonPress(): void {
    setShowTableMobile(!showTableMobile);
    setButtonText(
      buttonText === tableShownText ? tableHiddenText : tableShownText
    );
  }

  // Render the selected table
  let table: React.Node = <div>Select a table above.</div>;
  if (isMobile) {
    if (showTableMobile) {
      const data = props.tables[selected];
      table = (
        <Table
          className="mobileTable"
          columns={data.columns}
          data={data.data}
        />
      );
    } else {
      table = <div>Select a table above.</div>;
    }

    return (
      <div className="sourceTableContainer">
        <MobileOnlyView>
          <h4>Source relations</h4>
          <select className="mobileSelect" onChange={handleChange}>
            {Object.keys(props.tables).map((tbl) => {
              return (
                <option
                  key={Object.keys(props.tables).indexOf(tbl)}
                  value={tbl}
                >
                  {' '}
                  {tbl}
                </option>
              );
            })}
          </select>

          <div className="tableDiv">
            {table}
            <button className="mobileButton" onClick={handleButtonPress}>
              {buttonText}
            </button>
          </div>
        </MobileOnlyView>
      </div>
    );
  } else if (selected) {
    const data = props.tables[selected];
    table = (
      <Table className="browserTable" columns={data.columns} data={data.data} />
    );
  }

  // Render the menu along with the table
  return (
    <div className="sourceTableContainer">
      <BrowserView>
        <h4>Source relations</h4>

        <select className="browserSelect" onChange={handleChange}>
          {Object.keys(props.tables).map((tbl) => {
            return (
              <option key={Object.keys(props.tables).indexOf(tbl)} value={tbl}>
                {tbl}
              </option>
            );
          })}
        </select>

        {table}
      </BrowserView>
    </div>
  );
};

export default MultiTable;

1	// @flow
2	import * as React from 'react';
3	import Table from './Table';
4	import {BrowserView, MobileOnlyView, isMobileOnly} from 'react-device-detect';
5	import {useReactGA} from './contexts/ReactGAContext';
6
7	import './MultiTable.css';
8
9	import type {StatelessFunctionalComponent} from 'react';
10	import type {Data} from './modules/data';
11
12	type Props = {
13	tables: {[string]: Data},
14	ReactGA?: any, // For backwards compatibility with tests
15	testIsMobile?: boolean,
16	};
17
18	const tableHiddenText = 'Show Table';	2✔
19	const tableShownText = 'Hide Table';	2✔
20
21	/** Displays more than one table with a dropdown to choose */
22	const MultiTable: StatelessFunctionalComponent<Props> = (props) => {	2✔
23	const [showTableMobile, setShowTableMobile] = React.useState(false);	3✔
24	const [selected, setSelected] = React.useState(Object.keys(props.tables)[0]);	3✔
25	const [isMobile] = React.useState(isMobileOnly);	3✔
26	const [buttonText, setButtonText] = React.useState(tableHiddenText);	3✔
27	const contextReactGA = useReactGA();	3✔
28	const ReactGA = props.ReactGA \|\| contextReactGA;	3!
29
30	// TODO: Fix type annotation below
31	const handleChange = (e: any) => {	3✔
32	if (e.target !== undefined) {	1!
33	setSelected(e.target.value);	1✔
34	if (ReactGA) {	1!
35	ReactGA.event({	1✔
36	category: 'User Selecting A Table',
37	action: e.target.value,
38	});
39	}
40	}
41	};
42
43	function handleButtonPress(): void {
UNCOV 44	setShowTableMobile(!showTableMobile);	×
UNCOV 45	setButtonText(	×
46	buttonText === tableShownText ? tableHiddenText : tableShownText	×
47	);
48	}
49
50	// Render the selected table
51	let table: React.Node = <div>Select a table above.</div>;	3✔
52	if (isMobile) {	3✔
53	if (showTableMobile) {	1!
UNCOV 54	const data = props.tables[selected];	×
UNCOV 55	table = (	×
56	<Table
57	className="mobileTable"
58	columns={data.columns}
59	data={data.data}
60	/>
61	);
62	} else {
63	table = <div>Select a table above.</div>;	1✔
64	}
65
66	return (	1✔
67	<div className="sourceTableContainer">
68	<MobileOnlyView>
69	<h4>Source relations</h4>
70	<select className="mobileSelect" onChange={handleChange}>
71	{Object.keys(props.tables).map((tbl) => {
72	return (	3✔
73	<option
74	key={Object.keys(props.tables).indexOf(tbl)}
75	value={tbl}
76	>
77	{' '}
78	{tbl}
79	</option>
80	);
81	})}
82	</select>
83
84	<div className="tableDiv">
85	{table}
86	<button className="mobileButton" onClick={handleButtonPress}>
87	{buttonText}
88	</button>
89	</div>
90	</MobileOnlyView>
91	</div>
92	);
93	} else if (selected) {	2!
94	const data = props.tables[selected];	2✔
95	table = (	2✔
96	<Table className="browserTable" columns={data.columns} data={data.data} />
97	);
98	}
99
100	// Render the menu along with the table
101	return (	2✔
102	<div className="sourceTableContainer">
103	<BrowserView>
104	<h4>Source relations</h4>
105
106	<select className="browserSelect" onChange={handleChange}>
107	{Object.keys(props.tables).map((tbl) => {
108	return (	6✔
109	<option key={Object.keys(props.tables).indexOf(tbl)} value={tbl}>
110	{tbl}
111	</option>
112	);
113	})}
114	</select>
115
116	{table}
117	</BrowserView>
118	</div>
119	);
120	};
121
122	export default MultiTable;

dataunitylab / relational-playground / #110

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous