code refactor

README.md

@@ -22,21 +22,25 @@ The Die Wise is a sophisticated tool designed for semiconductor manufacturing pr
 ## Installation
 
 1. Clone the repository:
+
    ```bash
    git clone https://github.com/arangates/die-wise.git
    ```
 
 2. Navigate to the project directory:
+
    ```bash
    cd die-wise
    ```
 
 3. Install dependencies:
+
    ```bash
    npm install
    ```
 
 4. Start the development server:
+
    ```bash
    npm run dev
    ```
@@ -62,15 +66,15 @@ The Die Wise is a sophisticated tool designed for semiconductor manufacturing pr
 - **Excluded Dies**: Dies in the edge exclusion zone.
 - **Yield Estimation**: Based on defect density and die area.
 
-
 ## License
 
 This project is licensed under the MIT License.
 
 ## Acknowledgments
 
 - Inspired by the needs of semiconductor manufacturing professionals
--Wafer Map Estimation using Murphy’s Model of Die Yield
+  -Wafer Map Estimation using Murphy’s Model of Die Yield
+
 ## Contact
 
 For questions, suggestions, or support, please open an issue in the GitHub repository

src/blocks/BackgroundGrid.tsx

@@ -25,4 +25,4 @@ export const BackgroundGrid: React.FC<{ size: number }> = ({ size }) => (
       />
     ))}
   </>
-)
+)

src/blocks/Labels.tsx

@@ -15,4 +15,4 @@ export const Labels: React.FC<{ size: number }> = ({ size }) => (
       Exclusion Edge
     </text>
   </>
-)
+)

src/blocks/ParameterInputs.tsx

@@ -13,15 +13,13 @@ export const ParameterInputs: React.FC<{
       value={parameters.dieSize.horizontal}
       onChange={onChange}
       step="0.1"
-      className="border-red-500"
     />
     <SingleInput
       label="Die Height [h] (mm)"
       name="dieSize.vertical"
       value={parameters.dieSize.vertical}
       onChange={onChange}
       step="0.1"
-      className="border-red-500"
     />
     <SingleInput
       label="Horizontal Scribe Lane [sh] (mm)"
@@ -38,4 +36,4 @@ export const ParameterInputs: React.FC<{
       step="0.1"
     />
   </div>
-)
+)

src/blocks/ResultsDisplay.tsx

@@ -24,4 +24,4 @@ export const ResultsDisplay: React.FC<{
       Max Dies Per Wafer (without defect) #{results.goodDevices}
     </p>
   </div>
-)
+)

src/blocks/ShiftInputs.tsx

@@ -20,4 +20,4 @@ export const ShiftInputs: React.FC<{
       onChange={onChange}
     />
   </div>
-)
+)

src/blocks/SingleInput.tsx

@@ -22,4 +22,4 @@ export const SingleInput: React.FC<{
       className={className}
     />
   </div>
-)
+)

src/blocks/WaferDiameterSelect.tsx

@@ -1,5 +1,11 @@
 import React from "react"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { Label } from "@/components/ui/label"
 
 export const WaferDiameterSelect: React.FC<{
@@ -20,4 +26,4 @@ export const WaferDiameterSelect: React.FC<{
       </SelectContent>
     </Select>
   </div>
-)
+)

src/blocks/WaferMap.tsx

@@ -1,56 +1,66 @@
-import { DieCalculationParameters } from "@/types"
-import { createDies } from "../lib/createDies"
+import type { DieCalculationParameters } from "@/types"
+import { createDies } from "@/lib/createDies"
 import { BackgroundGrid } from "@/blocks/BackgroundGrid"
 import { WaferOutline } from "@/blocks/WaferOutline"
 import { Labels } from "@/blocks/Labels"
 
-export const WaferMap = ({parameters}: {parameters: DieCalculationParameters}) => {
-    const size = 900
-    const centerX = size / 2
-    const centerY = size / 2
-    const radius = size / 2 - 10
-    const exclusionRadius = radius * (1 - parameters.edgeLoss / parameters.waferDiameter)
+export const WaferMap = ({
+  parameters,
+}: {
+  parameters: DieCalculationParameters
+}) => {
+  const size = 900
+  const centerX = size / 2
+  const centerY = size / 2
+  const radius = size / 2 
+  const exclusionRadius =
+    radius * (1 - parameters.edgeLoss / parameters.waferDiameter)
 
-    const reticle = {
-      horizontal: parameters.dieSize.horizontal + parameters.dieSpacing.horizontal,
-      vertical: parameters.dieSize.vertical + parameters.dieSpacing.vertical,
-    }
+  const reticle = {
+    horizontal:
+      parameters.dieSize.horizontal + parameters.dieSpacing.horizontal,
+    vertical: parameters.dieSize.vertical + parameters.dieSpacing.vertical,
+  }
 
-    const dieCountHorizontal = Math.round(parameters.waferDiameter / reticle.horizontal)
-    const dieCountVertical = Math.round(parameters.waferDiameter / reticle.vertical)
-    const scale = size / parameters.waferDiameter
+  const dieCountHorizontal = Math.round(
+    parameters.waferDiameter / reticle.horizontal
+  )
+  const dieCountVertical = Math.round(
+    parameters.waferDiameter / reticle.vertical
+  )
+  const scale = size / parameters.waferDiameter
 
-    const dies = createDies(
-      dieCountHorizontal,
-      dieCountVertical,
-      reticle,
-      scale,
-      centerX,
-      centerY,
-      radius,
-      parameters
-    )
+  const dies = createDies(
+    dieCountHorizontal,
+    dieCountVertical,
+    reticle,
+    scale,
+    centerX,
+    centerY,
+    radius,
+    parameters
+  )
 
-    return (
-      <svg width={size} height={size} className="aspect-square w-full">
-        <BackgroundGrid size={size} />
-        <WaferOutline
-          centerX={centerX}
-          centerY={centerY}
-          radius={radius}
-          exclusionRadius={exclusionRadius}
+  return (
+    <svg width={size} height={size} className="aspect-square w-full">
+      <BackgroundGrid size={size} />
+      <WaferOutline
+        centerX={centerX}
+        centerY={centerY}
+        radius={radius}
+        exclusionRadius={exclusionRadius}
+      />
+      {dies.map((die) => (
+        <rect
+          key={die.key}
+          x={die.x}
+          y={die.y}
+          width={die.width}
+          height={die.height}
+          fill={die.fill}
         />
-        {dies.map((die) => (
-          <rect
-            key={die.key}
-            x={die.x}
-            y={die.y}
-            width={die.width}
-            height={die.height}
-            fill={die.fill}
-          />
-        ))}
-        <Labels size={size} />
-      </svg>
-    )
-  }
+      ))}
+      <Labels size={size} />
+    </svg>
+  )
+}

src/blocks/WaferOutline.tsx

@@ -24,4 +24,4 @@ export const WaferOutline: React.FC<{
       fill="none"
     />
   </>
-)
+)

src/blocks/YieldControls.tsx

@@ -0,0 +1,66 @@
+import { Button } from "@/components/ui/button"
+import { SingleInput } from "@/blocks/SingleInput"
+import { ShiftInputs } from "@/blocks/ShiftInputs"
+import { ParameterInputs } from "@/blocks/ParameterInputs"
+import { WaferDiameterSelect } from "@/blocks/WaferDiameterSelect"
+import { useDieYield } from "@/contexts/useDieYield"
+
+const YieldControls: React.FC = () => {
+  const { parameters, setParameters, resetParameters } = useDieYield()
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target
+    setParameters((prev) => {
+      const newParameters: any = { ...prev }
+      if (name.includes(".")) {
+        const [parent, child] = name.split(".")
+        newParameters[parent] = {
+          ...newParameters[parent],
+          [child]: parseFloat(value),
+        }
+      } else {
+        newParameters[name] = parseFloat(value)
+      }
+      return newParameters
+    })
+  }
+
+  return (
+    <>
+      <WaferDiameterSelect
+        value={parameters.waferDiameter}
+        onChange={(value) =>
+          setParameters((prev) => ({
+            ...prev,
+            waferDiameter: parseInt(value),
+          }))
+        }
+      />
+      <ParameterInputs parameters={parameters} onChange={handleInputChange} />
+
+      <SingleInput
+        label="Edge Loss (mm)"
+        name="edgeLoss"
+        value={parameters.edgeLoss}
+        onChange={handleInputChange}
+        className="border-green-500"
+      />
+      <SingleInput
+        label="Defect Density (#/sq.cm)"
+        name="defectDensity"
+        value={parameters.defectDensity}
+        onChange={handleInputChange}
+        className="border-green-500"
+      />
+      <ShiftInputs parameters={parameters} onChange={handleInputChange} />
+      <Button
+        onClick={resetParameters}
+        className="bg-red-500 text-white hover:bg-red-600"
+      >
+        Reset
+      </Button>
+    </>
+  )
+}
+
+export { YieldControls}

src/contexts/useDieYield.tsx

@@ -12,10 +12,15 @@ interface DieYieldContextProps {
   resetParameters: () => void
 }
 
-const DieYieldContext = createContext<DieYieldContextProps | undefined>(undefined)
-
-export const DieYieldProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [parameters, setParameters] = useState<DieCalculationParameters>(INITIAL_PARAMETERS)
+const DieYieldContext = createContext<DieYieldContextProps | undefined>(
+  undefined
+)
+
+export const DieYieldProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [parameters, setParameters] =
+    useState<DieCalculationParameters>(INITIAL_PARAMETERS)
   const [results, setResults] = useState<DieCalculationResults>(INITIAL_RESULTS)
 
   useEffect(() => {
@@ -35,7 +40,9 @@ export const DieYieldProvider: React.FC<{ children: React.ReactNode }> = ({ chil
   }
 
   return (
-    <DieYieldContext.Provider value={{ parameters, results, setParameters, resetParameters }}>
+    <DieYieldContext.Provider
+      value={{ parameters, results, setParameters, resetParameters }}
+    >
       {children}
     </DieYieldContext.Provider>
   )
@@ -47,4 +54,4 @@ export const useDieYield = () => {
     throw new Error("useDieYield must be used within a DieYieldProvider")
   }
   return context
-}
+}