add cache options

static/app.js

@@ -109,8 +109,10 @@ export class CanvasApp {
             if (nodeObj.type === 'Database') {
                 nodeObj.props.replication = parseInt(panel.querySelector("input[name='replication']").value, 10);
             }
-            if (nodeObj.type === 'CacheStandard' || nodeObj.type === 'CacheLarge') {
+            if (nodeObj.type === 'cache') {
                 nodeObj.props.cacheTTL = parseInt(panel.querySelector("input[name='cacheTTL']").value, 10);
+                nodeObj.props.maxEntries = parseInt(panel.querySelector("input[name='maxEntries']").value, 10);
+                nodeObj.props.evictionPolicy = panel.querySelector("select[name='evictionPolicy']").value;
             }
             if (this.computeTypes.includes(nodeObj.type)) {
                 nodeObj.props.instanceSize = panel.querySelector("select[name='instanceSize']").value;
@@ -149,6 +151,11 @@ export class CanvasApp {
         this.activeNode = nodeObj;
         const panel = this.nodePropsPanel;
 
+        if (nodeObj.type === 'user') {
+            this.hidePropsPanel();
+            return;
+        }
+
         // Position the panel (optional, or you can use fixed top/right)
         const bbox = nodeObj.group.getBBox();
         const ctm = nodeObj.group.getCTM();
@@ -168,10 +175,13 @@ export class CanvasApp {
         }
 
         // Show cache fields if it's a cache
-        const isCache = nodeObj.type === 'CacheStandard' || nodeObj.type === 'CacheLarge';
+        const isCache = nodeObj.type === 'cache';
         this.cacheGroup.style.display = isCache ? 'block' : 'none';
         if (isCache) {
-            this.cacheGroup.querySelector("input[name='cacheTTL']").value = nodeObj.props.cacheTTL;
+            this.cacheGroup.querySelector("input[name='cacheTTL']").value = nodeObj.props.cacheTTL ?? 0;
+            panel.querySelector('input[name="cacheTTL"]').value = nodeObj.props.cacheTTL;
+            panel.querySelector("input[name='maxEntries']").value = nodeObj.props.maxEntries || 100000;
+            panel.querySelector("select[name='evictionPolicy']").value = nodeObj.props.evictionPolicy || 'LRU';
         }
 
         this.propsSaveBtn.disabled = false;
@@ -215,7 +225,9 @@ export class CanvasApp {
     }
 
     exportDesign() {
-        const nodes = this.placedComponents.map(n => {
+        const nodes = this.placedComponents
+            .filter(n => n.type !== 'user')
+            .map(n => {
                 const baseProps = { label: n.props.label };
 
                 // Add only if it's a database
@@ -224,8 +236,10 @@ export class CanvasApp {
                 }
 
                 // Add only if it's a cache
-            if (n.type === 'CacheStandard' || n.type === 'CacheLarge') {
+                if (n.type === 'cache') {
                     baseProps.cacheTTL = n.props.cacheTTL;
+                    baseProps.maxEntries = n.props.maxEntries;
+                    baseProps.evictionPolicy = n.props.evictionPolicy;
                 }
 
                 // Add only if it's a compute node

static/game.html

@@ -735,7 +735,15 @@
                     <label>replication factor:<input type="number" name="replication" min="1" step="1" /></label>
                   </div>
                   <div id="cache-group" class="prop-group">
-                    <label>cache ttl (secs):<input type="number" name="cachettl" min="0" step="60" /></label>
+                    <label>cache ttl (secs):<input type="number" name="cacheTTL" min="0" step="60" /></label>
+                    <label>Max Entries: <input name="maxEntries" type="number" /></label>
+                    <label>Eviction Policy:
+                      <select name="evictionPolicy">
+                        <option value="LRU">LRU</option>
+                        <option value="LFU">LFU</option>
+                        <option value="Random">Random</option>
+                      </select>
+                    </label>
                   </div>
                   <div id="compute-group">
                     <label>Instance Size:</label>