begin to parse ome channel information

src/components/vivView.tsx

@@ -112,61 +112,15 @@ const VivView = (props: Props) => {
   const waypoint = getWaypoint(stories, s, w);
   const [shape, setShape] = useState(maxShape);
   const [channelSettings, setChannelSettings] = useState({});
-  const [channels, setChannels] = useState([]);
   const [canvas, setCanvas] = useState(null);
   const rootRef = React.useMemo(() => {
     return shapeRef(setShape);
   }, [maxShape]);
 
-  /*
-  const [loader, setLoader] = useState(null);
   useEffect(() => {
-    loadOmeTiff(url).then((loader) => {
-      setLoader(loader);
-    });
-  }, []);
-
-  // useEffect(() => {
-  //   console.log("groups", groups);
-  //   console.log("g", g);
-  //   if (!groups?.[g]?.channels) return;
-  //   console.log("channels", groups[g].channels, settings, loader);
-  // }, [groups, loader]);
-
-
-
-  useEffect(() => {
-    if (!groups?.[g]?.channels) return;
-    const _channels = groups?.[g]?.channels.map((d: any, i: number) => {
-      return { id: i, ...d };
-    });
-    setChannels(_channels);
-  }, [groups, g]);
-
-
-
-  useEffect(() => {
-    // console.log("Settings", settings, loader);
-    console.log("Loder", loader);
-    const channelsVisible = channels.map((d) => true);
-    const colors: Color[] = channels.map(
-      (d) => hex2rgb(`#${d.color}`) as Color
-    );
-    const selections = channels.map((d) => {
-      return { z: 0, t: 0, c: d.id };
-    });
-    // TODO: Update this to read the bitdepth from metadata and set ranges based on that
-    const contrastLimits: Limit[] = channels.map((d) => {
-      return [0, 65535];
-    });
-    setSettings({ channelsVisible, colors, selections, contrastLimits });
-    console.log(channels, colors, selections);
-  }, [channels, loader]);
-
-  useEffect(() => {
-    console.log('Canvas IS', canvas);
-  },[canvas]);
-  */
+    const newSettings = toSettings(hash, loader)
+    setSettings(newSettings);
+  }, [loader]);
 
   if (!loader || !settings) return null;
   return (
@@ -177,7 +131,6 @@ const VivView = (props: Props) => {
           ...shape,
           ...(settings as any),
 /*
-          loader: loader.data,
           lensEnabled: true,
           lensRadius: 100,
           lensSelection: 0,

src/lib/viv.ts

@@ -16,30 +16,48 @@ export type Config = {
   toSettings: (h: HashState) => Settings;
 };
 
+const toDefaultSettings = (n) => {
+  const chan_range = [...Array(n).keys()];
+  const n_shown = 3;
+  const n_sub = n_shown; //TODO
+  return {
+    selections: chan_range.map((c) => {
+      return { z: 0, t: 0, c: c }
+    }).slice(0, n_sub),
+    colors: chan_range.map((c) => {
+      return [
+        [0, 0, 255],
+        [0, 255, 0],
+        [255, 0, 0],
+      ][c%3];
+    }).slice(0, n_sub),
+    contrastLimits: chan_range.map(() => [0, 65535]).slice(0, n_sub),
+    channelsVisible: chan_range.map((n) => {
+      return n < n_shown;
+    }).slice(0, n_sub),
+  }
+}
+
 const toSettings = (opts) => {
-  return (hash) => {
+  return (hash, loader) => {
     const { g } = hash;
     const groups = opts.groups as Group[];
     const group = groups.find((group) => group.g === g);
     const channels = group?.channels || [];
-    return {
-      selections: [
-        { z: 0, t: 0, c: 0 },
-        { z: 0, t: 0, c: 1 },
-        { z: 0, t: 0, c: 2 },
-      ],
-      colors: [
-        [0, 0, 255],
-        [0, 255, 0],
-        [255, 0, 0],
-      ],
-      contrastLimits: [
-        [0, 65535],
-        [0, 65535],
-        [0, 65535],
-      ],
-      channelsVisible: [true, true, true],
-    };
+    // Defaults
+    if (!loader) return toDefaultSettings(3);
+    const full_level = loader[0];
+    if (!loader) return toDefaultSettings(3);
+    const { labels, shape } = full_level;
+    const c_idx = labels.indexOf("c");
+    const selections: Selection[] = [];
+    const colors: Color[] = [];
+    const contrastLimits: Limit[] = [];
+    const channelsVisible: boolean[] = [];
+
+    const n_channels = shape[c_idx] || 0;
+    const out = toDefaultSettings(n_channels);
+    return out;
   };
 };