Skip to content

fix: Feature/ellie #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 9, 2024
Merged

fix: Feature/ellie #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5641074
added overrideReducer function to intercept useReducer hooks
garrettlchow Dec 4, 2024
db39cb3
Merge branch 'dev' into feature/ellie
elliesimens Dec 9, 2024
1efadc0
removed cartesian versus polar view due to polar view being nonfuncti…
elliesimens Dec 9, 2024
dfa5eb6
Merge branch 'dev' into feature/ellie
elliesimens Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/app/FrontendTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,12 +297,10 @@ export interface StepsObj {
}

export interface LinkControlProps {
layout: string;
orientation: string;
linkType: string;
stepPercent: number;
selectedNode: string;
setLayout: (layout: string) => void;
setOrientation: (orientation: string) => void;
setLinkType: (linkType: string) => void;
setStepPercent: (percent: number) => void;
Expand Down Expand Up @@ -333,7 +331,6 @@ export interface Node {
}

export interface LinkComponent {
layout: string;
linkType: string;
orientation: string;
}
Expand Down
54 changes: 17 additions & 37 deletions src/app/components/StateRoute/AxMap/Ax.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default function AxTree(props) {
showTooltip, // function to set tooltip state
hideTooltip, // function to close a tooltip
} = useTooltip(); // returns an object with several properties that you can use to manage the tooltip state of your component

const {
containerRef, // Access to the container's bounding box. This will be empty on first render.
TooltipInPortal, // TooltipWithBounds in a Portal, outside of your component DOM tree
Expand All @@ -75,7 +75,6 @@ export default function AxTree(props) {
pointerEvents: 'all !important',
};

const [layout, setLayout] = useState('cartesian');
const [orientation, setOrientation] = useState('horizontal');
const [linkType, setLinkType] = useState('diagonal');
const [stepPercent, setStepPercent] = useState(0.5);
Expand All @@ -87,32 +86,23 @@ export default function AxTree(props) {
let sizeWidth: number;
let sizeHeight: number;

if (layout === 'polar') {
origin = {
x: innerWidth / 2,
y: innerHeight / 2,
};
sizeWidth = 2 * Math.PI;
sizeHeight = Math.min(innerWidth, innerHeight) / 2;
origin = { x: 0, y: 0 };
if (orientation === 'vertical') {
sizeWidth = innerWidth;
sizeHeight = innerHeight;
} else {
origin = { x: 0, y: 0 };
if (orientation === 'vertical') {
sizeWidth = innerWidth;
sizeHeight = innerHeight;
} else {
sizeWidth = innerHeight;
sizeHeight = innerWidth;
}
sizeWidth = innerHeight;
sizeHeight = innerWidth;
}

const LinkComponent = getLinkComponent({ layout, linkType, orientation });
const LinkComponent = getLinkComponent({ linkType, orientation });

const currAxSnapshot = JSON.parse(JSON.stringify(axSnapshots[currLocation.index]));

// root node of currAxSnapshot
const rootAxNode = JSON.parse(JSON.stringify(currAxSnapshot[0]));

// array that holds each ax tree node with children property
// array that holds each ax tree node with children property
const nodeAxArr = [];

// populates ax nodes with children property; visx recognizes 'children' in order to properly render a nested tree
Expand Down Expand Up @@ -164,11 +154,9 @@ export default function AxTree(props) {
<div>
<div id='axControls'>
<LinkControls
layout={layout}
orientation={orientation}
linkType={linkType}
stepPercent={stepPercent}
setLayout={setLayout}
setOrientation={setOrientation}
setLinkType={setLinkType}
setStepPercent={setStepPercent}
Expand All @@ -179,17 +167,18 @@ export default function AxTree(props) {
</button>
</div>

<svg ref={containerRef} width={totalWidth + 0.2*totalWidth} height={totalHeight}>
<svg ref={containerRef} width={totalWidth + 0.2 * totalWidth} height={totalHeight}>
<LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
<LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
<rect
className='componentMapContainer'
width={sizeWidth / aspect}
height={sizeHeight / aspect + 0}
rx={14}
onClick={() => {
onClick={() => {
hideTooltip();
}}/>
}}
/>
<Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
<Tree
root={hierarchy(nodeAxArr[0], (d) => (d.isExpanded ? null : d.children))}
Expand Down Expand Up @@ -223,11 +212,7 @@ export default function AxTree(props) {
let top: number;
let left: number;

if (layout === 'polar') {
const [radialX, radialY] = pointRadial(node.x, node.y);
top = radialY;
left = radialX;
} else if (orientation === 'vertical') {
if (orientation === 'vertical') {
top = node.y;
left = node.x;
} else {
Expand Down Expand Up @@ -430,8 +415,8 @@ export default function AxTree(props) {
<div>
<div>
{/*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 */}
<strong>{JSON.stringify(tooltipData['name'].value)}</strong>
</div>
<strong>{JSON.stringify(tooltipData['name'].value)}</strong>
</div>
<div>
{/* Ax Node Info below names the tooltip title because of how its passed to the ToolTipDataDisplay container*/}
<ToolTipDataDisplay containerName='Ax Node Info' dataObj={tooltipData} />
Expand All @@ -440,12 +425,7 @@ export default function AxTree(props) {
</TooltipInPortal>
)}

<div>
{ axLegendButtonClicked ?
<AxLegend /> : ''
}
</div>

<div>{axLegendButtonClicked ? <AxLegend /> : ''}</div>
</div>
);
}
32 changes: 9 additions & 23 deletions src/app/components/StateRoute/AxMap/axLinkControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,33 @@ import React from 'react';
const controlStyles = { fontSize: 10 };

type Props = {
layout: string;
orientation: string;
linkType: string;
stepPercent: number;
setLayout: (layout: string) => void;
setOrientation: (orientation: string) => void;
setLinkType: (linkType: string) => void;
setStepPercent: (percent: number) => void;
};

export default function LinkControls({
layout,
orientation,
linkType,
stepPercent,
setLayout,
setOrientation,
setLinkType,
setStepPercent,
}: Props) {
return (
<div style={controlStyles}>
<label>layout:</label>&nbsp;
<select
onClick={(e) => e.stopPropagation()}
onChange={(e) => setLayout(e.target.value)}
value={layout}
>
<option value="cartesian">cartesian</option>
<option value="polar">polar</option>
</select>
&nbsp;&nbsp;
<label>orientation:</label>&nbsp;
<select
onClick={(e) => e.stopPropagation()}
onChange={(e) => setOrientation(e.target.value)}
value={orientation}
disabled={layout === 'polar'}
>
<option value="vertical">vertical</option>
<option value="horizontal">horizontal</option>
<option value='vertical'>vertical</option>
<option value='horizontal'>horizontal</option>
</select>
&nbsp;&nbsp;
<label>link:</label>&nbsp;
Expand All @@ -52,24 +38,24 @@ export default function LinkControls({
onChange={(e) => setLinkType(e.target.value)}
value={linkType}
>
<option value="diagonal">diagonal</option>
<option value="step">step</option>
<option value="curve">curve</option>
<option value="line">line</option>
<option value='diagonal'>diagonal</option>
<option value='step'>step</option>
<option value='curve'>curve</option>
<option value='line'>line</option>
</select>
{linkType === 'step' && layout !== 'polar' && (
{linkType === 'step' && (
<>
&nbsp;&nbsp;
<label>step:</label>&nbsp;
<input
onClick={(e) => e.stopPropagation()}
type="range"
type='range'
min={0}
max={1}
step={0.1}
onChange={(e) => setStepPercent(Number(e.target.value))}
value={stepPercent}
disabled={linkType !== 'step' || layout === 'polar'}
disabled={linkType !== 'step'}
/>
</>
)}
Expand Down
14 changes: 1 addition & 13 deletions src/app/components/StateRoute/AxMap/getAxLinkComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,15 @@ import {
} from '@visx/shape';

export default function getLinkComponent({
layout,
linkType,
orientation,
}: {
layout: string;
linkType: string;
orientation: string;
}) {
let LinkComponent;

if (layout === 'polar') {
if (linkType === 'step') {
LinkComponent = LinkRadialStep;
} else if (linkType === 'curve') {
LinkComponent = LinkRadialCurve;
} else if (linkType === 'line') {
LinkComponent = LinkRadialLine;
} else {
LinkComponent = LinkRadial;
}
} else if (orientation === 'vertical') {
if (orientation === 'vertical') {
if (linkType === 'step') {
LinkComponent = LinkVerticalStep;
} else if (linkType === 'curve') {
Expand Down
41 changes: 10 additions & 31 deletions src/app/components/StateRoute/ComponentMap/ComponentMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ export default function ComponentMap({
margin = defaultMargin,
currentSnapshot, // from 'tabs[currentTab].stateSnapshot object in 'MainContainer'
}: LinkTypesProps): JSX.Element {
const [layout, setLayout] = useState('cartesian'); // We create a local state "layout" and set it to a string 'cartesian'
const [orientation, setOrientation] = useState('vertical'); // We create a local state "orientation" and set it to a string 'vertical'.
const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'.
const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
Expand All @@ -80,33 +79,20 @@ export default function ComponentMap({

/*
We begin setting the starting position for the root node on the maps display.
The 'polar layout' sets the root node to the relative center of the display box based on the size of the browser window.
The 'cartesian layout' (else conditional) sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
The default view sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
*/

if (layout === 'polar') {
// 'polar layout' option
origin = {
x: innerWidth / 2,
y: innerHeight / 2,
};

// set the sizeWidth and sizeHeight
sizeWidth = 2 * Math.PI;
sizeHeight = Math.min(innerWidth, innerHeight) / 2;
origin = { x: 0, y: 0 };
if (orientation === 'vertical') {
sizeWidth = innerWidth;
sizeHeight = innerHeight;
} else {
// 'cartesian layout' option
origin = { x: 0, y: 0 };
if (orientation === 'vertical') {
sizeWidth = innerWidth;
sizeHeight = innerHeight;
} else {
// if the orientation isn't vertical, swap the width and the height
sizeWidth = innerHeight;
sizeHeight = innerWidth;
}
// if the orientation isn't vertical, swap the width and the height
sizeWidth = innerHeight;
sizeHeight = innerWidth;
}

//}
const {
tooltipData, // value/data that tooltip may need to render
tooltipLeft, // number used for tooltip positioning
Expand Down Expand Up @@ -268,20 +254,17 @@ export default function ComponentMap({

// controls for the map
const LinkComponent: React.ComponentType<unknown> = getLinkComponent({
layout,
linkType,
orientation,
});
return totalWidth < 10 ? null : (
<div>
<LinkControls
layout={layout}
orientation={orientation}
linkType={linkType}
stepPercent={stepPercent}
snapShots={currentSnapshot}
selectedNode={selectedNode}
setLayout={setLayout}
setOrientation={setOrientation}
setLinkType={setLinkType}
setStepPercent={setStepPercent}
Expand Down Expand Up @@ -374,11 +357,7 @@ export default function ComponentMap({
let top: number;
let left: number;

if (layout === 'polar') {
const [radialX, radialY] = pointRadial(node.x, node.y);
top = radialY;
left = radialX;
} else if (orientation === 'vertical') {
if (orientation === 'vertical') {
top = node.y;
left = node.x;
} else {
Expand Down
Loading