Smart Density Defaults - Auto-fill based on material type #2

New Issue

tonym · 2026-01-15T01:20:16Z

tonym commented

2026-01-15 01:20:16 +00:00

Problem

Density is required to create a filament, but users have to look up/remember standard values. This is tedious for common materials with well-known densities.

Solution

Auto-fill density when material is selected/entered, default diameter to 1.75mm.

Implementation Plan

1. Create Material Defaults Utility

New file: client/src/utils/materialDefaults.ts

export const MATERIAL_DENSITY_MAP: Record<string, number> = {
  "PLA": 1.24,
  "ABS": 1.04,
  "PETG": 1.27,
  "NYLON": 1.52,
  "TPU": 1.21,
  "PC": 1.3,
  "WOOD": 1.28,
  "CF": 1.3,
  "CARBON FIBER": 1.3,
  "PC/ABS": 1.19,
  "HIPS": 1.03,
  "PVA": 1.23,
  "ASA": 1.05,
  "PP": 0.9,
  "POM": 1.4,
  "PMMA": 1.18,
  "FPE": 2.16,
  // Common variations
  "PLA+": 1.24,
  "PETG+": 1.27,
  "ABS+": 1.04,
};

export const DEFAULT_DENSITY = 1.24; // PLA
export const DEFAULT_DIAMETER = 1.75;

// Fuzzy matching: "PLA Silk" → PLA, "PETG+" → PETG
export function getDensityForMaterial(material: string): number | null;

Convert material from free text Input to AutoComplete or Select with:

Predefined options from MATERIAL_DENSITY_MAP keys
Allow custom entry (user can type new materials)
On select/blur, trigger density auto-fill

3. Files to Modify

client/src/pages/filaments/create.tsx

Import materialDefaults utility
Replace material Input with AutoComplete component
Add Form.useWatch on material field
Add useEffect to auto-fill density when material changes
Pre-populate diameter (1.75) and density (1.24) for new filaments

client/src/components/filamentCreateModal.tsx

Same changes as above
Already has DEFAULT_DIAMETER and DEFAULT_DENSITY constants - replace with imports

client/src/pages/filaments/edit.tsx

Consider: should editing material update density? Probably NOT (user may have customized)

4. UX Decisions

Decision	Choice
Trigger	On blur AND on dropdown select
Default diameter	1.75mm
Default density	1.24 (PLA)
Fuzzy matching	Yes - "PLA Silk" matches PLA
Material field type	AutoComplete (dropdown + free text)
Allow new materials	Yes, easily
Apply to edit page	No - don't override user customizations

5. Fuzzy Matching Logic

function getDensityForMaterial(material: string): number | null {
  const normalized = material.toUpperCase().trim();
  
  // Direct match first
  if (MATERIAL_DENSITY_MAP[normalized]) {
    return MATERIAL_DENSITY_MAP[normalized];
  }
  
  // Fuzzy: check if input starts with or contains a known material
  for (const [key, density] of Object.entries(MATERIAL_DENSITY_MAP)) {
    if (normalized.startsWith(key) || normalized.includes(key)) {
      return density;
    }
  }
  
  return null; // Unknown material, keep current density
}

6. Testing Checklist

New filament form: diameter defaults to 1.75
New filament form: density defaults to 1.24 (PLA)
Type "PETG" in material → density auto-fills to 1.27
Type "PLA Silk" → density auto-fills to 1.24 (fuzzy match)
Select material from dropdown → density auto-fills
Type unknown material ("MyCustom") → density stays at default/unchanged
FilamentCreateModal: same behavior as full form
Edit page: changing material does NOT change density

Priority

High - reduces friction significantly, pairs well with Issue #1

## Problem Density is required to create a filament, but users have to look up/remember standard values. This is tedious for common materials with well-known densities. ## Solution Auto-fill density when material is selected/entered, default diameter to 1.75mm. --- ## Implementation Plan ### 1. Create Material Defaults Utility **New file: `client/src/utils/materialDefaults.ts`** ```typescript export const MATERIAL_DENSITY_MAP: Record<string, number> = { "PLA": 1.24, "ABS": 1.04, "PETG": 1.27, "NYLON": 1.52, "TPU": 1.21, "PC": 1.3, "WOOD": 1.28, "CF": 1.3, "CARBON FIBER": 1.3, "PC/ABS": 1.19, "HIPS": 1.03, "PVA": 1.23, "ASA": 1.05, "PP": 0.9, "POM": 1.4, "PMMA": 1.18, "FPE": 2.16, // Common variations "PLA+": 1.24, "PETG+": 1.27, "ABS+": 1.04, }; export const DEFAULT_DENSITY = 1.24; // PLA export const DEFAULT_DIAMETER = 1.75; // Fuzzy matching: "PLA Silk" → PLA, "PETG+" → PETG export function getDensityForMaterial(material: string): number | null; ``` ### 2. Material Field as Searchable Dropdown Convert material from free text `Input` to `AutoComplete` or `Select` with: - Predefined options from MATERIAL_DENSITY_MAP keys - Allow custom entry (user can type new materials) - On select/blur, trigger density auto-fill ### 3. Files to Modify **`client/src/pages/filaments/create.tsx`** - Import materialDefaults utility - Replace material `Input` with `AutoComplete` component - Add `Form.useWatch` on material field - Add `useEffect` to auto-fill density when material changes - Pre-populate diameter (1.75) and density (1.24) for new filaments **`client/src/components/filamentCreateModal.tsx`** - Same changes as above - Already has DEFAULT_DIAMETER and DEFAULT_DENSITY constants - replace with imports **`client/src/pages/filaments/edit.tsx`** - Consider: should editing material update density? Probably NOT (user may have customized) ### 4. UX Decisions | Decision | Choice | |----------|--------| | Trigger | On blur AND on dropdown select | | Default diameter | 1.75mm | | Default density | 1.24 (PLA) | | Fuzzy matching | Yes - "PLA Silk" matches PLA | | Material field type | AutoComplete (dropdown + free text) | | Allow new materials | Yes, easily | | Apply to edit page | No - don't override user customizations | ### 5. Fuzzy Matching Logic ```typescript function getDensityForMaterial(material: string): number | null { const normalized = material.toUpperCase().trim(); // Direct match first if (MATERIAL_DENSITY_MAP[normalized]) { return MATERIAL_DENSITY_MAP[normalized]; } // Fuzzy: check if input starts with or contains a known material for (const [key, density] of Object.entries(MATERIAL_DENSITY_MAP)) { if (normalized.startsWith(key) || normalized.includes(key)) { return density; } } return null; // Unknown material, keep current density } ``` ### 6. Testing Checklist - [ ] New filament form: diameter defaults to 1.75 - [ ] New filament form: density defaults to 1.24 (PLA) - [ ] Type "PETG" in material → density auto-fills to 1.27 - [ ] Type "PLA Silk" → density auto-fills to 1.24 (fuzzy match) - [ ] Select material from dropdown → density auto-fills - [ ] Type unknown material ("MyCustom") → density stays at default/unchanged - [ ] FilamentCreateModal: same behavior as full form - [ ] Edit page: changing material does NOT change density ## Priority High - reduces friction significantly, pairs well with Issue #1

tonym referenced this issue from a commit

2026-01-15 01:45:19 +00:00

docs: Update CLAUDE.md with UX improvement progress

tonym referenced this issue from a commit

2026-01-15 01:54:34 +00:00

feat: Add smart density defaults based on material type (#2)

tonym referenced this issue from a commit

2026-01-15 01:55:06 +00:00

docs: Update CLAUDE.md with Issue #2 completion

tonym closed this issue

2026-01-16 03:41:13 +00:00

Sign in to join this conversation.