From 752d7ce94e59e97d5c412474169e372817d0060d Mon Sep 17 00:00:00 2001 From: Alex Nguyen Date: Sat, 4 Dec 2021 11:00:07 -0800 Subject: [PATCH 1/5] Apply ESLint & Prettier on `src/` --- src/App.test.tsx | 16 +- src/App.tsx | 9 +- src/apiResponses.ts | 70 ++-- src/appState.ts | 11 +- src/components/LatticeView.tsx | 339 +++++++++++--------- src/components/Loader.tsx | 16 +- src/index.tsx | 22 +- src/pages/BaseTemplate.tsx | 185 ++++++----- src/pages/LatticeViewPage.tsx | 8 +- src/pages/UploadCircuitPage.tsx | 545 +++++++++++++++++--------------- src/reportWebVitals.ts | 24 +- src/setupTests.ts | 2 +- src/slices.ts | 14 +- 13 files changed, 706 insertions(+), 555 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 85df195..a468ef7 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,10 +1,10 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; +import React from "react" +import { render, screen } from "@testing-library/react" +import App from "./App" // TODO this needs to be populated with real tests -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); +test("renders learn react link", () => { + render() + const linkElement = screen.getByText(/learn react/i) + expect(linkElement).toBeInTheDocument() +}) diff --git a/src/App.tsx b/src/App.tsx index ea8c33c..f4c6f2c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import React from "react" -import BaseTemplate from "./pages/BaseTemplate"; +import BaseTemplate from "./pages/BaseTemplate" +const App = () => -const App = () => ; - -export default App; +export default App diff --git a/src/apiResponses.ts b/src/apiResponses.ts index a793bbd..e6cea8f 100644 --- a/src/apiResponses.ts +++ b/src/apiResponses.ts @@ -1,51 +1,57 @@ -import {Slices} from "./slices"; +import { Slices } from "./slices" // Different classes representing possible Api Response outcomes class JsonParseError { - msg: string - constructor(msg : string) { - this.msg = msg - } + msg: string + constructor(msg: string) { + this.msg = msg + } } class ApiHttpError { - code: number - msg: string - headers: string - constructor(code: number, msg : string, headers: string) { - this.code = code - this.msg = msg - this.headers = headers - } + code: number + msg: string + headers: string + constructor(code: number, msg: string, headers: string) { + this.code = code + this.msg = msg + this.headers = headers + } } class CompilerError { - msg: string - errortype: string - constructor(msg: string, errortype: string){ - this.msg = msg - this.errortype = errortype; - } + msg: string + errortype: string + constructor(msg: string, errortype: string) { + this.msg = msg + this.errortype = errortype + } } class CompilationResultSuccess { - slices: Slices - compilation_text: string - constructor(slices : Slices, compilation_text : string) { - this.slices = slices - this.compilation_text = compilation_text - } + slices: Slices + compilation_text: string + constructor(slices: Slices, compilation_text: string) { + this.slices = slices + this.compilation_text = compilation_text + } } class NoServerResponse { - response: string - constructor(response: string) { - this.response = response - } + response: string + constructor(response: string) { + this.response = response + } } -type ApiResponse = null | JsonParseError | ApiHttpError | CompilationResultSuccess | CompilerError | NoServerResponse; +type ApiResponse = + | null + | JsonParseError + | ApiHttpError + | CompilationResultSuccess + | CompilerError + | NoServerResponse -export type {ApiResponse} +export type { ApiResponse } -export {JsonParseError,ApiHttpError,CompilationResultSuccess,NoServerResponse,CompilerError} \ No newline at end of file +export { JsonParseError, ApiHttpError, CompilationResultSuccess, NoServerResponse, CompilerError } diff --git a/src/appState.ts b/src/appState.ts index 91e131c..2cb6155 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -1,16 +1,15 @@ -import React from "react"; -import {ApiResponse} from "./apiResponses"; +import React from "react" +import { ApiResponse } from "./apiResponses" class AppState { - compilationIsLoading : boolean = false + compilationIsLoading: boolean = false apiResponse: ApiResponse = null } interface AppStateProps { - appState : AppState; - setAppState : React.Dispatch + appState: AppState + setAppState: React.Dispatch } export { AppState } export type { AppStateProps } - diff --git a/src/components/LatticeView.tsx b/src/components/LatticeView.tsx index bf7f146..2362fef 100644 --- a/src/components/LatticeView.tsx +++ b/src/components/LatticeView.tsx @@ -1,225 +1,272 @@ /** @jsxImportSource @emotion/react */ -import React, { useRef } from 'react' -import {useState} from 'react'; -import {CompilationResult, Slice, VisualArrayCell} from "../slices"; -import {PatchType,Orientation,EdgeType,ActivityType} from "../slices"; +import React, { useRef } from "react" +import { useState } from "react" +import { CompilationResult, Slice, VisualArrayCell } from "../slices" +import { PatchType, Orientation, EdgeType, ActivityType } from "../slices" // import CompilationSwitch from "./CompilationSwitch" -import {css} from "@emotion/react"; +import { css } from "@emotion/react" type StylesMapType = { - [key in (Orientation | PatchType | EdgeType)]: string; + [key in Orientation | PatchType | EdgeType]: string } const styles_map: StylesMapType = { - [PatchType.Qubit] : "darkkhaki", - [PatchType.DistillationQubit] : "orchid", - [PatchType.Ancilla] : "aquamarine", - [Orientation.Top] : "top", - [Orientation.Bottom] : "bottom", - [Orientation.Left] : "left", - [Orientation.Right] : "right", - [EdgeType.Solid] : "solid", - [EdgeType.SolidStiched] : "solid", - [EdgeType.Dashed] : "dotted", - [EdgeType.DashedStiched] : "dotted", - [EdgeType.AncillaJoin] : "solid" + [PatchType.Qubit]: "darkkhaki", + [PatchType.DistillationQubit]: "orchid", + [PatchType.Ancilla]: "aquamarine", + [Orientation.Top]: "top", + [Orientation.Bottom]: "bottom", + [Orientation.Left]: "left", + [Orientation.Right]: "right", + [EdgeType.Solid]: "solid", + [EdgeType.SolidStiched]: "solid", + [EdgeType.Dashed]: "dotted", + [EdgeType.DashedStiched]: "dotted", + [EdgeType.AncillaJoin]: "solid", } type StylesMapEdgeColorType = { - [key in (EdgeType)]: string + [key in EdgeType]: string } -const styles_map_edge_color : StylesMapEdgeColorType = { - [EdgeType.Solid] : "black", - [EdgeType.SolidStiched] : "#37beff", - [EdgeType.Dashed] : "black", - [EdgeType.DashedStiched] : "#37beff", - [EdgeType.AncillaJoin] : "aquamarine", +const styles_map_edge_color: StylesMapEdgeColorType = { + [EdgeType.Solid]: "black", + [EdgeType.SolidStiched]: "#37beff", + [EdgeType.Dashed]: "black", + [EdgeType.DashedStiched]: "#37beff", + [EdgeType.AncillaJoin]: "aquamarine", } type StylesMapActivityColorType = { - [key in (ActivityType)]: string + [key in ActivityType]: string } const styles_map_activity_color: StylesMapActivityColorType = { - [ActivityType.Unitary] : "#00baff", - [ActivityType.Measurement] : "#ff0000", + [ActivityType.Unitary]: "#00baff", + [ActivityType.Measurement]: "#ff0000", } - - -const cellFontSize = (cell : VisualArrayCell) => - cell.text.length > 20 - ? "14" - : cell.text.length > 7 ? "18" : "30" +const cellFontSize = (cell: VisualArrayCell) => + cell.text.length > 20 ? "14" : cell.text.length > 7 ? "18" : "30" type CellViewerProps = { cell: VisualArrayCell row_idx: number col_idx: number } -const CellViewer = ({cell, row_idx, col_idx}: CellViewerProps) => { - - return
{ + return ( +
{ - - const orientation = orientation_string as Orientation; - const edge_type = cell.edges[orientation] as EdgeType; - - return `border-${styles_map[orientation]}-style: ${styles_map[edge_type]}; + + ${cell !== null && cell.patch_type === PatchType.Ancilla + ? "border-color: white" + : "border-color: transparent"}; + + ${cell !== null && + `background-color: ${styles_map[cell.patch_type]}; + ${Object.keys(cell.edges) + .map((orientation_string: string) => { + const orientation = orientation_string as Orientation + const edge_type = cell.edges[orientation] as EdgeType + + return `border-${styles_map[orientation]}-style: ${styles_map[edge_type]}; border-${styles_map[orientation]}-color: ${styles_map_edge_color[edge_type]}; ` - }).join('\n')}; - ${ + }) + .join("\n")}; + ${ cell.activity !== null && - `background-image: radial-gradient(${styles_map_activity_color[cell.activity.activity_type]} 7%, transparent 90%) + `background-image: radial-gradient(${ + styles_map_activity_color[cell.activity.activity_type] + } 7%, transparent 90%) ` - }` - } - - `}> - - - ({col_idx},{row_idx}) - -
- - {cell?.text && -

- - {cell.text} - -

- } - -
+ }`} + `} + > + + ({col_idx},{row_idx}) + +
+ + {cell?.text && ( +

+ + {cell.text} + +

+ )} + +
+ ) } - type SliceViewerProps = { slice: Slice } -const SliceViewer = ({slice} : SliceViewerProps) => +const SliceViewer = ({ slice }: SliceViewerProps) => (
- {slice.map((row, row_idx) => + {slice.map((row, row_idx) => (
- {row.map((cell, col_idx) => + {row.map((cell, col_idx) => (
- +
- )} + ))}
- )} + ))}
- +) type LatticeViewProps = { - compilationResult : CompilationResult + compilationResult: CompilationResult } -const LatticeView = ({compilationResult} : LatticeViewProps) => { - const [selectedSliceNumber, setSelectedSliceNumber] = React.useState(0); +const LatticeView = ({ compilationResult }: LatticeViewProps) => { + const [selectedSliceNumber, setSelectedSliceNumber] = React.useState(0) const changeSlice = (delta: number) => { - setSelectedSliceNumber(selectedSliceNumber+delta) + setSelectedSliceNumber(selectedSliceNumber + delta) scrollToLattice() } - const {compilation_text, slices} = compilationResult + const { compilation_text, slices } = compilationResult const slices_len = slices.length // JS object that returns boolean when "previous" or "next" buttons need to be disabled const disable = { - "prev": selectedSliceNumber===0, - "next": selectedSliceNumber===slices_len-1 + prev: selectedSliceNumber === 0, + next: selectedSliceNumber === slices_len - 1, } // scroll into Lattice View Section, one time, after compilation is completed - const latticeSection = useRef(null); + const latticeSection = useRef(null) React.useEffect(() => { - latticeSection.current && latticeSection!.current!.scrollIntoView(); - },[]) + latticeSection.current && latticeSection!.current!.scrollIntoView() + }, []) // scroll into Lattice View, after slice navigation buttons pressed - const latticeSlices= useRef(null); + const latticeSlices = useRef(null) const scrollToLattice = () => { - latticeSlices.current && latticeSlices!.current!.scrollIntoView(); + latticeSlices.current && latticeSlices!.current!.scrollIntoView() } // set state of checkbox switch - const [showCompilationText, setCompilationText] = useState(false); - const handleChange = () => { - setCompilationText(!showCompilationText); - }; - - return
-

Lattice Viewer

-
- -
-
- - + const [showCompilationText, setCompilationText] = useState(false) + const handleChange = () => { + setCompilationText(!showCompilationText) + } + + return ( +
+

+ {" "} + Lattice Viewer{" "} +

+
+ +
+
+ + +
-
-
-
- {showCompilationText ? -
- 
{compilation_text}
-
: null - } +
+
+ {showCompilationText ? ( +
+ 
{compilation_text}
+
+ ) : null} +
-
- {/* Updated Toolbar */} -
-
-
-
Select Time Slice
-
Slice {selectedSliceNumber+1} / {slices_len}
- {/*
*/} -
-
- + {/* Updated Toolbar */} +
+
+
+
Select Time Slice
+
+ Slice {selectedSliceNumber + 1} / {slices_len}
-
- + {/*
*/} +
+
+ +
+
+ +
-
+
- - -
+
+ +
- -
- -
- -
- - + ) +} -
-}; - - - -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..94228dd 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) => -{ +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"); + if ($(window).width() > 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