extra info for FSST + Dict

src/components/array.rs

@@ -4,7 +4,7 @@ use dioxus::{logger::tracing, prelude::*};
 use vortex::{stats::ArrayStatistics, validity::ArrayValidity, ArrayDType, ArrayData};
 
 use crate::{
-    components::{dtype::DTypeInfo, stats::Statistics, Heading},
+    components::{array_info::EncodingInfo, dtype::DTypeInfo, stats::Statistics, Heading},
     SharedPtr,
 };
 
@@ -50,6 +50,10 @@ pub fn ArrayView(
 
             div { class: "my-12 h-0.5 border-t-0 bg-neutral-100/30" }
 
+            EncodingInfo { array: array.clone() }
+
+            div { class: "my-12 h-0.5 border-t-0 bg-neutral-100/30" }
+
             if !array.children().is_empty() {
                 ArrayChildren { history_stack }
             }

src/components/array_info/dict.rs

@@ -1,9 +1,88 @@
 use dioxus::prelude::*;
-use vortex::dict::DictArray;
+use vortex::{compute::scalar_at, dict::DictArray, ArrayDType};
 
-use crate::SharedPtr;
+use crate::{components::Heading, SharedPtr};
 
 #[component]
 pub fn DictInfo(array: SharedPtr<DictArray>) -> Element {
-    rsx! {}
+    let mut show_dictionary = use_signal(|| false);
+    let num_values = array.values().len();
+    rsx! {
+        Heading { text: "Dictionary Encoding" }
+
+        a {
+            // Styling.
+            class: "text-lg flex flex-row cursor-pointer gap-x-1",
+
+            // Event handlers.
+            onclick: move |_| {
+                show_dictionary.toggle();
+            },
+
+            if show_dictionary() {
+                span { "▼  " }
+            } else {
+                span { "►  " }
+            }
+
+            "Dictionary ({num_values} values)"
+        }
+
+        if show_dictionary() {
+            DictionaryView { array }
+        }
+    }
+}
+#[component]
+pub fn DictionaryView(array: SharedPtr<DictArray>) -> Element {
+    let dict_values = array.values();
+    // Turn each of the dict values into a block of strings.
+    let mut dict_strings = Vec::with_capacity(dict_values.len());
+    // DictArray code 0 is reserved for NULL for nullable arrays, it is a valid code.
+    if array.dtype().is_nullable() {
+        dict_strings.push("null".to_string());
+    }
+
+    for i in 0..dict_values.len() {
+        let value = scalar_at(&dict_values, i)?;
+        dict_strings.push(format!("{value}"));
+    }
+
+    rsx! {
+        div { class: "relative flex flex-col max-w-7/12 bg-clip-border",
+            table { class: "table-auto w-full min-w-max text-left border-collapse",
+                thead { class: "bg-neutral-700 border-b border-1 border-zinc-50/10",
+                    tr {
+                        th { class: "p-4",
+                            p { class: "block font-sans text-sm antialiased font-normal leading-none opacity-70",
+                                "Code"
+                            }
+                        }
+                        th { class: "p-4",
+                            p { class: "block font-sans text-sm antialiased font-normal leading-none opacity-70",
+                                "Value"
+                            }
+                        }
+                    }
+                }
+
+                tbody { class: "border-b border-1 border-zinc-50/10",
+                    for (code , value) in dict_strings.into_iter().enumerate() {
+                        tr { class: "font-normal hover:bg-neutral-800/75 border-b border-1 border-zinc-50/10",
+                            td { class: "p-1",
+                                p { class: "block font-sans font-bold text-sm antialiased leading-normal",
+                                    "{code}"
+                                }
+                            }
+                            td { class: "p-1",
+                                p { class: "block font-mono text-sm antialiased leading-normal",
+                                    "{value}"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }

src/components/array_info/fsst.rs

@@ -1,9 +1,101 @@
 use dioxus::prelude::*;
-use vortex::fsst::FSSTArray;
+use vortex::{fsst::FSSTArray, IntoArrayVariant};
 
-use crate::SharedPtr;
+use crate::{components::Heading, SharedPtr};
 
+/// Information view for `FSSTArray`. Provides access to the symbol table.
 #[component]
 pub fn FSSTInfo(array: SharedPtr<FSSTArray>) -> Element {
-    rsx! {}
+    let mut show_symbol_table = use_signal(|| false);
+
+    rsx! {
+        Heading { text: "FSST Encoding" }
+
+        // Short description of the symbol table child
+        a {
+            // Styling.
+            class: "text-lg flex flex-row cursor-pointer gap-x-1",
+
+            // Event handlers.
+            onclick: move |_| {
+                show_symbol_table.toggle();
+            },
+
+            if show_symbol_table() {
+                span { "▼  " }
+            } else {
+                span { "►  " }
+            }
+
+            "Symbol Table"
+        }
+
+        if show_symbol_table() {
+            SymbolTableView { array }
+        }
+    }
+}
+
+#[component]
+pub fn SymbolTableView(array: SharedPtr<FSSTArray>) -> Element {
+    let symbol_lens = array
+        .symbol_lengths()
+        .into_primitive()?
+        .into_maybe_null_slice::<u8>();
+    let symbols = array
+        .symbols()
+        .into_primitive()?
+        .into_maybe_null_slice::<u64>();
+    let symbols: Vec<String> = symbols
+        .into_iter()
+        .zip(symbol_lens.into_iter())
+        .map(|(symbol, len)| {
+            let symbols: Vec<u8> = symbol.to_le_bytes().into_iter().take(len as _).collect();
+            match String::from_utf8(symbols) {
+                Ok(s) => s,
+                Err(binary) => {
+                    let bytes = binary.into_bytes();
+                    format!("binary: {bytes:?}")
+                }
+            }
+        })
+        .collect();
+
+    rsx! {
+        div { class: "relative flex flex-col max-w-7/12 bg-clip-border",
+            table { class: "table-auto w-full min-w-max text-left border-collapse",
+                thead { class: "bg-neutral-700 border-b border-1 border-zinc-50/10",
+                    tr {
+                        th { class: "p-4",
+                            p { class: "block font-sans text-sm antialiased font-normal leading-none opacity-70",
+                                "Code"
+                            }
+                        }
+                        th { class: "p-4",
+                            p { class: "block font-sans text-sm antialiased font-normal leading-none opacity-70",
+                                "Value"
+                            }
+                        }
+                    }
+                }
+
+                tbody { class: "border-b border-1 border-zinc-50/10",
+                    for (code , symbol) in symbols.into_iter().enumerate() {
+                        tr { class: "font-normal hover:bg-neutral-800/75 border-b border-1 border-zinc-50/10",
+                            td { class: "p-1",
+                                p { class: "block font-sans font-bold text-sm antialiased leading-normal",
+                                    "{code}"
+                                }
+                            }
+                            td { class: "p-1",
+                                p { class: "block font-mono text-sm antialiased leading-normal",
+                                    "{symbol}"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }