Adds a toggle to show/hide fields in sample modal that have undefined…

app/packages/core/src/components/Actions/Options.tsx

@@ -269,6 +269,36 @@ const Lightning = () => {
   );
 };
 
+const HideFieldSetting = () => {
+  const [hideNone, setHideNone] = useRecoilState(fos.hideNoneValuedFields);
+  const theme = useTheme();
+
+  return (
+    <>
+      <ActionOption
+        id="hide-none-valued-field-setting"
+        text="Hide None fields"
+        title={"More on hiding none fields"}
+        style={{
+          background: "unset",
+          color: theme.text.primary,
+          paddingTop: 0,
+          paddingBottom: 0,
+        }}
+        svgStyles={{ height: "1rem", marginTop: 7.5 }}
+      />
+      <TabOption
+        active={hideNone ? "enable" : "disable"}
+        options={["disable", "enable"].map((value) => ({
+          text: value,
+          title: value,
+          onClick: () => setHideNone(value === "enable" ? true : false),
+        }))}
+      />
+    </>
+  );
+};
+
 type OptionsProps = {
   modal: boolean;
   anchorRef: RefObject<HTMLElement>;
@@ -282,6 +312,7 @@ const Options = ({ modal, anchorRef }: OptionsProps) => {
 
   return (
     <Popout modal={modal} fixed anchorRef={anchorRef}>
+      {modal && <HideFieldSetting />}
       {isNonNestedDynamicGroup && <DynamicGroupsViewMode modal={modal} />}
       {isGroup && !isDynamicGroup && <GroupStatistics modal={modal} />}
       <MediaFields modal={modal} />

app/packages/core/src/components/Modal/Modal.tsx

@@ -66,6 +66,7 @@ const SampleModal = () => {
     : { width: "95%", height: "90%", borderRadius: "3px" };
   const isGroup = useRecoilValue(fos.isGroup);
   const isPcd = useRecoilValue(fos.isPointcloudDataset);
+  const sampleId = useRecoilValue(fos.currentSampleId);
 
   const clearModal = fos.useClearModal();
   const { jsonPanel, helpPanel, onNavigate } = usePanels();
@@ -91,6 +92,9 @@ const SampleModal = () => {
     [eventHandler]
   );
 
+  const noneValuedPaths = useRecoilValue(fos.noneValuedPaths)?.[sampleId];
+  const hideNoneFields = useRecoilValue(fos.hideNoneValuedFields);
+
   const renderEntry = useCallback(
     (
       key: string,
@@ -104,13 +108,18 @@ const SampleModal = () => {
       ) => void
     ) => {
       switch (entry.kind) {
-        case fos.EntryKind.PATH:
+        case fos.EntryKind.PATH: {
           const isTag = entry.path === "tags";
           const isLabelTag = entry.path === "_label_tags";
           const isLabel = labelPaths.includes(entry.path);
           const isOther = disabled.has(entry.path);
           const isFieldPrimitive =
             !isLabelTag && !isLabel && !isOther && !(isTag && mode === "group");
+
+          if (hideNoneFields && noneValuedPaths?.has(entry?.path)) {
+            return { children: null };
+          }
+
           return {
             children: (
               <>
@@ -146,7 +155,7 @@ const SampleModal = () => {
             ),
             disabled: isTag || isOther,
           };
-
+        }
         case fos.EntryKind.GROUP: {
           return {
             children: (
@@ -180,7 +189,7 @@ const SampleModal = () => {
           throw new Error("invalid entry");
       }
     },
-    [disabled, labelPaths, mode]
+    [disabled, hideNoneFields, labelPaths, mode, noneValuedPaths]
   );
 
   useEffect(() => {

app/packages/core/src/components/Sidebar/Entries/PathValueEntry.tsx

@@ -11,8 +11,8 @@ import {
 } from "@fiftyone/utilities";
 import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
 import { useSpring } from "@react-spring/core";
-import React, { Suspense, useMemo, useState } from "react";
-import { useRecoilValue, useRecoilValueLoadable } from "recoil";
+import React, { Suspense, useEffect, useMemo, useState } from "react";
+import { useRecoilState, useRecoilValue, useRecoilValueLoadable } from "recoil";
 import styled from "styled-components";
 import LoadingDots from "../../../../../components/src/components/Loading/LoadingDots";
 import { prettify } from "../../../utils/generic";
@@ -354,6 +354,19 @@ const Loadable = ({ path }: { path: string }) => {
   const color = useRecoilValue(fos.pathColor(path));
   const timeZone = useRecoilValue(fos.timeZone);
   const formatted = format({ ftype, value, timeZone });
+  const [noneValuedPaths, setNoneValued] = useRecoilState(fos.noneValuedPaths);
+  const sampleId = useRecoilValue(fos.currentSampleId);
+  const noneValued = noneValuedPaths?.[sampleId];
+
+  useEffect(() => {
+    if (none && path && !noneValued?.has(path) && sampleId) {
+      setNoneValued({
+        [sampleId]: noneValued
+          ? new Set([...noneValued]).add(path)
+          : new Set([]),
+      });
+    }
+  }, [noneValued, none, path, setNoneValued, sampleId]);
 
   return (
     <div data-cy={`sidebar-entry-${path}`} style={none ? { color } : {}}>

app/packages/state/src/recoil/atoms.ts

@@ -346,3 +346,18 @@ export const isSidebarFilterMode = atom<boolean>({
   key: "isSidebarFilterMode",
   default: true,
 });
+
+export const hideNoneValuedFields = atom<boolean>({
+  key: "hideNoneValuedFields",
+  default: false,
+  effects: [
+    getBrowserStorageEffectForKey("hideNoneValuedFields", {
+      valueClass: "boolean",
+    }),
+  ],
+});
+
+export const noneValuedPaths = atom<Record<string, Set<string>>>({
+  key: "noneValuedPaths",
+  default: {},
+});