Merge pull request #8331 from systeminit/wendy/map-upgrades-pt1

feat(web) - helpful hiding functionality for Map view

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",