diff --git a/demo-app-next/next-env.d.ts b/demo-app-next/next-env.d.ts index 4f11a03dc..a4a7b3f5c 100644 --- a/demo-app-next/next-env.d.ts +++ b/demo-app-next/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. diff --git a/demo-app-next/tsconfig.json b/demo-app-next/tsconfig.json index 093985aaf..1203d7cb2 100644 --- a/demo-app-next/tsconfig.json +++ b/demo-app-next/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": false, @@ -12,8 +16,15 @@ "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "preserve" + "jsx": "preserve", + "target": "ES2017" }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx" + ], + "exclude": [ + "node_modules" + ] } diff --git a/src/app/FrontendTypes.ts b/src/app/FrontendTypes.ts index feacb9c53..f949a49b7 100644 --- a/src/app/FrontendTypes.ts +++ b/src/app/FrontendTypes.ts @@ -108,12 +108,12 @@ export interface ActionContainerProps { actionView: boolean; setActionView: React.Dispatch>; toggleActionContainer: () => void; - snapshots: any - currLocation: any + snapshots: any; + currLocation: any; } export interface ProvConContainerProps { -currentSnapshot: any; + currentSnapshot: any; } export interface StateContainerProps { @@ -399,4 +399,22 @@ export interface AxContainer { }; snapshots: []; currLocation: object; -} \ No newline at end of file +} + +export interface FilteredNode { + name?: string; + state?: any; + hooksState?: any; + props?: any; + componentData?: { + context?: any; + hooksState?: any; + props?: any; + }; + children?: FilteredNode[]; + context?: any; +} + +export interface FilteredNodeChildren { + [key: string]: FilteredNode; +} diff --git a/src/app/components/Actions/DropDown.tsx b/src/app/components/Actions/DropDown.tsx index a7698b0bf..fa7e38e75 100644 --- a/src/app/components/Actions/DropDown.tsx +++ b/src/app/components/Actions/DropDown.tsx @@ -13,8 +13,8 @@ const DropDown = ({ }; const options = [ - { value: 'TimeJump', label: 'TimeJump' }, - { value: 'Provider/Consumer', label: 'Provider/Consumer' }, + { value: 'Time Jump', label: 'Time Jump' }, + { value: 'Providers / Consumers', label: 'Providers / Consumers' }, ]; return ( diff --git a/src/app/components/StateRoute/AxMap/Ax.tsx b/src/app/components/StateRoute/AxMap/Ax.tsx index 64a8054aa..4c0385b61 100644 --- a/src/app/components/StateRoute/AxMap/Ax.tsx +++ b/src/app/components/StateRoute/AxMap/Ax.tsx @@ -62,14 +62,15 @@ export default function AxTree(props) { const tooltipStyles: ToolTipStyles = { ...defaultStyles, minWidth: 60, - maxWidth: 300, - backgroundColor: 'rgb(15,15,15)', - color: 'white', - fontSize: '16px', + maxWidth: 250, + maxHeight: '300px', lineHeight: '18px', - fontFamily: 'Roboto', - zIndex: 100, pointerEvents: 'all !important', + margin: 0, + padding: 0, + borderRadius: '8px', + overflowY: 'auto', + overflowX: 'auto', }; const [orientation, setOrientation] = useState('horizontal'); @@ -148,7 +149,7 @@ export default function AxTree(props) { return totalWidth < 10 ? null : (
-
+
-
- {/*tooltipData['name'].value cannot be referred to using dot notation so using brackets here overrides typescript's strict data typing which was interfering with accessiccing this property */} - {JSON.stringify(tooltipData['name'].value)} +
+

{tooltipData['name'].value}

{/* Ax Node Info below names the tooltip title because of how its passed to the ToolTipDataDisplay container*/} diff --git a/src/app/components/StateRoute/AxMap/AxContainer.tsx b/src/app/components/StateRoute/AxMap/AxContainer.tsx index 12e2ca801..719d57645 100644 --- a/src/app/components/StateRoute/AxMap/AxContainer.tsx +++ b/src/app/components/StateRoute/AxMap/AxContainer.tsx @@ -37,5 +37,3 @@ const AxContainer = (props: AxContainer) => { }; export default AxContainer; - - diff --git a/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx b/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx index bf8f9cfd4..5580e7636 100644 --- a/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx +++ b/src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx @@ -67,7 +67,7 @@ const ToolTipDataDisplay = ({ containerName, dataObj }) => { } return ( -
+
({ className: `tooltipData-JSONTree` }) }} // theme set to a base16 theme that has been extended to include "className: 'json-tree'" diff --git a/src/app/components/StateRoute/AxMap/axLinkControls.tsx b/src/app/components/StateRoute/AxMap/axLinkControls.tsx index 2ea658138..04347a693 100644 --- a/src/app/components/StateRoute/AxMap/axLinkControls.tsx +++ b/src/app/components/StateRoute/AxMap/axLinkControls.tsx @@ -40,7 +40,7 @@ const AxLinkControls = ({ {linkType === 'step' && (
- + e.stopPropagation()} type='range' diff --git a/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx b/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx index b82748d22..1436468d3 100644 --- a/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx +++ b/src/app/components/StateRoute/ComponentMap/ComponentMap.tsx @@ -117,26 +117,13 @@ export default function ComponentMap({ ...defaultStyles, minWidth: 60, maxWidth: 250, + maxHeight: '300px', lineHeight: '18px', pointerEvents: 'all !important', margin: 0, padding: 0, borderRadius: '8px', - }; - - const scrollStyle: {} = { - minWidth: '60', - maxWidth: '250', - minHeight: '20px', - maxHeight: '200px', - overflowY: 'scroll', - overflowWrap: 'break-word', - }; - - const formatRenderTime: string = (time: number): string => { - if (!time) return 'No time information'; - const renderTime = time.toFixed(3); - return `${renderTime} ms `; + overflowY: 'auto', }; const nodeList: [] = []; // create a nodeList array to store our nodes as a flat array @@ -477,6 +464,7 @@ export default function ComponentMap({ return ( + // Replace the root node rect rendering block with this: {node.depth === 0 && ( { + if (hasDisplayableData(node.data)) { + if (toolTipTimeoutID.current !== null) { + clearTimeout(toolTipTimeoutID.current); + hideTooltip(); + } + toolTipTimeoutID.current = null; + handleMouseAndClickOver(event, node.data); + } + }} + onMouseLeave={() => { + if (hasDisplayableData(node.data)) { + toolTipTimeoutID.current = setTimeout(() => { + hideTooltip(); + toolTipTimeoutID.current = null; + }, 300); + } + }} /> )} - {/* This creates the rectangle boxes for each component and sets it relative position to other parent nodes of the same level. */} {node.depth !== 0 && ( @@ -526,7 +531,6 @@ export default function ComponentMap({ }} /> )} - {/* Display text inside of each component node */} { if (isReducer && parsedContent) { // Only try to format if we have valid content const formattedData = formatReducerData(parsedContent); - console.log('formatted data', formattedData); // Check if we have any formatted data to display if (Object.keys(formattedData).length === 0) { - console.log('formatted data length', Object.keys(formattedData).length); return null; } diff --git a/src/app/components/StateRoute/StateRoute.tsx b/src/app/components/StateRoute/StateRoute.tsx index f01dda45a..c6911e79d 100644 --- a/src/app/components/StateRoute/StateRoute.tsx +++ b/src/app/components/StateRoute/StateRoute.tsx @@ -17,22 +17,18 @@ import WebMetricsContainer from './WebMetrics/WebMetricsContainer'; import { MainState, RootState, StateRouteProps } from '../../FrontendTypes'; import AxContainer from './AxMap/AxContainer'; -/* - Loads the appropriate StateRoute view and renders the Map, Performance, History, Webmetrics, and Tree navbar buttons after clicking on the 'State' button located near the top rightmost corner. -*/ - const History = require('./History').default; -const NO_STATE_MSG = 'No state change detected. Trigger an event to change state'; // message to be returned if there has been no state change detected in our hooked/target app +const NO_STATE_MSG = 'No state change detected. Trigger an event to change state'; const StateRoute = (props: StateRouteProps) => { const { - axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer' - snapshot, // from 'tabs[currentTab]' object in 'MainContainer' - hierarchy: propsHierarchy, // from 'tabs[currentTab]' object in 'MainContainer' - snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer' - viewIndex: propsViewIndex, // from 'tabs[currentTab]' object in 'MainContainer' - webMetrics, // from 'tabs[currentTab]' object in 'MainContainer' - currLocation, // from 'tabs[currentTab]' object in 'MainContainer' + axSnapshots, + snapshot, + hierarchy: propsHierarchy, + snapshots, + viewIndex: propsViewIndex, + webMetrics, + currLocation, } = props; const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main); @@ -40,27 +36,17 @@ const StateRoute = (props: StateRouteProps) => { const hierarchy = propsHierarchy || tabsHierarchy; const viewIndex = propsViewIndex || tabsViewIndex; - // lines 45 - 63 contains functionality to disable the accessibility features in Reactime. const dispatch = useDispatch(); const [showTree, setShowTree] = useState(false); - const [selectedValue, setSelectedValue] = useState('disable'); const [showParagraph, setShowParagraph] = useState(true); const enableAxTreeButton = () => { dispatch(toggleAxTree('toggleAxRecord')); dispatch(setCurrentTabInApp('AxTree')); - setSelectedValue('enable'); setShowParagraph(false); setShowTree(true); }; - const disableAxTree = () => { - dispatch(toggleAxTree('toggleAxRecord')); - setSelectedValue('disable'); - setShowParagraph(true); - setShowTree(false); - }; - return (
@@ -128,39 +114,12 @@ const StateRoute = (props: StateRouteProps) => { element={ showTree ? (
-
- { - enableAxTreeButton(); - }} - /> - - - { - disableAxTree(); - }} - /> - -
- {showTree && ( - - )} +
) : (
@@ -180,24 +139,9 @@ const StateRoute = (props: StateRouteProps) => { id='enable' name='accessibility' value='enable' - checked={selectedValue === 'enable'} - onChange={() => { - enableAxTreeButton(); - }} + onChange={enableAxTreeButton} /> - - { - disableAxTree(); - }} - /> -
) diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx index 6187156d8..e1892f537 100644 --- a/src/app/containers/ActionContainer.tsx +++ b/src/app/containers/ActionContainer.tsx @@ -17,7 +17,7 @@ import RecordButton from '../components/Actions/RecordButton'; // resetSlider locates the rc-slider elements on the document and resets it's style attributes function ActionContainer(props: ActionContainerProps): JSX.Element { - const [dropdownSelection, setDropdownSelection] = useState('TimeJump'); + const [dropdownSelection, setDropdownSelection] = useState('Time Jump'); const actionsEndRef = useRef(null as unknown as HTMLDivElement); const dispatch = useDispatch(); @@ -210,10 +210,10 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
- {dropdownSelection === 'Provider/Consumer' && ( + {dropdownSelection === 'Providers / Consumers' && ( )} - {dropdownSelection === 'TimeJump' && + {dropdownSelection === 'Time Jump' && Object.keys(routes).map((route, i) => ( ))} diff --git a/src/app/containers/ButtonsContainer.tsx b/src/app/containers/ButtonsContainer.tsx index fd0993a6b..9af8f1ea8 100644 --- a/src/app/containers/ButtonsContainer.tsx +++ b/src/app/containers/ButtonsContainer.tsx @@ -175,18 +175,6 @@ function ButtonsContainer(): JSX.Element { > Cancel - {!connectionStatus && ( - - )}