App supports bazel

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

@@ -60,7 +60,7 @@ export const shouldToggleBookMarkIconOnSelector = selector<boolean>({
     const isSimilarityOn = get(fos.similarityParameters);
 
     const affectedPathCount = get(affectedPathCountState);
-    const isFieldVisibilityOn = affectedPathCount > 0;
+    const isAttributeVisibilityOn = affectedPathCount > 0;
 
     const isExtendedSelectionOn =
       (selection && selection.length > 0) || isSimilarityOn;
@@ -69,7 +69,7 @@ export const shouldToggleBookMarkIconOnSelector = selector<boolean>({
       isExtendedSelectionOn ||
         hasFiltersValue ||
         selectedSampleSet.size > 0 ||
-        isFieldVisibilityOn
+        isAttributeVisibilityOn
     );
   },
 });

app/packages/core/src/components/Common/Checkbox.tsx

@@ -1,10 +1,9 @@
+import { useTheme } from "@fiftyone/components";
 import { Checkbox as MaterialCheckbox } from "@mui/material";
 import { animated } from "@react-spring/web";
 import React, { useMemo } from "react";
-import styled from "styled-components";
-
-import { useTheme } from "@fiftyone/components";
 import { constSelector, RecoilValueReadOnly } from "recoil";
+import styled from "styled-components";
 import { prettify } from "../../utils/generic";
 import { ItemAction } from "../Actions/ItemAction";
 import { useHighlightHover } from "../Actions/utils";

app/packages/core/src/components/Filters/NumericFieldFilter.tsx

@@ -125,6 +125,7 @@ const NumericFieldFilter = ({
   color,
 }: Props) => {
   const name = path.split(".").slice(-1)[0];
+  const isFilterMode = useRecoilValue(fos.isSidebarFilterMode);
   const excludeAtom = fos.numericExcludeAtom({
     path,
     modal,
@@ -161,6 +162,9 @@ const NumericFieldFilter = ({
   });
 
   const isFiltered = useRecoilValue(fos.fieldIsFiltered({ modal, path }));
+  const hasVisibilitySetting = useRecoilValue(
+    fos.fieldHasVisibilitySetting({ modal, path })
+  );
 
   const bounded = useRecoilValue(
     fos.boundedCount({ modal, path, extended: false })
@@ -267,7 +271,7 @@ const NumericFieldFilter = ({
             disabled={true}
             name={bounds[0]}
             setValue={() => {}}
-            count={bounded}
+            count={isFilterMode ? bounded : undefined} // visibility mode does not show count
             subcountAtom={fos.boundedCount({
               modal,
               path,
@@ -305,7 +309,7 @@ const NumericFieldFilter = ({
             isKeyPointLabel={isKeyPoints}
           />
         )}
-        {isFiltered && (
+        {(isFiltered || hasVisibilitySetting) && (
           <Button
             text={"Reset"}
             color={color}

app/packages/core/src/components/Filters/categoricalFilter/CategoricalFilter.tsx

@@ -201,9 +201,13 @@ const CategoricalFilter = <T extends V = V>({
     : path.startsWith("_label_tags")
     ? "label tag"
     : name;
-
+  const isFilterMode = useRecoilValue(fos.isSidebarFilterMode);
   const selectedCounts = useRef(new Map<V["value"], number>());
-  const onSelect = useOnSelect(selectedValuesAtom, selectedCounts);
+  const selectVisibility = useRef(new Map<V["value"], number>());
+  const onSelect = useOnSelect(
+    selectedValuesAtom,
+    isFilterMode ? selectedCounts : selectVisibility
+  );
   const useSearch = getUseSearch({ modal, path });
   const skeleton = useRecoilValue(isKeypointLabel(path));
   const theme = useTheme();
@@ -247,7 +251,9 @@ const CategoricalFilter = <T extends V = V>({
           !skeleton && (
             <Selector
               useSearch={useSearch}
-              placeholder={`+ filter by ${name}`}
+              placeholder={`+ ${
+                isFilterMode ? "filter" : "set visibility"
+              } by ${name}`}
               component={ResultComponent}
               onSelect={onSelect}
               inputStyle={{

app/packages/core/src/components/Filters/categoricalFilter/ResultComponent.tsx

@@ -1,7 +1,10 @@
+import * as fos from "@fiftyone/state";
 import React from "react";
+import { useRecoilValue } from "recoil";
 import { V } from "./CategoricalFilter";
 
 const ResultComponent = ({ value: { value, count } }: { value: V }) => {
+  const isFilterMode = useRecoilValue(fos.isSidebarFilterMode);
   return (
     <div
       style={{
@@ -22,7 +25,7 @@ const ResultComponent = ({ value: { value, count } }: { value: V }) => {
       >
         {value}
       </div>
-      <div style={{ fontSize: "1rem" }}>{count}</div>
+      {isFilterMode && <div style={{ fontSize: "1rem" }}>{count}</div>}
     </div>
   );
 };

app/packages/core/src/components/Filters/categoricalFilter/Wrapper.tsx

@@ -1,10 +1,5 @@
 import React, { MutableRefObject } from "react";
-import {
-  RecoilState,
-  useRecoilState,
-  useRecoilValue,
-  useSetRecoilState,
-} from "recoil";
+import { RecoilState, useRecoilState, useRecoilValue } from "recoil";
 
 import * as fos from "@fiftyone/state";
 
@@ -41,11 +36,10 @@ const Wrapper = ({
   const schema = useRecoilValue(fos.field(path));
   const [selected, setSelected] = useRecoilState(selectedValuesAtom);
   const selectedSet = new Set(selected);
-  const setExcluded = excludeAtom ? useSetRecoilState(excludeAtom) : null;
-  const setIsMatching = isMatchingAtom
-    ? useSetRecoilState(isMatchingAtom)
-    : null;
+  const [excluded, setExcluded] = useRecoilState(excludeAtom);
+  const [isMatching, setIsMatching] = useRecoilState(isMatchingAtom);
   const sorting = useRecoilValue(fos.sortFilterResults(modal));
+  const isFilterMode = useRecoilValue(fos.isSidebarFilterMode);
 
   const counts = Object.fromEntries(results);
   let allValues: V[] = selected.map<V>((value) => ({
@@ -83,8 +77,8 @@ const Wrapper = ({
   const isKeyPoints = fieldSchema?.dbField === "keypoints";
 
   const initializeSettings = () => {
-    setExcluded && setExcluded(false);
-    setIsMatching && setIsMatching(!nestedField);
+    excluded && setExcluded(false);
+    setIsMatching(!nestedField);
   };
 
   if (totalCount === 0) {
@@ -111,7 +105,7 @@ const Wrapper = ({
           value={selectedSet.has(value)}
           name={value}
           count={
-            count < 0
+            count < 0 || !isFilterMode
               ? null
               : selectedCounts.current.has(value)
               ? selectedCounts.current.get(value)
@@ -138,7 +132,7 @@ const Wrapper = ({
           {
             <FilterOption
               nestedField={nestedField}
-              shouldNotShowExclude={shouldNotShowExclude}
+              shouldNotShowExclude={Boolean(shouldNotShowExclude)}
               excludeAtom={excludeAtom}
               isMatchingAtom={isMatchingAtom}
               valueName={name}

app/packages/core/src/components/Filters/categoricalFilter/filterOption/FilterItem.tsx

@@ -1,11 +1,13 @@
-import React, { DetailedReactHTMLElement } from "react";
-import styled from "styled-components";
-import { IconButton } from "@mui/material";
+import { Tooltip } from "@fiftyone/components";
 import FilterAltIcon from "@mui/icons-material/FilterAlt";
 import FilterAltOffIcon from "@mui/icons-material/FilterAltOff";
-import ImageIcon from "@mui/icons-material/Image";
 import HideImageIcon from "@mui/icons-material/HideImage";
-import { Tooltip } from "@fiftyone/components";
+import ImageIcon from "@mui/icons-material/Image";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import { IconButton } from "@mui/material";
+import React from "react";
+import styled from "styled-components";
 
 type ItemProp = {
   icon?: string;
@@ -53,6 +55,10 @@ const Item = React.memo(
             return <ImageIcon fontSize="small" />;
           case "hideimageicon":
             return <HideImageIcon fontSize="small" />;
+          case "visibilityicon":
+            return <VisibilityIcon fontSize="small" />;
+          case "visibilityofficon":
+            return <VisibilityOffIcon fontSize="small" />;
         }
       };