mc-react-phonon-visualizer 0.1.0 → 0.2.2

package/src/components/ControlsPanel.tsx

@@ -1,234 +0,0 @@
-import { memo, useContext } from "react";
-import { Button, Card, Col, Form, Row } from "react-bootstrap";
-
-import ParametersContext from "./ParametersContext";
-
-import "./ControlsPanel.scss";
-
-const ControlsPanel = () => {
-  const {
-    nx,
-    setNx,
-    ny,
-    setNy,
-    nz,
-    setNz,
-    setCameraDirection,
-    showCell,
-    setShowCell,
-    amplitude,
-    setAmplitude,
-    vectorLength,
-    setVectorLength,
-    showVectors,
-    setShowVectors,
-    speed,
-    setSpeed,
-  } = useContext(ParametersContext);
-
-  const updateCellRepetitions = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const x = parseInt((event.target as HTMLFormElement).cellRepetitionX.value);
-    const y = parseInt((event.target as HTMLFormElement).cellRepetitionY.value);
-    const z = parseInt((event.target as HTMLFormElement).cellRepetitionZ.value);
-    setNx(x);
-    setNy(y);
-    setNz(z);
-  };
-
-  const updateCamera = (event: React.MouseEvent<HTMLButtonElement>) => {
-    const camera = event.currentTarget.value;
-    switch (camera) {
-      case "x":
-        setCameraDirection([1, 0, 0]);
-        break;
-      case "y":
-        setCameraDirection([0, 1, 0]);
-        break;
-      case "z":
-        setCameraDirection([0, 0, 1]);
-        break;
-      default:
-        break;
-    }
-  };
-
-  const toggleCell = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setShowCell(event.target.checked);
-  };
-
-  const handleAmplitudeTextInput = (
-    event: React.FormEvent<HTMLFormElement>
-  ) => {
-    event.preventDefault();
-    const textInput = event.currentTarget.querySelector("#amplitudeText");
-    if (!textInput) {
-      throw new Error("Text input not found");
-    }
-    const inputValue = parseFloat((textInput as HTMLInputElement).value);
-    updateAmplitude(inputValue);
-  };
-
-  const handleAmplitudeSliderInput = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    if (event.target.value === "" || isNaN(parseFloat(event.target.value))) {
-      return;
-    }
-    const inputValue = parseFloat(event.target.value);
-    updateAmplitude(inputValue);
-  };
-
-  const updateAmplitude = (inputValue: number) => {
-    const value = inputValue < 0 ? 0 : inputValue > 1 ? 1 : inputValue;
-    setAmplitude(value);
-    const range = document.getElementById("amplitudeRange") as HTMLInputElement;
-    const text = document.getElementById("amplitudeText") as HTMLInputElement;
-    if (range && text) {
-      range.value = String(value);
-      text.value = String(value);
-    }
-  };
-
-  const updateVectors = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setVectorLength(parseFloat(event.target.value));
-  };
-
-  const toggleVectors = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setShowVectors(event.target.checked);
-  };
-
-  const updateSpeed = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSpeed(parseFloat(event.target.value));
-  };
-
-  return (
-    <Card>
-      <Card.Header>Settings</Card.Header>
-      <Card.Body>
-        <Form onSubmit={updateCellRepetitions}>
-          <Form.Group as={Row} className="controls-group">
-            <Form.Label>Repetitions</Form.Label>
-            <Col xs="8" id="cellRepetitions">
-              <Form.Control
-                id="cellRepetitionX"
-                defaultValue={nx}
-                type="number"
-                min="1"
-              />
-              <Form.Control
-                id="cellRepetitionY"
-                defaultValue={ny}
-                type="number"
-                min="1"
-              />
-              <Form.Control
-                id="cellRepetitionZ"
-                defaultValue={nz}
-                type="number"
-                min="1"
-              />
-            </Col>
-            <Col>
-              <Button type="submit">
-                <i className="bi bi-repeat" />
-              </Button>
-            </Col>
-          </Form.Group>
-        </Form>
-        <Form>
-          <Form.Group as={Row} id="cameraControls" className="controls-group">
-            <Col xs="3">
-              <Form.Label>Camera</Form.Label>
-            </Col>
-            <Col>
-              <Button variant="secondary" value="x" onClick={updateCamera}>
-                X
-              </Button>
-              <Button variant="secondary" value="y" onClick={updateCamera}>
-                Y
-              </Button>
-              <Button variant="secondary" value="z" onClick={updateCamera}>
-                Z
-              </Button>
-            </Col>
-          </Form.Group>
-          <Form.Group as={Row} className="controls-group">
-            <Col xs="3">
-              <Form.Label>Cell</Form.Label>
-            </Col>
-            <Col xs="1">
-              <Form.Check
-                label="On"
-                defaultChecked={showCell}
-                onChange={toggleCell}
-              />
-            </Col>
-          </Form.Group>
-        </Form>
-        <Form id="amplitudeControls" onSubmit={handleAmplitudeTextInput}>
-          <Form.Group as={Row} className="controls-group">
-            <Form.Label>Amplitude</Form.Label>
-            <Col xs="8">
-              <Form.Range
-                id="amplitudeRange"
-                min="0"
-                max="1"
-                step="0.01"
-                defaultValue={amplitude}
-                onChange={handleAmplitudeSliderInput}
-              />
-            </Col>
-            <Col>
-              <Form.Control
-                id="amplitudeText"
-                type="number"
-                min="0.01"
-                max="1"
-                step="0.001"
-                defaultValue={amplitude}
-              />
-            </Col>
-          </Form.Group>
-        </Form>
-        <Form>
-          <Form.Group as={Row} className="controls-group">
-            <Form.Label>Vectors</Form.Label>
-            <Col xs="8">
-              <Form.Range
-                min="1"
-                max="5"
-                step="0.1"
-                defaultValue={vectorLength}
-                onChange={updateVectors}
-              />
-            </Col>
-            <Col>
-              <Form.Check
-                label="On"
-                defaultChecked={showVectors}
-                onChange={toggleVectors}
-              />
-            </Col>
-          </Form.Group>
-          <Form.Group as={Row} className="controls-group">
-            <Form.Label>Speed</Form.Label>
-            <Col xs="8">
-              <Form.Range
-                min="0.1"
-                max="1"
-                step="0.01"
-                defaultValue={speed}
-                onChange={updateSpeed}
-              />
-            </Col>
-          </Form.Group>
-        </Form>
-      </Card.Body>
-    </Card>
-  );
-};
-
-const MemoizedControlsPanel = memo(ControlsPanel);
-
-export default MemoizedControlsPanel;

package/src/components/ParametersContext.ts

@@ -1,7 +0,0 @@
-import { createContext } from "react";
-
-import useParameters from "./useParameters";
-
-const ParametersContext = createContext({} as ReturnType<typeof useParameters>);
-
-export default ParametersContext;

package/src/components/PhononVisualizer.scss

@@ -1,15 +0,0 @@
-@media (max-width: 1400px) {
-  .visualizer-panel:not(:last-child) {
-    margin-bottom: 1.5em;
-  }
-}
-
-.visualizer-panel {
-  .card {
-    height: 100%;
-  }
-
-  .card-header {
-    text-align: center;
-  }
-}

package/src/components/PhononVisualizer.tsx

@@ -1,53 +0,0 @@
-import { useCallback, useState } from "react";
-import { Col, Container, Row } from "react-bootstrap";
-
-import { PlotMouseEvent } from "plotly.js";
-
-import ParametersContext from "./ParametersContext";
-import { VisualizerProps } from "./types";
-import useParameters from "./useParameters";
-
-import MemoizedBandsView from "./BandsView";
-import CellView from "./CellView";
-import MemoizedControlsPanel from "./ControlsPanel";
-
-import "./PhononVisualizer.scss";
-
-const PhononVisualizer = ({ props }: { props: VisualizerProps }) => {
-  const parameters = useParameters(props.repetitions);
-  const [mode, setMode] = useState<number[]>([0, 0]);
-
-  const updateMode = useCallback(
-    (event: PlotMouseEvent) => {
-      const q = props.distances.indexOf(event.points[0].x as number);
-      const e = props.eigenvalues[q].indexOf(event.points[0].y as number);
-      setMode([q, e]);
-    },
-    [props]
-  );
-
-  return (
-    <ParametersContext.Provider value={parameters}>
-      <Container fluid>
-        <Row className="mb-xxl-4">
-          <Col xxl="3" className="visualizer-panel">
-            <MemoizedControlsPanel />
-          </Col>
-          <Col xxl="4" className="visualizer-panel">
-            <CellView props={props} mode={mode} />
-          </Col>
-          <Col xxl="5" className="visualizer-panel">
-            <MemoizedBandsView
-              distances={props.distances}
-              highSymPoints={props.highsym_qpts}
-              eigenvalues={props.eigenvalues}
-              updateMode={updateMode}
-            />
-          </Col>
-        </Row>
-      </Container>
-    </ParametersContext.Provider>
-  );
-};
-
-export default PhononVisualizer;

package/src/components/types.ts

@@ -1,21 +0,0 @@
-export type LatticeVector = [number, number, number];
-export type Vector = [number, number, number];
-export type HighSymPoint = [number, string];
-
-export interface VisualizerProps {
-  title: string;
-  name: string;
-  natoms: number;
-  lattice: LatticeVector[];
-  atom_types: string[];
-  atom_numbers: number[];
-  formula: string;
-  qpoints: Vector[];
-  repetitions: number[];
-  atom_pos_car: Vector[];
-  atom_pos_red: Vector[];
-  eigenvalues: number[][];
-  distances: number[];
-  highsym_qpts: HighSymPoint[];
-  vectors: number[][][][][];
-}

package/src/components/useParameters.ts

@@ -1,37 +0,0 @@
-import { useState } from "react";
-
-const useParameters = (repetitions: number[]) => {
-  const [Nx, Ny, Nz] = repetitions;
-  const [nx, setNx] = useState(Nx);
-  const [ny, setNy] = useState(Ny);
-  const [nz, setNz] = useState(Nz);
-  const [cameraDirection, setCameraDirection] = useState([0, 0, 1]);
-  const [showCell, setShowCell] = useState(true);
-  const [amplitude, setAmplitude] = useState(0.65);
-  const [vectorLength, setVectorLength] = useState(3.5);
-  const [showVectors, setShowVectors] = useState(true);
-  const [speed, setSpeed] = useState(0.25);
-
-  return {
-    nx,
-    setNx,
-    ny,
-    setNy,
-    nz,
-    setNz,
-    cameraDirection,
-    setCameraDirection,
-    showCell,
-    setShowCell,
-    amplitude,
-    setAmplitude,
-    vectorLength,
-    setVectorLength,
-    showVectors,
-    setShowVectors,
-    speed,
-    setSpeed,
-  };
-};
-
-export default useParameters;

package/src/main.scss

@@ -1,2 +0,0 @@
-@import url("bootstrap-icons/font/bootstrap-icons.css");
-@import url("bootstrap/dist/css/bootstrap.min.css");

package/src/main.tsx

@@ -1,7 +0,0 @@
-import ReactDOM from "react-dom/client";
-
-import App from "./App.tsx";
-
-import "./main.scss";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    /* Types */
-    "typeRoots": ["./node_modules/@types", "./declarations.d.ts"]
-  },
-  "include": ["src", "declarations.d.ts"]
-}

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

package/tsconfig.node.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "noEmit": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})