Merge pull request #22 from tldr-group/cleanup

merge Cleanup onto Dev

Author: rmdocherty

.github/workflows/tests.yaml

@@ -0,0 +1,40 @@
+# This workflow will install Python dependencies, run tests and lint with a single version of Python
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-python
+
+name: Python application
+
+on:
+  push:
+    branches: [ "cleanup" ]
+  pull_request:
+    branches: [ "main",  ]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Set up Python 3.10
+      uses: actions/setup-python@v3
+      with:
+        python-version: "3.10"
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install -r requirements.txt
+        pip install -e .
+    # commented out for now until refactoring of experiments done
+    #- name: Lint with flake8
+    #  run: |
+    #    # stop the build if there are Python syntax errors or undefined names
+    #    flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
+    #    # exit-zero treats all errors as warnings. The GitHub editor is 127 chars wide
+    #    flake8 . --count --exit-zero --max-complexity=15 --max-line-length=127 --statistics --ignore=E203
+    - name: Test with unittest
+      run: |
+        python tests/tests.py

.gitignore

@@ -11,7 +11,13 @@ fig2 copy.py
 *.pdf
 *.png
 *.npy
+
 .vscode
 frontend/node_modules
 frontend/dist
-*.kra
+*.kra
+deploy*/
+deploy.sh
+deploy.zip
+
+tests/tmp.py

MANIFEST.in

@@ -0,0 +1,7 @@
+include requirements.txt
+include LICENSE
+include README.md
+
+recursive-exclude * __pycache__
+recursive-exclude * *.py[co]
+recursive-exclude * *old*

README.md

@@ -0,0 +1,16 @@
+# Representativity
+
+You take a micrograph of a material. You segment it, and measure the phase fractions. How sure are you that the phase fraction of the whole material is close to your measurements? 
+
+```
+pip install -e .
+```
+
+
+Questions:
+- Website name (isitrepresentative.com) (howrepresentativeismysample.com)
+- model err problem
+- refactoring
+- cls for squares
+- update readme/example notebook
+- licnece: todo

frontend/package.json

@@ -3,7 +3,7 @@
   "version": "0.5.0",
   "license": "MIT",
   "scripts": {
-    "build": "yarn run clean-dist && webpack --config=configs/webpack/prod.js && mv dist/*.wasm dist/js",
+    "build": "yarn run clean-dist && webpack --config=configs/webpack/prod.js",
     "clean-dist": "rimraf dist/*",
     "lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
     "start": "yarn run start-dev",
@@ -52,7 +52,7 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "bootstrap": "^5.2.3",
+    "bootstrap": "5.2.3",
     "pako": "^2.1.0",
     "react": "18.2.0",
     "react-bootstrap": "2.7.4",

frontend/src/App.tsx

@@ -1,27 +1,47 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import AppContext, { ImageLoadInfo, AnalysisInfo } from "./components/interfaces";
+import AppContext, { ImageLoadInfo, AnalysisInfo, IR_LIMIT_PX } from "./components/interfaces";
 
 import Topbar from "./components/Topbar";
 import DragDrop from "./components/DragDrop";
 import PreviewCanvas from "./components/Canvas";
-import Menu from "./components/Modals";
+import NormalSlider from "./components/NormalSlider";
+import { Menu } from "./components/Menu";
+import { ErrorMessage, CLSModal, MoreInfo } from "./components/Popups"
 
 import { loadFromTIFF, loadFromImage } from "./components/imageLogic";
 
 import "./assets/scss/App.scss";
 import 'bootstrap/dist/css/bootstrap.min.css';
 
+//const PATH = "http://127.0.0.1:5000";
+const PATH = "https://samba-segment.azurewebsites.net";
+//const PATH = "http://localhost:7071/api";
+//const PATH = "https://representative.azurewebsites.net/api"
+const PF_ENDPOINT = PATH + "/phasefraction"
+//const PF_ENDPOINT = "https://representativity.azurewebsites.net/phasefraction"
+
+//const REPR_ENDPOINT = PATH + "/repr";
+const REPR_ENDPOINT = PATH + "/repr";
+
 const MAX_FILE_SIZE_BYTES = 1024 * 1024 * 500; // 500MB
 
 const App = () => {
     const {
         imageInfo: [imageInfo, setImageInfo],
         previewImg: [previewImg, setPreviewImg],
+        selectedPhase: [selectedPhase, setSelectedPhase],
+        selectedConf: [selectedConf, setSelectedConf],
+        errVF: [errVF, setErrVF],
         targetL: [targetL, setTargetL],
+        pfB: [, setPfB],
+        accurateFractions: [accurateFractions, setAccurateFractions],
         analysisInfo: [, setAnalysisInfo],
         menuState: [menuState, setMenuState],
+        errorState: [errorState, setErrorState],
+        showWarning: [showWarning, setShowWarning],
     } = useContext(AppContext)!
 
+
     const appLoadFile = async (file: File) => {
         const reader = new FileReader();
         const extension = file.name.split('.').pop()?.toLowerCase();
@@ -34,14 +54,14 @@ const App = () => {
         } else if (isPNGJPG) {
             reader.readAsDataURL(file);
         } else {
-            console.log(`Unsupported file format .${extension}`);
+            setErrorState({ msg: `Unsupported file format .${extension}`, stackTrace: "" })
             return;
         };
 
         reader.onload = async () => {
             let result: ImageLoadInfo | null = null;
             if (file.size > MAX_FILE_SIZE_BYTES) {
-                console.log(`File .${file.size / (1000 * 1000)}MB greater than max size (500MB)`);
+                setErrorState({ msg: `File too large!`, stackTrace: `File .${file.size / (1000 * 1000)}MB greater than max size (500MB)` })
                 return;
             }
 
@@ -53,40 +73,125 @@ const App = () => {
             };
             console.log(result);
 
-            if (result?.segmented == false) {
-                console.log('error: unsegmented');
+            if (result == null) {
+                setErrorState({
+                    msg: "Failed to load data",
+                    stackTrace: ""
+                });
+                return;
+            }
+
+            if (result.segmented == false) {
+                setErrorState({
+                    msg: "Data is unsegmented - try using our web segmentation tool, SAMBA (https://www.sambasegment.com/)",
+                    stackTrace: "Number of unique values > 6"
+                });
+                return;
             } else {
-                result!.file = file;
+                if (result.height < 200 || result.width < 200 || (result.depth < 200 && result.depth > 1)) {
+                    setShowWarning("size");
+                }
+
+                requestPhaseFraction(file);
+                result.file = file;
                 setImageInfo(result);
-                setPreviewImg(result!.previewImg);
+                setPreviewImg(result.previewImg);
                 setMenuState('phase');
             }
         };
     }
 
-    useEffect(() => { // TODO: fetch from API instead
-        if (menuState === 'processing') {
-            setMenuState('conf_result');
-            setTargetL(4 * imageInfo?.width!);
+    const requestPhaseFraction = async (file: File) => {
+        try {
+            const formData = new FormData();
+            formData.append('userFile', file);
+            //formData.append('phaseVal', String(selectedPhaseValue));
+            const resp = await fetch(PF_ENDPOINT, { method: 'POST', body: formData });
+            const obj = await resp.json();
+            const fractions = obj["phase_fractions"] as { [val: number]: number };
+            setAccurateFractions(fractions);
+        } catch (e) {
+            const error = e as Error;
+            setErrorState({ msg: "Couldn't fetch phase fractions: data wrong or server down.", stackTrace: error.toString() });
+        }
+    }
+
+    const requestRepr = async () => {
+        try {
+            const info = imageInfo!
+
+            const formData = new FormData();
+            formData.append('userFile', info.file!);
+            formData.append('selected_phase', String(info.phaseVals[selectedPhase - 1]));
+            formData.append('selected_conf', String(selectedConf));
+            formData.append('selected_err', String(errVF));
+
+            const resp = await fetch(REPR_ENDPOINT, { method: 'POST', body: formData });
+            const obj = await resp.json();
+
+            const absErr: number = obj["abs_err"]
+
+            console.log(obj)
+
+            setMenuState('conf_result_full');
             setAnalysisInfo({
-                integralRange: 1,
+                integralRange: obj["cls"],
                 z: 1,
-                percentageErr: 5,
-                absError: 5 * 0.45,
-                lForDefaultErr: 4 * imageInfo?.width!,
-                vf: 0.45
+                stdModel: obj["std_model"],
+                percentageErr: obj["percent_err"],
+                absError: absErr,
+                lForDefaultErr: obj["l"],
+                vf: 1,
+                pf: obj['pf_1d'],
+                cumSumSum: obj["cum_sum_sum"]
             })
+
+            const vals = imageInfo?.phaseVals!
+            const phaseFrac = accurateFractions![vals[selectedPhase - 1]]
+            setPfB([phaseFrac - absErr, phaseFrac + absErr])
+
+            if (obj["cls"] > IR_LIMIT_PX) { setShowWarning("cls") }
+            const minSide = Math.min(imageInfo?.width!, imageInfo?.height!)
+            if (obj["l"] < minSide) { setShowWarning("over") }
+
+            setTargetL(obj["l"]);
+        } catch (e) {
+            const error = e as Error;
+            setErrorState({ msg: "Couldn't determine representativity: data wrong or server down.", stackTrace: error.toString() });
+        }
+    }
+
+    const reset = () => {
+        setMenuState('hidden');
+        setPreviewImg(null);
+        setImageInfo(null);
+        setAnalysisInfo(null);
+        setTargetL(null);
+        setAccurateFractions(null);
+        setPreviewImg(null);
+        setSelectedPhase(0);
+        setErrVF(5);
+        setSelectedConf(95);
+    }
+
+    useEffect(() => { // TODO: fetch from API instead
+        if (menuState === 'processing') {
+            requestRepr();
         }
     }, [menuState])
 
     return (
         <div className={`w-full h-full`}>
-            <Topbar></Topbar>
+            <Topbar loadFromFile={appLoadFile} reset={reset}></Topbar>
             <div className={`flex`} style={{ margin: '1.5%' }} > {/*Canvas div on left, sidebar on right*/}
                 {!previewImg && <DragDrop loadFromFile={appLoadFile} />}
                 {previewImg && <PreviewCanvas />}
+                {false && <NormalSlider />}
             </div>
-            <Menu></Menu>
+            <Menu />
+            <ErrorMessage />
+            {showWarning != "" && <CLSModal />}
+            <MoreInfo />
         </div>
     );
 };