add hide overlay support

voxel51 · May 26, 2022 · 70481db · 70481db
1 parent 1a9c9bf
commit 70481db
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 2 deletions.
diff --git a/app/packages/app/src/components/Looker.tsx b/app/packages/app/src/components/Looker.tsx
@@ -404,6 +404,7 @@ const lookerOptions = selector({
       ...get(atoms.savedLookerOptions),
       selectedLabels: [...get(selectors.selectedLabelIds)],
       fullscreen: get(atoms.fullscreen),
+      showOverlays: get(atoms.showOverlays),
       timeZone: get(selectors.timeZone),
       coloring: get(colorAtoms.coloring(true)),
       alpha: get(atoms.alpha(true)),
@@ -436,6 +437,12 @@ const useFullscreen = () => {
   });
 };
 
+const useShowOverlays = () => {
+  return useRecoilCallback(({ set }) => async (event: CustomEvent) => {
+    set(atoms.showOverlays, event.detail);
+  });
+};
+
 const useClearSelectedLabels = () => {
   return useRecoilCallback(
     ({ set }) => async () => set(atoms.selectedLabels, {}),
@@ -535,6 +542,8 @@ const Looker = ({
   const headerRef = useRef<HTMLElement>();
   useEventHandler(looker, "options", useLookerOptionsUpdate());
   useEventHandler(looker, "fullscreen", useFullscreen());
+  useEventHandler(looker, "showOverlays", useShowOverlays());
+
   onNext && useEventHandler(looker, "next", onNext);
   onPrevious && useEventHandler(looker, "previous", onPrevious);
   onClose && useEventHandler(looker, "close", onClose);

diff --git a/app/packages/app/src/recoil/atoms.ts b/app/packages/app/src/recoil/atoms.ts
@@ -68,6 +68,11 @@ export const fullscreen = atom<boolean>({
   default: false,
 });
 
+export const showOverlays = atom<boolean>({
+  key: "showOverlays",
+  default: true,
+});
+
 export const teams = atom({
   key: "teams",
   default: {

diff --git a/app/packages/looker/src/elements/common/actions.ts b/app/packages/looker/src/elements/common/actions.ts
@@ -142,6 +142,25 @@ export const previous: Control = {
   },
 };
 
+
+export const toggleOverlays: Control = {
+  title: "Show/hide overlays",
+  shortcut: "h",
+  eventKeys: "h",
+  detail: "Toggles visibility of all overlays",
+  action: (update, dispatchEvent) => {
+    update(
+      ({ config: { thumbnail }, options: { showOverlays } }) =>
+        thumbnail ? {} : { options: { showOverlays: !showOverlays } },
+      ({ config: { thumbnail }, options: { showOverlays } }) => {
+        if (!thumbnail) {
+          dispatchEvent("showOverlays", showOverlays);
+        }
+      }
+    );
+  },
+};
+
 export const rotatePrevious: Control = {
   title: "Rotate label forward",
   shortcut: "&#8595;",
@@ -398,6 +417,7 @@ export const COMMON = {
   fullscreen,
   json,
   wheel,
+  toggleOverlays
 };
 
 export const COMMON_SHORTCUTS = readActions(COMMON);

diff --git a/app/packages/looker/src/elements/common/controls.module.css b/app/packages/looker/src/elements/common/controls.module.css
@@ -10,7 +10,7 @@
   z-index: 20;
   padding-bottom: 0.25rem;
   display: grid;
-  grid-template-columns: 0.5rem max-content max-content max-content max-content 1fr max-content max-content max-content max-content max-content max-content max-content max-content max-content 0.5rem;
+  grid-template-columns: 0.5rem max-content max-content max-content max-content 1fr max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content 0.5rem;
   grid-gap: 0.25rem;
   justify-items: center;
   align-items: center;

diff --git a/app/packages/looker/src/elements/common/controls.ts b/app/packages/looker/src/elements/common/controls.ts
@@ -15,6 +15,7 @@ import {
   zoomOut,
   cropToContent,
   json,
+  toggleOverlays
 } from "./actions";
 import cropIcon from "../../icons/crop.svg";
 import jsonIcon from "../../icons/json.svg";
@@ -223,6 +224,49 @@ export class FullscreenButtonElement<
   }
 }
 
+
+export class ToggleOverlaysButtonElement<
+  State extends BaseState
+> extends BaseElement<State, HTMLImageElement> {
+  private overlaysVisible: boolean;
+
+  getEvents(): Events<State> {
+    return {
+      click: ({ event, update, dispatchEvent }) => {
+        event.stopPropagation();
+        event.preventDefault();
+        toggleOverlays.action(update, dispatchEvent);
+      },
+    };
+  }
+
+  createHTMLElement() {
+    const element = document.createElement("img");
+    element.classList.add(lookerClickable);
+    element.style.padding = "2px";
+    element.style.gridArea = "2 / 14 / 2 / 14";
+    return element;
+  }
+
+  renderSelf({ options: { showOverlays } }: Readonly<State>) {
+    if (this.overlaysVisible !== showOverlays) {
+      this.overlaysVisible = showOverlays;
+
+      if (showOverlays) {
+        this.element.title = `Hide all overlays (h)`;
+        this.element.classList.remove(lookerControlActive);
+        this.element.src = ICONS.overlaysHidden;
+      } else {
+        this.element.title = `Show all overlays (h)`;
+        this.element.classList.add(lookerControlActive);
+        this.element.src = ICONS.overlaysVisible;
+      }
+    }
+
+    return this.element;
+  }
+}
+
 export class PlusElement<State extends BaseState> extends BaseElement<
   State,
   HTMLImageElement
@@ -302,7 +346,7 @@ export class HelpButtonElement<State extends BaseState> extends BaseElement<
     element.style.padding = "2px";
     element.src = ICONS.help;
     element.title = "Help (?)";
-    element.style.gridArea = "2 / 14 / 2 / 14";
+    element.style.gridArea = "2 / 16 / 2 / 16";
     return element;
   }
 

diff --git a/app/packages/looker/src/elements/index.ts b/app/packages/looker/src/elements/index.ts
@@ -56,6 +56,7 @@ export const getFrameElements: GetElements<FrameState> = (
           { node: common.MinusElement },
           { node: common.CropToContentButtonElement },
           { node: common.FullscreenButtonElement },
+          { node: common.ToggleOverlaysButtonElement },
           { node: common.JSONButtonElement },
           { node: common.OptionsButtonElement },
           { node: common.HelpButtonElement },
@@ -123,6 +124,7 @@ export const getImageElements: GetElements<ImageState> = (
           { node: common.MinusElement },
           { node: common.CropToContentButtonElement },
           { node: common.FullscreenButtonElement },
+          { node: common.ToggleOverlaysButtonElement },
           { node: common.JSONButtonElement },
           { node: common.OptionsButtonElement },
           { node: common.HelpButtonElement },
@@ -199,6 +201,7 @@ export const getVideoElements: GetElements<VideoState> = (
           { node: common.MinusElement },
           { node: common.CropToContentButtonElement },
           { node: common.FullscreenButtonElement },
+          { node: common.ToggleOverlaysButtonElement },
           { node: common.JSONButtonElement },
           { node: common.OptionsButtonElement },
           { node: common.HelpButtonElement },

diff --git a/app/packages/looker/src/elements/util.ts b/app/packages/looker/src/elements/util.ts
@@ -24,6 +24,10 @@ export const ICONS = Object.freeze({
     "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath fill='rgb(238, 238, 238)' d='M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z' /%3E%3C/svg%3E",
   options:
     "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(238, 238, 238)' d='M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z' /%3E%3C/svg%3E",
+  overlaysVisible:
+    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(238, 238, 238)' d='M16,17H5V7H16L19.55,12M17.63,5.84C17.27,5.33 16.67,5 16,5H5A2,2 0 0,0 3,7V17A2,2 0 0,0 5,19H16C16.67,19 17.27,18.66 17.63,18.15L22,12L17.63,5.84Z' /%3E%3C/svg%3E",
+  overlaysHidden:
+    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(238, 238, 238)' d='M2,4.27L3.28,3L20,19.72L18.73,21L16.63,18.9C16.43,18.96 16.22,19 16,19H5A2,2 0 0,1 3,17V7C3,6.5 3.17,6.07 3.46,5.73L2,4.27M5,17H14.73L5,7.27V17M19.55,12L16,7H9.82L7.83,5H16C16.67,5 17.27,5.33 17.63,5.84L22,12L19,16.2L17.59,14.76L19.55,12Z' /%3E%3C/svg%3E"
 });
 
 export type DispatchEvent = (eventType: string, details?: any) => void;

diff --git a/app/packages/looker/src/processOverlays.ts b/app/packages/looker/src/processOverlays.ts
@@ -18,6 +18,10 @@ const processOverlays = <State extends BaseState>(
 
   let classifications = null;
 
+  if (!state.config.thumbnail && !state.options.showOverlays) {
+    return [[], 0];
+  }
+
   for (const overlay of overlays) {
     if (overlay instanceof ClassificationsOverlay) {
       classifications = overlay;

diff --git a/app/packages/looker/src/state.ts b/app/packages/looker/src/state.ts
@@ -86,6 +86,7 @@ interface BaseOptions {
   showIndex: boolean;
   showJSON: boolean;
   showLabel: boolean;
+  showOverlays: boolean;
   showTooltip: boolean;
   onlyShowHoveredLabel: boolean;
   smoothMasks: boolean;