feat(web) - helpful hiding functionality for Map view

How does this PR change the system?
This PR adds two hiding features to the Map view to make it easier to navigate and read. One hiding feature hides all credential components from the Map, while the other hides all components which have no connections to any other components. Both features are on by default, with a button to toggle them off.

Both features are behind a feature flag so that we can have our team try them out before rolling anything out to users.

This PR also includes some minor refactoring improvements and style fixes to the area the buttons were added to.

Out of Scope:
These hiding features may be better implemented via a different UI than individual buttons, and we may decide that one or both should be disabled by default instead of enabled by default.

This PR also does not make any other changes to the Map besides these two hiding features.

How was it tested?
Aggressive manual testing with a wide variety of components and configurations.

Does it require a docs change?
Not yet, but if we roll out this feature we will want to update the docs to explain it to users.

Author: wendybujalski

app/web/src/newhotness/Explore.vue

@@ -146,7 +146,14 @@
             </Transition>
           </div>
         </div>
-        <div class="flex-none flex flex-row flex-wrap items-center gap-xs">
+        <div :class="
+          clsx(
+            'flex-none flex flex-row flex-wrap items-center gap-xs',
+            !showGrid && (mapRef?.selectedComponents.size ?? 0) > 0
+            ? 'pr-[440px]' // right padding to accommodate the ExploreGridTile in the Map view
+            : 'max-w-[100vw]', // prevents the buttons from going offscreen on smaller window sizes
+          )"
+        >
           <TabGroupToggle ref="groupRef" :aOrB="urlGridOrMap === 'grid'" @toggle="storeViewMode">
             <template #a="{ selected, toggle }">
               <ExploreModeTile icon="grid" label="Grid" :selected="selected" @toggle="toggle" />
@@ -156,48 +163,46 @@
             </template>
           </TabGroupToggle>
           <template v-if="!showGrid">
-            <button
-              v-if="!ctx.onHead.value"
-              :class="
-                clsx(
-                  'flex flex-row gap-xs items-center border rounded-sm',
-                  'p-2xs mb-[-1px] h-7',
-                  'font-mono text-[13px] text-left truncate relative',
-                  themeClasses(
-                    'border-neutral-400 hover:border-action-500',
-                    'border-neutral-600 hover:border-action-300',
-                  ),
-                  queryOnlyDiff
-                    ? themeClasses('bg-action-200', 'bg-action-900')
-                    : themeClasses('bg-neutral-100', 'bg-neutral-900'),
-                )
-              "
+            <NewButton 
+              tone="toggle"
+              size="xs"
+              label="See only diffs"
+              truncateText
+              icon="tilde-circle"
+              :iconClasses="themeClasses('text-warning-500', 'text-warning-300')"
+              :active="queryOnlyDiff"
               @click="toggleOnlyDiff"
-            >
-              <Icon name="tilde-circle" :class="themeClasses('text-warning-500', 'text-warning-300')" size="xs" />
-              <span>See only diffs</span>
-            </button>
-            <button
-              v-if="mapRef?.selectedComponents.size || 0 > 0"
-              :class="
-                clsx(
-                  'flex flex-row gap-xs items-center border rounded-sm',
-                  'p-2xs mb-[-1px] h-7',
-                  'font-mono text-[13px] text-left truncate relative',
-                  themeClasses(
-                    'border-neutral-400 hover:border-action-500',
-                    'border-neutral-600 hover:border-action-300',
-                  ),
-                  queryHideSubscriptions
-                    ? themeClasses('bg-action-200', 'bg-action-900')
-                    : themeClasses('bg-neutral-100', 'bg-neutral-900'),
-                )
-              "
+            />
+            <NewButton
+              v-if="(mapRef?.selectedComponents.size ?? 0) > 0"
+              tone="toggle"
+              size="xs"
+              label="Hide unconnected components"
+              truncateText
+              icon="hide"
+              :active="queryHideSubscriptions"
               @click="toggleHide"
-            >
-              <Icon name="hide" size="xs" />
-              <span>Hide unconnected components</span>
-            </button>
+            />
+            <template v-if="featureFlagsStore.MAP_VIEW_UPGRADES">
+              <NewButton
+                tone="toggle"
+                size="xs"
+                label="Show credential components"
+                truncateText
+                icon="eye"
+                :active="queryShowCredentials"
+                @click="toggleShowCredentials"
+              />
+              <NewButton
+                tone="toggle"
+                size="xs"
+                label="Show components with no connections"
+                truncateText
+                icon="eye"
+                :active="queryShowNoConnections"
+                @click="toggleShowNoConnections"
+              />
+            </template>
           </template>
           <div v-if="showGrid" class="ml-auto flex flex-row flex-wrap gap-xs">
             <DefaultSubscriptionsButton
@@ -567,6 +572,9 @@ import { ExploreGridRowData } from "./explore_grid/ExploreGridRow.vue";
 import { useDefaultSubscription } from "./logic_composables/default_subscriptions";
 import { useContext } from "./logic_composables/context";
 import { generateMockActions } from "./logic_composables/mock_data";
+import { useFeatureFlagsStore } from "@/store/feature_flags.store";
+
+const featureFlagsStore = useFeatureFlagsStore();
 
 const router = useRouter();
 const route = useRoute();
@@ -630,7 +638,6 @@ const queryOnlyDiff = computed(() => {
   };
   return query.showDiff === "1";
 });
-
 const toggleOnlyDiff = () => {
   const query: SelectionsInQueryString = {
     ...router.currentRoute.value?.query,
@@ -648,7 +655,6 @@ const queryHideSubscriptions = computed(() => {
   };
   return query.hideSubscriptions === "1";
 });
-
 const toggleHide = () => {
   const query: SelectionsInQueryString = {
     ...router.currentRoute.value?.query,
@@ -660,6 +666,40 @@ const toggleHide = () => {
   }
   router.replace({ query });
 };
+const queryShowCredentials = computed(() => {
+  const query: SelectionsInQueryString = {
+    ...router.currentRoute.value?.query,
+  };
+  return query.showCredentials === "1";
+});
+const toggleShowCredentials = () => {
+  const query: SelectionsInQueryString = {
+    ...router.currentRoute.value?.query,
+  };
+  if (queryShowCredentials.value) {
+    delete query.showCredentials;
+  } else {
+    query.showCredentials = "1";
+  }
+  router.replace({ query });
+};
+const queryShowNoConnections = computed(() => {
+  const query: SelectionsInQueryString = {
+    ...router.currentRoute.value?.query,
+  };
+  return query.showNoConnections === "1";
+});
+const toggleShowNoConnections = () => {
+  const query: SelectionsInQueryString = {
+    ...router.currentRoute.value?.query,
+  };
+  if (queryShowNoConnections.value) {
+    delete query.showNoConnections;
+  } else {
+    query.showNoConnections = "1";
+  }
+  router.replace({ query });
+};
 
 const urlGridOrMap = computed((): "grid" | "map" => {
   const q: SelectionsInQueryString = router.currentRoute.value?.query;

app/web/src/newhotness/Map.vue

@@ -57,7 +57,8 @@ export type GraphData = {
     id="map"
     :class="
       clsx(
-        'grid h-full',
+        'grid h-full border-t',
+        themeClasses('border-neutral-200 bg-white', 'border-neutral-800 bg-neutral-900'),
         showSkeleton && 'hidden', // Since the svgs need a target to be drawn, we need to have this in the DOM
       )
     "
@@ -247,12 +248,15 @@ import { pickBrandIconByString } from "./util";
 import ComponentContextMenu from "./ComponentContextMenu.vue";
 import { truncateString } from "./logic_composables/string_funcs";
 import MiniMap from "./MiniMap.vue";
+import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 
 const MAX_STRING_LENGTH = 18;
 
 const router = useRouter();
 const { theme } = useTheme();
 
+const featureFlagsStore = useFeatureFlagsStore();
+
 const props = defineProps<{
   active: boolean;
   components: ComponentInList[];
@@ -955,6 +959,8 @@ const onEscape = () => {
     delete query.map;
     delete query.c;
     delete query.hideSubscriptions; // Also clear hideSubscriptions when closing map
+    delete query.showCredentials; // Also clear showCredentials when closing map
+    delete query.showNoConnections; // Also clear showNoConnections when closing map
     delete query.showDiff;
     query.grid = "1";
     router.push({ query });
@@ -1052,6 +1058,13 @@ const connections = useQuery<IncomingConnections[]>({
   },
 });
 
+const isCredentialSchema = (schemaName: string | undefined) => {
+  if (schemaName) {
+    return schemaName.toLowerCase().includes("credential");
+  }
+  return false;
+};
+
 const mapData = computed(() => {
   const nodes = new Set<string>();
   const edges = new Set<string>();
@@ -1064,6 +1077,8 @@ const mapData = computed(() => {
   const shouldHideUnconnected = router.currentRoute.value.query.hideSubscriptions === "1";
 
   const showOnlyDiff = router.currentRoute.value.query.showDiff === "1";
+  const showCredentials = router.currentRoute.value.query.showCredentials === "1" || !featureFlagsStore.MAP_VIEW_UPGRADES;
+  const showNoConnections = router.currentRoute.value.query.showNoConnections === "1" || !featureFlagsStore.MAP_VIEW_UPGRADES;
 
   const hasSelectedComponents = selectedComponents.value.size > 0;
 
@@ -1074,7 +1089,14 @@ const mapData = computed(() => {
   connections.data.value.forEach((c) => {
     const component = componentsById.value[c.id];
     if (!component) return;
+    // If showOnlyDiff is enabled, only show components with diffs
     if (showOnlyDiff && component.diffStatus === "None") return;
+
+    // If showCredentials is disabled, hide components which are credentials
+    if (!showCredentials && isCredentialSchema(component.schemaName)) {
+      return;
+    }
+
     allComponents.set(c.id, component);
 
     c.connections.forEach((e) => {
@@ -1085,6 +1107,41 @@ const mapData = computed(() => {
     });
   });
 
+  // If showNoConnections is disabled, filter out components which have no connections
+  if (!showNoConnections) {
+    allComponents.forEach((component) => {
+      let keepComponent = false;
+      for (const connection of allConnections) {
+        if (connection.includes(component.id)) {
+          if (showCredentials) {
+            // if showCredentials is true then this is a valid connection
+            keepComponent = true;
+            break;
+          } else {
+            // otherwise, filter out connections to a credential
+            const ids = connection.split("-");
+            const id1 = ids[0];
+            const id2 = ids[1];
+            if (
+              (id1 && isCredentialSchema(componentsById.value[id1]?.schemaName)) ||
+              (id2 && isCredentialSchema(componentsById.value[id2]?.schemaName)) 
+            ) {
+              // one of the components connected via this connection is a credential, so ignore it
+              continue;
+            } else {
+              // this connection is a valid one
+              keepComponent = true;
+              break;
+            }
+          }
+        }
+      }
+      if (!keepComponent) {
+        allComponents.delete(component.id)
+      }
+    });
+  }
+
   // If we're in hideSubscriptions mode and have selected components, filter the data
   if (shouldHideUnconnected && hasSelectedComponents) {
     // Get the connected component IDs (including selected ones)
@@ -1098,6 +1155,9 @@ const mapData = computed(() => {
     // Add directly connected components
     selectedComponents.value.forEach((selectedComp) => {
       if (showOnlyDiff && selectedComp.diffStatus === "None") return;
+      if (!showCredentials && isCredentialSchema(selectedComp.schemaName)) {
+        return;
+      }
 
       const selectedId = selectedComp.id;
 
@@ -1132,7 +1192,10 @@ const mapData = computed(() => {
   } else {
     // Normal mode: include all components
     allComponents.forEach((component, componentId) => {
-      if (!showOnlyDiff || (showOnlyDiff && component.diffStatus !== "None")) {
+      if (
+        (showCredentials || !isCredentialSchema(component.schemaName)) &&
+        (!showOnlyDiff || component.diffStatus !== "None")
+      ) {
         nodes.add(componentId);
         components[componentId] = component;
       }

app/web/src/newhotness/Workspace.vue

@@ -542,6 +542,8 @@ export type SelectionsInQueryString = Partial<{
   retainSessionState: string; // If set, the component should load up with the last state it had on this tab. Used by Explore.vue
   hideSubscriptions: string; // Flag to hide unconnected components when navigating to map
   showDiff: string; // Flag to show only components with diff on the map
+  showCredentials: string; // Flag to show or hide credential components from the map
+  showNoConnections: string; // Flag to show or hide components with no subscriptions from the map
 }>;
 
 const tokenFailStatus = ref();

app/web/src/newhotness/skeletons/ExploreMapSkeleton.vue

@@ -1,6 +1,11 @@
 <template>
   <DelayedComponent>
-    <section :class="clsx('h-full w-full', themeClasses('bg-white', 'bg-neutral-950'))">
+    <section :class="
+      clsx(
+        'h-full w-full border-t',
+        themeClasses('border-neutral-200 bg-white', 'border-neutral-800 bg-neutral-900'),
+      )
+    ">
       <div
         :class="
           clsx(

app/web/src/pages/DebugPage.vue

@@ -231,6 +231,8 @@ const getButtonTooltip = (variant: string) => {
     return "The nostyle variant is used to clear ALL styles";
   } else if (variant === "flat") {
     return "Similar to the neutral style, but meant to have the same bg color as the things it is sitting on top of (e.g. appear to not have a separate bg color)";
+  } else if (variant === "toggle") {
+    return "A special tone used only for the buttons at the top of the Explore page in the area below the search bar";
   } else {
     return undefined;
   }

app/web/src/store/feature_flags.store.ts

@@ -19,6 +19,7 @@ const USER_FLAG_MAPPING = {
   SHOW_WS_DISCONNECT: "show-ws-disconnect",
   SHOW_POLICIES: "show-policies",
   SHOW_AUTHORING_NAV: "authoring-in-nav",
+  MAP_VIEW_UPGRADES: "map-view-upgrades",
 } as const;
 const WORKSPACE_FLAG_MAPPING: Record<string, string> = {
   // STORE_FLAG_NAME: "posthogFlagName",