Test types (#231)

* Formatting changes, update imports, other minor changes * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix tests * initial commit * fix not drawing * Add label for plot mode selection * add github action to test frontend * downgrade eslint until a fix is released * add pre-commit hook for linting frontend * fix makefile? * pre-commit ci doesn't seem to like using make target * pre-commit ci will take more effort. github action will suffice for now * Add type testing for frontend * fix modelview type errors * fix modelview type errors * fix some DataView possibly undefineds * docstring for dataview interp * need matplotlib for testing * TODO: Stack docstring is incomplete * cleanup prettier config, add lint check for backend * only one issue left (in refl1d, bumps still has plenty) * Pin typescript to 5.6.3 until vue-tsc fix releases * add svg-loader * update imports, ModelData now extends Plotly.PlotData * interface modeldata extends plotly plot data * modeldata is a type again * install bumps-webview-client before running test:types * remove sourcemap from build script * update bumps to 1.0.0a11 * test bumps@fix-libraries-package-lookup * Ok, bumps should be at a12 when it releases * empty commit to re-trigger pipeline * update some deps * update ruff precommit version * fix reference in simple builder --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Brian Benjamin Maranville <[email protected]>
reflectometry · Jan 24, 2025 · 3b8c34e · 3b8c34e
1 parent c05a0e4
commit 3b8c34e
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 104 deletions.
diff --git a/.github/workflows/test-webview-client.yaml b/.github/workflows/test-webview-client.yaml
@@ -56,20 +56,35 @@ jobs:
         run: bun run test:lint
 
   # test that app has no typescript errors
-#   test-types:
-#     runs-on: ubuntu-latest
-#     steps:
-#       - name: Checkout code
-#         uses: actions/checkout@v4
+  test-types:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-#       - name: Set up Bun
-#         uses: oven-sh/setup-bun@v2
+      - name: Checkout bumps source
+        uses: actions/checkout@v4
+        with:
+          repository: bumps/bumps
+          sparse-checkout: 'bumps/webview/client'
+          path: bumps
 
-#       - name: Install packages
-#         run: bun install
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
 
-#       - name: Run test
-#         run: bun run test:types
+      - name: Install packages
+        run: bun install
+
+      - name: Use bumps code from source
+        run: |
+          cd ../../../bumps/bumps/webview/client
+          bun install
+          bun link
+          cd ../../../../refl1d/webview/client
+          bun link bumps-webview-client
+
+      - name: Run test
+        run: bun run test:types
 
   # run unit tests
 #   test-unit:

diff --git a/Makefile b/Makefile
@@ -30,13 +30,30 @@ test: ## Run pytest and doc tests
 	pytest -v
 	python check_examples.py --chisq
 
+#######################
+### Dev environment ###
+#######################
+
+.PHONY: dev-backend
+dev-backend: ## Start the backend server in headless mode
+	refl1d-webview --port 8080 --headless
+
+.PHONY: dev-frontend
+dev-frontend: ## Start the frontend server in development mode
+	cd refl1d/webview/client && \
+		$(FE_CMD) run dev
+
 ##############################
 ### Linting and formatting ###
 ##############################
 
 .PHONY: lint
 lint: lint-backend lint-frontend ## Run all linters
 
+.PHONY: lint-backend-check
+lint-backend-check: ## Run ruff linting on python code
+	@ruff check bumps/ run.py test.py check_*.py
+
 .PHONY: lint-backend
 lint-backend: ## Run ruff linting on python code
 	@ruff check --fix refl1d/ tests/ setup.py

diff --git a/README.rst b/README.rst
@@ -1,7 +1,7 @@
 Refl1D
 ======
 
-Refl1D is a program for analyzing 1D reflectometry measurements made with
+Refl1D is a program for analyzing 1-D reflectometry measurements made with
 X-ray and neutron beamlines.  The 1-D models give the depth profile for
 material scattering density composed of a mixture of flat and continuously
 varying freeform layers. With polarized neutron measurements, scientists

diff --git a/pyproject.toml b/pyproject.toml
@@ -33,6 +33,7 @@ dependencies = [
 
 [project.optional-dependencies]
 dev = [
+    "matplotlib", # for testing
     "pre-commit",
     "pydantic",
     "pytest",

diff --git a/refl1d/sample/layers.py b/refl1d/sample/layers.py
@@ -224,6 +224,7 @@ def __repr__(self):
 
 @dataclass(init=False)
 class Stack(Layer):
+    # TODO: Finish this docstring
     """
     Reflectometry layer stack
 

diff --git a/refl1d/webview/client/eslint.config.js b/refl1d/webview/client/eslint.config.js
@@ -1,10 +1,10 @@
+import url from "url";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import pluginVue from "eslint-plugin-vue";
 import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
 import prettierConfig from "@vue/eslint-config-prettier";
 import vueTsEslintConfig from "@vue/eslint-config-typescript";
-import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
-import pluginVue from "eslint-plugin-vue";
-import url from "url";
 
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 const compat = new FlatCompat({
@@ -35,6 +35,10 @@ export default [
       "prefer-const": 0,
       "@typescript-eslint/ban-ts-comment": ["error", { "ts-ignore": "allow-with-description" }],
       "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-expressions": [
+        "error",
+        { allowShortCircuit: true, allowTernary: true }, // Temporary fix for indirect dependency @typescript-eslint <= 8.15.0
+      ],
       "prettier/prettier": [
         "warn",
         {},

diff --git a/refl1d/webview/client/package.json b/refl1d/webview/client/package.json
@@ -14,37 +14,39 @@
     "preview": "vite preview --port 4173",
     "format": "prettier --write src",
     "lint": "eslint src --fix",
-    "test:lint": "eslint src"
+    "test:lint": "eslint src",
+    "test:types": "vue-tsc --noEmit --skipLibCheck -p tsconfig.json --composite false"
   },
   "dependencies": {
     "bootstrap": "^5.3.3",
     "bumps-webview-client": "^0.1.20",
     "comlink": "^4.4.2",
     "json-difference": "^1.16.1",
-    "plotly.js": "^2.35.2",
+    "plotly.js": "^2.35.3",
     "socket.io-client": "^4.8.1",
-    "uuid": "^11.0.3",
+    "uuid": "^11.0.5",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
-    "@types/plotly.js": "^2.35.0",
+    "@tsconfig/node22": "22.0.0",
+    "@types/plotly.js": "^2.35.1",
     "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
     "@vue/eslint-config-prettier": "10.1.0",
-    "@vue/eslint-config-typescript": "^14.1.3",
-    "eslint": "9.14.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@vue/eslint-config-typescript": "^14.2.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vite-svg-loader": "5.1.0",
+    "vue-tsc": "^2.2.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.31.0",
+    "eslint-plugin-vue": "^9.32.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-jsdoc": "^1.3.0",
-    "vite": "^5.4.11",
-    "vite-svg-loader": "^5.1.0"
-  },
-  "trustedDependencies": [
-    "es5-ext"
-  ]
+    "prettier-plugin-jsdoc": "^1.3.2",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1"
+  }
 }
diff --git a/refl1d/webview/client/prettier.config.js b/refl1d/webview/client/prettier.config.js
@@ -1,43 +1,24 @@
 /**
- * @see https://prettier.io/docs/en/configuration.html
  * @type {import("prettier").Config}
+ * @see https://prettier.io/docs/en/configuration.html
  */
 
-// module.exports ={
-//   "plugins": [ 
-//     "@ianvs/prettier-plugin-sort-imports",
-//     "./node_modules/prettier-plugin-jsdoc/dist/index.js",
-//     "prettier-plugin-css-order"
-//   ],
-//   "importOrder": ["^vue", "^[a-zA-Z]", "^@[a-zA-Z]", "^@/", "^./", "^../"],
-//   "cssDeclarationSorterOrder": "smacss",
-//   "jsdocCapitalizeDescription": false,
-//   "overrides": [
-//     {
-//       "files": "*.svg",
-//       "options": {
-//         "parser": "html"
-//       }
-//     }
-//   ]
-// }
-
 const config = {
-  "plugins": [ 
+  plugins: [
     "@ianvs/prettier-plugin-sort-imports",
     "./node_modules/prettier-plugin-jsdoc/dist/index.js",
-    "prettier-plugin-css-order"
+    "prettier-plugin-css-order",
   ],
-  "importOrder": ["^vue", "^[a-zA-Z]", "^@[a-zA-Z]", "^@/", "^./", "^../"],
-  "cssDeclarationSorterOrder": "smacss",
-  "jsdocCapitalizeDescription": false,
-  "overrides": [
+  importOrder: ["^vue", "^[a-zA-Z]", "^@[a-zA-Z]", "^@/", "^./", "^../"],
+  cssDeclarationSorterOrder: "smacss",
+  jsdocCapitalizeDescription: false,
+  overrides: [
     {
-      "files": "*.svg",
-      "options": {
-        "parser": "html"
-      }
-    }
+      files: "*.svg",
+      options: {
+        parser: "html",
+      },
+    },
   ],
   experimentalTernaries: true,
   printWidth: 120,

diff --git a/refl1d/webview/client/src/components/DataView.vue b/refl1d/webview/client/src/components/DataView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /// <reference types="@types/plotly.js" />
 import { ref, shallowRef } from "vue";
-import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket.ts";
+import type { AsyncSocket } from "bumps-webview-client/src/asyncSocket";
 import { configWithSVGDownloadButton } from "bumps-webview-client/src/plotly_extras";
 import { setupDrawLoop } from "bumps-webview-client/src/setupDrawLoop";
 import * as Plotly from "plotly.js/lib/core";
@@ -10,7 +10,7 @@ import { COLORS } from "../colors";
 // const title = "Reflectivity";
 const plot_div = ref<HTMLDivElement | null>(null);
 const plot_offset = ref(0);
-const plot_data = shallowRef<Partial<Plotly.PlotData>>({});
+const plot_data = shallowRef<ModelData[][]>([]);
 const chisq_str = ref("");
 
 const log_y = ref(true);
@@ -85,7 +85,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               const dR = lin_y ? xs.dR : xs.dR.map((t) => t * local_offset);
               data_trace.error_y = { type: "data", array: dR, visible: true };
               if (calculate_residuals) {
-                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR[i]);
+                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR![i]);
                 const residuals_trace: Trace = {
                   x: xs.Q,
                   y: residuals,
@@ -145,7 +145,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               const dR_offset = lin_y ? dR : dR.map((t) => t * local_offset);
               data_trace.error_y = { type: "data", array: dR_offset, visible: true };
               if (calculate_residuals) {
-                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR[i]);
+                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR![i]);
                 const residuals_trace: Trace = {
                   x: xs.Q,
                   y: residuals,
@@ -210,7 +210,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               const offset_dR = dR.map((t) => t * local_offset);
               data_trace.error_y = { type: "data", array: offset_dR, visible: true };
               if (calculate_residuals) {
-                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR[i]);
+                const residuals = xs.R.map((r, i) => (r - xs.theory[i]) / xs.dR![i]);
                 const residuals_trace: Trace = {
                   x: xs.Q,
                   y: residuals,
@@ -256,7 +256,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
           if (pp.R !== undefined && mm.R !== undefined) {
             const Rm = interp(pp.Q, mm.Q, mm.R);
             const SA = Rm.map((m, i) => {
-              const p = pp.R[i];
+              const p = pp.R![i];
               return (p - m) / (p + m);
             });
             const SA_offset = SA.map((v) => v + local_offset);
@@ -277,7 +277,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
               const dRm = interp(pp.Q, mm.Q, mm.dR);
               const dSA = dRm.map((dm, i) => {
                 // const dp = pp.dR[i];
-                const p = pp.R[i];
+                const p = pp.R![i];
                 const m = Rm[i];
                 return Math.sqrt((4 * ((p * dm) ** 2 + (m * dm) ** 2)) / (p + m) ** 4);
               });
@@ -314,7 +314,7 @@ function generate_new_traces(model_data: ModelData[][], view: ReflectivityPlot,
 
 async function fetch_and_draw() {
   const payload = (await props.socket.asyncEmit("get_plot_data", "linear")) as {
-    plotdata: Partial<Plotly.PlotData>;
+    plotdata: ModelData[][];
     chisq: string;
   };
   plot_data.value = payload.plotdata;
@@ -380,7 +380,7 @@ async function draw_plot() {
   };
 
   if (show_residuals.value) {
-    layout.yaxis.domain = [0.4, 1];
+    layout.yaxis!.domain = [0.4, 1];
     // layout.yaxis.anchor = 'x';
     layout.yaxis2 = {
       domain: [0, 0.25],
@@ -390,8 +390,8 @@ async function draw_plot() {
   }
 
   if (reflectivity_type.value === "Spin Asymmetry") {
-    layout.yaxis.range = [-1.5, 1.5];
-    layout.yaxis.autorange = false;
+    layout.yaxis!.range = [-1.5, 1.5];
+    layout.yaxis!.autorange = false;
   }
 
   const config: Partial<Plotly.Config> = {
@@ -404,6 +404,14 @@ async function draw_plot() {
   await Plotly.react(plot_div.value as HTMLDivElement, [...theory_traces, ...data_traces], layout, config);
 }
 
+/**
+ * Performs linear interpolation of the values in fp at the points in xp to the points in x.
+ *
+ * @param x: the points at which to interpolate
+ * @param xp: the points at which the function is known
+ * @param fp: the values of the function at the points in xp
+ * @returns the interpolated y values at the points in x
+ */
 function interp(x: number[], xp: number[], fp: number[]): number[] {
   // assume x and xp are sorted, monotonically increasing
   if (xp.length != fp.length) {
@@ -428,7 +436,7 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
   }
 
   return x.map((xv) => {
-    while (xv >= upper_xp.value && !upper_xp.done) {
+    while (xv >= upper_xp.value! && !upper_xp.done) {
       lower_xp = upper_xp;
       lower_fp = upper_fp;
       upper_xp = xpv.next();
@@ -442,7 +450,8 @@ function interp(x: number[], xp: number[], fp: number[]): number[] {
     } else {
       // xv < upper_xp.value
       return (
-        ((upper_fp.value - lower_fp.value) / (upper_xp.value - lower_xp.value)) * (xv - lower_xp.value) + lower_fp.value
+        ((upper_fp.value! - lower_fp.value!) / (upper_xp.value - lower_xp.value!)) * (xv - lower_xp.value!) +
+        lower_fp.value!
       );
     }
   });