Implemented confi snapshots

web/src/PropertiesPane.tsx

@@ -55,6 +55,17 @@ const MULTI_SIGNAL_WIDGETS = new Set(['plot', 'multiled']);
 
 export default function PropertiesPane({ selected, multiCount, iface, onChange, onIfaceChange, width }: Props) {
   const [collapsed, setCollapsed] = useState(false);
+  const [configSets, setConfigSets] = useState<{ id: string; name: string }[]>([]);
+
+  // Config sets are only needed by the Config Selector widget; fetch lazily the
+  // first time one is selected.
+  useEffect(() => {
+    if (selected?.type !== 'configselect' || configSets.length > 0) return;
+    fetch('/api/v1/config/sets')
+      .then(r => r.ok ? r.json() : [])
+      .then((list: { id: string; name: string }[]) => setConfigSets(list ?? []))
+      .catch(() => {});
+  }, [selected?.type]);
 
   function setOpt(key: string, value: string) {
     if (!selected) return;
@@ -360,6 +371,39 @@ export default function PropertiesPane({ selected, multiCount, iface, onChange,
                   </Field>
                 </div>
               )}
+
+              {w.type === 'configselect' && (
+                <div>
+                  <Field label="Label">
+                    <TextInput value={w.options['label'] ?? 'Config'} onCommit={(v) => setOpt('label', v)} />
+                  </Field>
+                  <Field label="Config set">
+                    <select class="prop-select" value={w.options['set'] ?? ''}
+                      onChange={(e) => setOpt('set', (e.target as HTMLSelectElement).value)}>
+                      <option value="">choose…</option>
+                      {configSets.map(cs => <option key={cs.id} value={cs.id}>{cs.name}</option>)}
+                    </select>
+                  </Field>
+                  <Field label="Output variable">
+                    <div class="prop-field-col">
+                      <select class="prop-input" value={w.options['output'] ?? ''}
+                        onChange={(e) => setOpt('output', (e.target as HTMLSelectElement).value)}>
+                        <option value="">(none)</option>
+                        {(iface.statevars ?? []).map(v => (
+                          <option key={v.name} value={v.name}>{v.name}</option>
+                        ))}
+                      </select>
+                      <span class="prop-hint">A panel variable (define one of type "string" in the Variables tab); receives the selected instance id.</span>
+                    </div>
+                  </Field>
+                  <Field label="Instance subset">
+                    <div class="prop-field-col">
+                      <TextInput value={w.options['instances'] ?? ''} onCommit={(v) => setOpt('instances', v)} />
+                      <span class="prop-hint">Comma-separated instance ids to show. Empty = all instances of the set.</span>
+                    </div>
+                  </Field>
+                </div>
+              )}
             </div>
           )}