setValue(e.target.value)} />
{value ? : null}
;
const dropdown = ({id, label, icon, align, open, setOpen, count, children}) =>
{open === id ?
;
const [category, setCategory] = useState((AVAILABLE[0] || CATEGORIES[0]).key);
const [providerSel, setProviderSel] = useState([]);
const [typeSel, setTypeSel] = useState([]);
const [modelSel, setModelSel] = useState([]);
const [search, setSearch] = useState("");
const [modelSearch, setModelSearch] = useState("");
const [open, setOpen] = useState(null);
const [direction, setDirection] = useState("read");
const [sheet, setSheet] = useState(null);
const [error, setError] = useState(null);
const [cache, setCache] = useState({});
const [copied, setCopied] = useState(false);
const [hydrated, setHydrated] = useState(false);
useEffect(() => {
if (typeof window === "undefined") return;
const q = new URLSearchParams(window.location.search);
const cat = q.get("category");
if (cat && AVAILABLE.some(c => c.key === cat)) setCategory(cat);
const split = v => v ? v.split(",").filter(Boolean) : [];
setProviderSel(split(q.get("providers")));
setTypeSel(split(q.get("types")));
setModelSel(split(q.get("models")));
if (q.get("direction") === "write") setDirection("write");
setHydrated(true);
}, []);
useEffect(() => {
let live = true;
setError(null);
const tabs = SHEET_GIDS[category] || ({});
const dir = tabs[direction] ? direction : "read";
const key = category + "|" + dir;
if (cache[key]) {
setSheet(cache[key]);
return;
}
setSheet(null);
loadMatrix(category, dir).then(data => {
if (!live) return;
setCache(c => ({
...c,
[key]: data
}));
setSheet(data);
}, err => {
if (live) setError(err.message || String(err));
});
return () => {
live = false;
};
}, [category, direction, cache]);
useEffect(() => {
const tabs = SHEET_GIDS[category] || ({});
if (direction === "write" && !tabs.write) setDirection("read");
}, [category, direction]);
useEffect(() => {
if (typeof document === "undefined" || !open) return;
const close = e => {
if (!e.target.closest(".bb-mm-pop-wrap")) setOpen(null);
};
document.addEventListener("click", close);
return () => document.removeEventListener("click", close);
}, [open]);
const allProviders = sheet && sheet.providers || [];
const groups = sheet && sheet.groups || [];
const flatModels = () => groups.flatMap(g => g.models);
const toggle = (list, setList, value) => setList(list.includes(value) ? list.filter(v => v !== value) : [...list, value]);
const canWrite = WRITE_ENABLED && !!(SHEET_GIDS[category] && SHEET_GIDS[category].write);
const writeView = direction === "write" && canWrite;
const viewQuery = full => {
const q = new URLSearchParams();
if (full || category !== (AVAILABLE[0] || CATEGORIES[0]).key) q.set("category", category);
if (providerSel.length) q.set("providers", providerSel.join(","));
if (typeSel.length) q.set("types", typeSel.join(","));
if (modelSel.length) q.set("models", modelSel.join(","));
if (writeView) q.set("direction", "write");
return q;
};
useEffect(() => {
if (!hydrated || typeof window === "undefined") return;
const qs = viewQuery(false).toString();
window.history.replaceState(null, "", window.location.pathname + (qs ? "?" + qs : "") + window.location.hash);
}, [hydrated, category, providerSel, typeSel, modelSel, writeView]);
const providers = useMemo(() => allProviders.filter(p => (providerSel.length === 0 || providerSel.includes(p.slug)) && (typeSel.length === 0 || typeSel.includes(p.type))), [allProviders, providerSel, typeSel]);
const visibleGroups = useMemo(() => groups.map(g => ({
group: g.group,
models: g.models.filter(m => modelSel.length === 0 || modelSel.includes(m.key))
})).filter(g => g.models.length > 0), [groups, modelSel]);
const rows = useMemo(() => visibleGroups.flatMap(g => [{
kind: "group",
group: g.group
}, ...g.models.map(m => ({
kind: "model",
model: m
}))]), [visibleGroups]);
const modelCount = rows.filter(r => r.kind === "model").length;
const cellState = (modelKey, slug) => sheet && sheet.cells[modelKey] && sheet.cells[modelKey][slug] || "N";
const copyLink = () => {
const q = viewQuery(true);
const url = window.location.origin + window.location.pathname + "?" + q.toString();
navigator.clipboard.writeText(url).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 1800);
});
};
const downloadCsv = () => {
const esc = v => '"' + String(v).replace(/"/g, '""') + '"';
const out = [["Group", "Model", ...providers.map(p => p.name)], ["", "Connection type", ...providers.map(p => p.type)]];
let group = "";
rows.forEach(row => {
if (row.kind === "group") {
group = row.group;
return;
}
out.push([group, row.model.label, ...providers.map(p => {
const v = cellState(row.model.key, p.slug);
return v === "Y" ? "Yes" : v === "B" ? "Beta" : "No";
})]);
});
const csv = out.map(r => r.map(esc).join(",")).join("\n");
const url = URL.createObjectURL(new Blob([csv], {
type: "text/csv;charset=utf-8"
}));
const a = document.createElement("a");
a.href = url;
a.download = "bindbee-model-" + (writeView ? "write" : "availability") + "-" + category.toLowerCase() + ".csv";
a.click();
URL.revokeObjectURL(url);
};
const modelOptions = groups.map(g => ({
group: g.group,
models: g.models.filter(m => (m.label + " " + g.group).toLowerCase().includes(modelSearch.toLowerCase()))
})).filter(g => g.models.length > 0);
const providerOptions = allProviders.filter(p => (p.name + " " + p.slug).toLowerCase().includes(search.toLowerCase()));
return
{children}
: null}
{error ?
Couldn't load the availability data. {error}. Check that the sheet is
still published to the web and that the tab's gid is correct.
: null}
;
};
{}
{}
{dropdown({
id: "provider",
label: "Integration",
icon: "git-fork",
open,
setOpen,
count: providerSel.length,
children: <>
{searchBox({
value: search,
setValue: setSearch,
placeholder: "Search integrations"
})}
{providerOptions.length === 0 ?
})}
{dropdown({
id: "model",
label: "Model",
icon: "layers",
open,
setOpen,
count: modelSel.length,
children: <>
{searchBox({
value: modelSearch,
setValue: setModelSearch,
placeholder: "Search models"
})}
{modelOptions.length === 0 ?
)}
})}
{dropdown({
id: "type",
label: "Connection type",
icon: "cable",
open,
setOpen,
count: typeSel.length,
children: <>
{["API", "SFTP"].map(t => )}
})}
{}
No integrations match “{search}”.
: null}
{providerOptions.map(p => )}
No models match “{modelSearch}”.
: null}
{modelOptions.map(g => {g.group}
{g.models.map(m => )}
{error ?
}
No data to show.
: !sheet ?
Loading availability data…
: providers.length === 0 || modelCount === 0 ? No providers or models match the current filters.
: | Model | {providers.map(p =>
{p.logo ? | )}
|---|---|
| {row.group} | |
| {row.model.label} | {providers.map(p =>{cellState(row.model.key, p.slug) === "Y" ? checkIcon() : cellState(row.model.key, p.slug) === "B" ? BETA : dashMark()} | )}