Small fixes (#341)
This commit is contained in:
parent
931b1a0eae
commit
e132eafcb0
|
@ -30,9 +30,9 @@
|
|||
"@craco/craco": "^6.4.3",
|
||||
"@speedy-tuner/eslint-config": "^0.1.3",
|
||||
"@types/d3": "^7.0.0",
|
||||
"@types/node": "^17.0.2",
|
||||
"@types/node": "^17.0.4",
|
||||
"@types/pako": "^1.0.2",
|
||||
"@types/react": "^17.0.37",
|
||||
"@types/react": "^17.0.38",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/react-redux": "^7.1.20",
|
||||
"@types/react-router-dom": "^5.3.2",
|
||||
|
@ -3757,9 +3757,9 @@
|
|||
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz",
|
||||
"integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA=="
|
||||
"version": "17.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.4.tgz",
|
||||
"integrity": "sha512-6xwbrW4JJiJLgF+zNypN5wr2ykM9/jHcL7rQ8fZe2vuftggjzZeRSM4OwRc6Xk8qWjwJ99qVHo/JgOGmomWRog=="
|
||||
},
|
||||
"node_modules/@types/normalize-package-data": {
|
||||
"version": "2.4.1",
|
||||
|
@ -3793,9 +3793,9 @@
|
|||
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "17.0.37",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
|
||||
"integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==",
|
||||
"version": "17.0.38",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
|
||||
"integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
|
@ -26026,9 +26026,9 @@
|
|||
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz",
|
||||
"integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA=="
|
||||
"version": "17.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.4.tgz",
|
||||
"integrity": "sha512-6xwbrW4JJiJLgF+zNypN5wr2ykM9/jHcL7rQ8fZe2vuftggjzZeRSM4OwRc6Xk8qWjwJ99qVHo/JgOGmomWRog=="
|
||||
},
|
||||
"@types/normalize-package-data": {
|
||||
"version": "2.4.1",
|
||||
|
@ -26062,9 +26062,9 @@
|
|||
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "17.0.37",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
|
||||
"integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==",
|
||||
"version": "17.0.38",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
|
||||
"integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
|
|
|
@ -51,9 +51,9 @@
|
|||
"@craco/craco": "^6.4.3",
|
||||
"@speedy-tuner/eslint-config": "^0.1.3",
|
||||
"@types/d3": "^7.0.0",
|
||||
"@types/node": "^17.0.2",
|
||||
"@types/node": "^17.0.4",
|
||||
"@types/pako": "^1.0.2",
|
||||
"@types/react": "^17.0.37",
|
||||
"@types/react": "^17.0.38",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/react-redux": "^7.1.20",
|
||||
"@types/react-router-dom": "^5.3.2",
|
||||
|
|
|
@ -55,6 +55,10 @@ const mapStateToProps = (state: AppState) => ({
|
|||
loadedLogs: state.logs,
|
||||
});
|
||||
|
||||
const margin = 30;
|
||||
const sidebarWidth = 250;
|
||||
const minCanvasHeightInner = 600;
|
||||
|
||||
const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLogs: Logs }) => {
|
||||
const { lg } = useBreakpoint();
|
||||
const { Sider } = Layout;
|
||||
|
@ -64,15 +68,15 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa
|
|||
const [edgeLocation, setEdgeLocation] = useState(edgeUnknown);
|
||||
const [fetchError, setFetchError] = useState<Error>();
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const margin = 30;
|
||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||
const [canvasHeight, setCanvasHeight] = useState(0);
|
||||
const sidebarWidth = 250;
|
||||
const calculateCanvasSize = useCallback(() => {
|
||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
||||
|
||||
if (window.innerHeight > 600) {
|
||||
if (window.innerHeight > minCanvasHeightInner) {
|
||||
setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
|
||||
} else {
|
||||
setCanvasHeight(minCanvasHeightInner / 2);
|
||||
}
|
||||
}, []);
|
||||
const siderProps = {
|
||||
|
|
|
@ -86,6 +86,7 @@ const mapStateToProps = (state: AppState) => ({
|
|||
const containerStyle = {
|
||||
padding: 20,
|
||||
maxWidth: 1400,
|
||||
width: '100%',
|
||||
margin: '0 auto',
|
||||
};
|
||||
|
||||
|
@ -114,9 +115,9 @@ const Dialog = ({
|
|||
const { storageSet } = useStorage();
|
||||
const { findConstantOnPage } = useConfig(config);
|
||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const calculateCanvasWidth = useCallback(() => {
|
||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - 20);
|
||||
setCanvasWidth((containerRef.current?.clientWidth || 0) - 20);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -217,7 +218,7 @@ const Dialog = ({
|
|||
if (!dialogConfig) {
|
||||
if (curveConfig) {
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<div ref={containerRef} style={containerStyle}>
|
||||
<Divider>{curveConfig.title}</Divider>
|
||||
{renderCurve(curveConfig)}
|
||||
</div>
|
||||
|
@ -226,7 +227,7 @@ const Dialog = ({
|
|||
|
||||
if (tableConfig) {
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<div ref={containerRef} style={containerStyle}>
|
||||
{renderHelp(tableConfig.help)}
|
||||
<Divider>{tableConfig.title}</Divider>
|
||||
{renderTable(tableConfig)}
|
||||
|
@ -426,7 +427,7 @@ const Dialog = ({
|
|||
});
|
||||
|
||||
return (
|
||||
<div ref={contentRef} style={containerStyle}>
|
||||
<div ref={containerRef} style={containerStyle}>
|
||||
{renderHelp(dialogConfig?.help)}
|
||||
<Form
|
||||
labelCol={{ span: 10 }}
|
||||
|
|
|
@ -57,6 +57,10 @@ const mapStateToProps = (state: AppState) => ({
|
|||
loadedLogs: state.logs,
|
||||
});
|
||||
|
||||
const margin = 30;
|
||||
const sidebarWidth = 250;
|
||||
const minCanvasHeightInner = 600;
|
||||
|
||||
const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLogs: Logs }) => {
|
||||
const { lg } = useBreakpoint();
|
||||
const { Sider } = Layout;
|
||||
|
@ -69,15 +73,15 @@ const Log = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loadedLo
|
|||
const [step, setStep] = useState(0);
|
||||
const [edgeLocation, setEdgeLocation] = useState(edgeUnknown);
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const margin = 30;
|
||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||
const [canvasHeight, setCanvasHeight] = useState(0);
|
||||
const sidebarWidth = 250;
|
||||
const calculateCanvasSize = useCallback(() => {
|
||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
||||
|
||||
if (window.innerHeight > 600) {
|
||||
if (window.innerHeight > minCanvasHeightInner) {
|
||||
setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
|
||||
} else {
|
||||
setCanvasHeight(minCanvasHeightInner / 2);
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
|
Loading…
Reference in New Issue