-
Select Time Slice
-
Slice {selectedSliceNumber+1} / {slices_len}
- {/*
*/}
-
-
-
+ {/* Updated Toolbar */}
+
+
+
+
-
-
-
-
-
-
-
-
+ )
+}
-
-};
-
-
-
-export default LatticeView;
+export default LatticeView
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index af85879..291e333 100644
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -1,27 +1,27 @@
-import { Roller } from 'react-css-spinners'
+import { Roller } from "react-css-spinners"
import PropTypes from "prop-types"
type LoaderProps = {
- color: string,
- size: number,
+ color: string
+ size: number
// className: string
}
const Loader = ({ size = 70, color = "#00a105" }: LoaderProps) => {
return (
- /* Pass props like color and size (more in demo) */
-
+ /* Pass props like color and size (more in demo) */
+
)
}
Loader.defaultProps = {
color: "#00a105",
- size: 70
+ size: 70,
}
Loader.propTypes = {
color: PropTypes.string,
size: PropTypes.number,
className: PropTypes.string,
- };
+}
-export default Loader;
\ No newline at end of file
+export default Loader
diff --git a/src/index.tsx b/src/index.tsx
index ef2edf8..875caca 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react"
+import ReactDOM from "react-dom"
+import "./index.css"
+import App from "./App"
+import reportWebVitals from "./reportWebVitals"
ReactDOM.render(
-
-
- ,
- document.getElementById('root')
-);
+
+
+ ,
+ document.getElementById("root")
+)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()
diff --git a/src/pages/BaseTemplate.tsx b/src/pages/BaseTemplate.tsx
index 5f88c9e..2e13c8f 100644
--- a/src/pages/BaseTemplate.tsx
+++ b/src/pages/BaseTemplate.tsx
@@ -1,98 +1,139 @@
/** @jsxImportSource @emotion/react */
-import React, {useEffect} from 'react'
-import $ from 'jquery'
-import './BaseTemplate.css'
-import './LatticeViewPage.css'
-import {css} from '@emotion/react';
-import UploadCircuitPage from "./UploadCircuitPage";
+import React, { useEffect } from "react"
+import $ from "jquery"
+import "./BaseTemplate.css"
+import "./LatticeViewPage.css"
+import { css } from "@emotion/react"
+import UploadCircuitPage from "./UploadCircuitPage"
-import {AppState} from "../appState";
+import { AppState } from "../appState"
-const anchor_position_shift = (window: Window) =>
-{
- // @ts-ignore
- if ($(window).width() > 991)
- {
- const anchor_elements = $(".anchor-mob");
- anchor_elements.toggleClass("anchor-mob anchor-pc");
- } else
- {
- const anchor_elements = $(".anchor-pc");
+const anchor_position_shift = (window: Window) => {
+ const windowWidth = $(window).width() ?? 1000 // Default width
+ if (windowWidth > 991) {
+ const anchor_elements = $(".anchor-mob")
+ anchor_elements.toggleClass("anchor-mob anchor-pc")
+ } else {
+ const anchor_elements = $(".anchor-pc")
anchor_elements.toggleClass("anchor-pc anchor-mob")
}
-};
+}
-const BaseTemplate = () =>
-{
+const BaseTemplate = () => {
// This section handles the state of the web application, either in circuit upload or in lattice view.
// TODO handle with Redux
- const [appState , setAppState] = React.useState( new AppState() )
+ const [appState, setAppState] = React.useState(new AppState())
// Script that runs after render (like adding to a $(document).read() in