From 09de149c390b87b6c59ee49621ee1ff9fe933d6e Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 10 Mar 2022 10:10:10 -0500
Subject: [PATCH 1/8] initial testing

---
 .../components/ImageEnhancements.vue          | 57 +++++++++++++++++++
 client/dive-common/components/Viewer.vue      | 22 ++++++-
 client/dive-common/store/context.ts           |  2 +
 .../components/annotators/ImageAnnotator.vue  |  7 +++
 client/src/components/controls/Controls.vue   | 13 +++++
 client/src/provides.ts                        | 14 ++++-
 client/src/types.ts                           |  5 ++
 7 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 client/dive-common/components/ImageEnhancements.vue

diff --git a/client/dive-common/components/ImageEnhancements.vue b/client/dive-common/components/ImageEnhancements.vue
new file mode 100644
index 000000000..f2898f6ac
--- /dev/null
+++ b/client/dive-common/components/ImageEnhancements.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+
+import { useApi } from 'dive-common/apispec';
+import { useHandler, useSVGFilters } from 'vue-media-annotator/provides';
+
+export default defineComponent({
+  name: 'ImageEnhancements',
+  description: 'Image controls',
+  setup() {
+    const filterData = useSVGFilters();
+    const { setSVGFilters } = useHandler();
+    const range = ref([0, 1]);
+    const level = ref(1);
+
+    const modifyValue = () => {
+      const slope = level.value / (range.value[1] - range.value[0]);
+      const intercept = -(level.value * range.value[0]) / (range.value[1] - range.value[0]);
+      setSVGFilters({ brightness: slope, intercept });
+    };
+    return {
+      modifyValue,
+      range,
+      level,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="mx-4">
+    <span class="text-body-2">
+      Controls for adjusting white balance of images.
+    </span>
+    <v-range-slider
+      v-model="range"
+      :min="0"
+      :max="1"
+      :step="0.01"
+      thumb-label="always"
+      label="Low/High"
+      @change="modifyValue"
+    />
+    <v-slider
+      v-model="level"
+      :min="-10"
+      :max="10"
+      :step="0.01"
+      thumb-label="always"
+      label="Level"
+      @change="modifyValue"
+    />
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 6d9d29e86..b0e37b5ee 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -41,6 +41,7 @@ import { useApi, FrameImage, DatasetType } from 'dive-common/apispec';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { cloneDeep } from 'lodash';
 import { getResponseError } from 'vue-media-annotator/utils';
+import { SVGFilters } from 'vue-media-annotator/types';
 import context from 'dive-common/store/context';
 
 export default defineComponent({
@@ -390,6 +391,18 @@ export default defineComponent({
       const newId = `${baseMulticamDatasetId.value}/${camera}`;
       ctx.emit('update:id', newId);
     };
+    const svgFilters: Ref<SVGFilters> = ref({});
+    const brightnessRef = ref(1);
+    const interceptRef = ref(0);
+    const setSVGFilters = ({ brightness, intercept }:
+    {brightness?: number; intercept?: number }) => {
+      svgFilters.value.brightness = brightness;
+      svgFilters.value.intercept = intercept;
+      if (brightness !== undefined && intercept !== undefined) {
+        brightnessRef.value = brightness;
+        interceptRef.value = intercept;
+      }
+    };
 
     const globalHandler = {
       ...handler,
@@ -405,6 +418,7 @@ export default defineComponent({
       setConfidenceFilters,
       deleteAttribute,
       reloadAnnotations,
+      setSVGFilters,
     };
 
     provideAnnotator(
@@ -431,6 +445,7 @@ export default defineComponent({
         time,
         visibleModes,
         readOnlyMode: readonlyState,
+        svgFilters,
       },
       globalHandler,
     );
@@ -465,6 +480,9 @@ export default defineComponent({
       originalFps: time.originalFps,
       context,
       readonlyState,
+      svgFilters,
+      brightnessRef,
+      interceptRef,
       /* methods */
       handler: globalHandler,
       save,
@@ -626,7 +644,9 @@ export default defineComponent({
             { bind: 'r', handler: () => mediaController.resetZoom() },
             { bind: 'esc', handler: () => handler.trackAbort() },
           ]"
-          v-bind="{ imageData, videoUrl, updateTime, frameRate, originalFps }"
+          v-bind="{ imageData, videoUrl, updateTime, frameRate,
+                    originalFps, brightness: brightnessRef, intercept: interceptRef,
+          }"
           class="playback-component"
         >
           <template slot="control">
diff --git a/client/dive-common/store/context.ts b/client/dive-common/store/context.ts
index 7356802bc..dfa6c333f 100644
--- a/client/dive-common/store/context.ts
+++ b/client/dive-common/store/context.ts
@@ -2,12 +2,14 @@ import Install, { reactive } from '@vue/composition-api';
 import Vue from 'vue';
 /* Components */
 import TypeThreshold from 'dive-common/components/TypeThreshold.vue';
+import ImageEnhancements from 'dive-common/components/ImageEnhancements.vue';
 
 Vue.use(Install);
 
 
 const componentMap = {
   TypeThreshold,
+  ImageEnhancements,
 };
 
 type ContextType = keyof typeof componentMap;
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index cdde8cd05..bec726497 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -47,6 +47,10 @@ export default defineComponent({
       type: Number as PropType<number | undefined>,
       default: undefined,
     },
+    intercept: {
+      type: Number as PropType<number | undefined>,
+      default: undefined,
+    },
   },
 
   setup(props) {
@@ -415,14 +419,17 @@ export default defineComponent({
             <feFuncR
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
             <feFuncG
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
             <feFuncB
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
           </feComponentTransfer>
         </filter>
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index aa0ed6d42..5e55d9b1d 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent, reactive, watch } from '@vue/composition-api';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
+import context from 'dive-common/store/context';
 import { injectMediaController } from '../annotators/useMediaController';
 
 export default defineComponent({
@@ -41,6 +42,10 @@ export default defineComponent({
       }
     }
 
+    function toggleEnhancements() {
+      context.toggle('ImageEnhancements');
+    }
+
     return {
       data,
       mediaController,
@@ -48,6 +53,7 @@ export default defineComponent({
       input,
       togglePlay,
       visible,
+      toggleEnhancements,
     };
   },
 });
@@ -146,6 +152,13 @@ export default defineComponent({
             @click="mediaController.resetZoom"
           >
             <v-icon>mdi-image-filter-center-focus</v-icon>
+          </v-btn><v-btn
+            icon
+            small
+            title="Image Enhancements"
+            @click="toggleEnhancements"
+          >
+            <v-icon>mdi-image</v-icon>
           </v-btn>
         </v-col>
       </v-row>
diff --git a/client/src/provides.ts b/client/src/provides.ts
index 35e547d72..e440a499b 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -3,7 +3,7 @@ import {
   provide, inject, ref, Ref,
 } from '@vue/composition-api';
 
-import { AnnotatorPreferences as AnnotatorPrefsIface } from './types';
+import { AnnotatorPreferences as AnnotatorPrefsIface, SVGFilters } from './types';
 import { CustomStyle, StateStyles, TypeStyling } from './use/useStyling';
 import { EditAnnotationTypes } from './layers/EditAnnotationLayer';
 import Track, { TrackId } from './track';
@@ -84,6 +84,9 @@ type VisibleModesType = Readonly<Ref<readonly VisibleAnnotationTypes[]>>;
 const ReadOnlyModeSymbol = Symbol('readOnlyMode');
 type ReadOnylModeType = Readonly<Ref<boolean>>;
 
+const SVGFiltersSymbol = Symbol('svgFilters');
+type SVGFiltersType = Readonly<Ref<SVGFilters>>;
+
 /**
  * Handler interface describes all global events mutations
  * for above state
@@ -158,6 +161,7 @@ export interface Handler {
   unstageFromMerge(ids: TrackId[]): void;
   /* Reload Annotation File */
   reloadAnnotations(): Promise<void>;
+  setSVGFilters({ brightness, intercept }: {brightness?: number; intercept?: number}): void;
 }
 const HandlerSymbol = Symbol('handler');
 
@@ -196,6 +200,7 @@ function dummyHandler(handle: (name: string, args: unknown[]) => void): Handler
     commitMerge(...args) { handle('commitMerge', args); },
     unstageFromMerge(...args) { handle('unstageFromMerge', args); },
     reloadAnnotations(...args) { handle('reloadTracks', args); return Promise.resolve(); },
+    setSVGFilters(...args) { handle('setSVGFilter', args); },
   };
 }
 
@@ -229,6 +234,7 @@ export interface State {
   time: TimeType;
   visibleModes: VisibleModesType;
   readOnlyMode: ReadOnylModeType;
+  svgFilters: SVGFiltersType;
 }
 
 /**
@@ -284,6 +290,7 @@ function dummyState(): State {
     },
     visibleModes: ref(['rectangle', 'text'] as VisibleAnnotationTypes[]),
     readOnlyMode: ref(false),
+    svgFilters: ref({}),
   };
 }
 
@@ -318,6 +325,7 @@ function provideAnnotator(state: State, handler: Handler) {
   provide(TimeSymbol, state.time);
   provide(VisibleModesSymbol, state.visibleModes);
   provide(ReadOnlyModeSymbol, state.readOnlyMode);
+  provide(SVGFiltersSymbol, state.svgFilters);
   provide(HandlerSymbol, handler);
 }
 
@@ -421,6 +429,9 @@ function useVisibleModes() {
 function useReadOnlyMode() {
   return use<ReadOnylModeType>(ReadOnlyModeSymbol);
 }
+function useSVGFilters() {
+  return use<SVGFiltersType>(SVGFiltersSymbol);
+}
 
 export {
   dummyHandler,
@@ -450,4 +461,5 @@ export {
   useTime,
   useVisibleModes,
   useReadOnlyMode,
+  useSVGFilters,
 };
diff --git a/client/src/types.ts b/client/src/types.ts
index a02011d23..a4620f0ad 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -9,3 +9,8 @@ export interface AnnotatorPreferences {
     after: number;
   };
 }
+
+export interface SVGFilters {
+  brightness?: number;
+  intercept?: number;
+}

From 791e0c6512f3571a606332907343447d3ff6a264 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 14 Mar 2022 12:26:46 -0400
Subject: [PATCH 2/8] modifying slightly

---
 client/dive-common/components/ImageEnhancements.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/client/dive-common/components/ImageEnhancements.vue b/client/dive-common/components/ImageEnhancements.vue
index f2898f6ac..be7ed263b 100644
--- a/client/dive-common/components/ImageEnhancements.vue
+++ b/client/dive-common/components/ImageEnhancements.vue
@@ -39,16 +39,7 @@ export default defineComponent({
       :step="0.01"
       thumb-label="always"
       label="Low/High"
-      @change="modifyValue"
-    />
-    <v-slider
-      v-model="level"
-      :min="-10"
-      :max="10"
-      :step="0.01"
-      thumb-label="always"
-      label="Level"
-      @change="modifyValue"
+      @input="modifyValue"
     />
   </div>
 </template>

From 6fa2e53c3789f236340c2279c4f0d6ce50250aa2 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 15 Mar 2022 14:18:01 -0400
Subject: [PATCH 3/8] restructuring

---
 .../components/ImageEnhancements.vue          | 16 +++--
 client/dive-common/components/Viewer.vue      | 32 +++++-----
 client/src/components/controls/Controls.vue   |  2 +-
 client/src/provides.ts                        | 21 +++----
 client/src/types.ts                           |  5 --
 client/src/use/index.ts                       |  2 +
 client/src/use/useImageEnhancements.ts        | 58 +++++++++++++++++++
 7 files changed, 92 insertions(+), 44 deletions(-)
 create mode 100644 client/src/use/useImageEnhancements.ts

diff --git a/client/dive-common/components/ImageEnhancements.vue b/client/dive-common/components/ImageEnhancements.vue
index be7ed263b..d8abaa567 100644
--- a/client/dive-common/components/ImageEnhancements.vue
+++ b/client/dive-common/components/ImageEnhancements.vue
@@ -1,27 +1,25 @@
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api';
 
-import { useApi } from 'dive-common/apispec';
-import { useHandler, useSVGFilters } from 'vue-media-annotator/provides';
+import { useHandler, useImageEnhancements } from 'vue-media-annotator/provides';
 
 export default defineComponent({
   name: 'ImageEnhancements',
   description: 'Image controls',
   setup() {
-    const filterData = useSVGFilters();
     const { setSVGFilters } = useHandler();
-    const range = ref([0, 1]);
-    const level = ref(1);
+    const imageEnhancements = useImageEnhancements();
+    const range = ref([
+      imageEnhancements.value.blackPoint ?? 0,
+      imageEnhancements.value.blackPoint ?? 1,
+    ]);
 
     const modifyValue = () => {
-      const slope = level.value / (range.value[1] - range.value[0]);
-      const intercept = -(level.value * range.value[0]) / (range.value[1] - range.value[0]);
-      setSVGFilters({ brightness: slope, intercept });
+      setSVGFilters({ blackPoint: range.value[0], whitePoint: range.value[1] });
     };
     return {
       modifyValue,
       range,
-      level,
     };
   },
 });
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index b0e37b5ee..ba3498cdf 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -8,6 +8,7 @@ import type { Vue } from 'vue/types/vue';
 import Track, { TrackId } from 'vue-media-annotator/track';
 import {
   useAttributes,
+  useImageEnhancements,
   useLineChart,
   useStyling,
   useTrackFilters,
@@ -41,7 +42,6 @@ import { useApi, FrameImage, DatasetType } from 'dive-common/apispec';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { cloneDeep } from 'lodash';
 import { getResponseError } from 'vue-media-annotator/utils';
-import { SVGFilters } from 'vue-media-annotator/types';
 import context from 'dive-common/store/context';
 
 export default defineComponent({
@@ -125,6 +125,14 @@ export default defineComponent({
       pendingSaveCount,
     } = useSave(datasetId, readonlyState);
 
+    const {
+      imageEnhancements,
+      loadImageEnhancements,
+      brightness,
+      intercept,
+      setSVGFilters,
+    } = useImageEnhancements({ markChangesPending });
+
     const recipes = [
       new PolygonBase(),
       new HeadTail(),
@@ -391,19 +399,6 @@ export default defineComponent({
       const newId = `${baseMulticamDatasetId.value}/${camera}`;
       ctx.emit('update:id', newId);
     };
-    const svgFilters: Ref<SVGFilters> = ref({});
-    const brightnessRef = ref(1);
-    const interceptRef = ref(0);
-    const setSVGFilters = ({ brightness, intercept }:
-    {brightness?: number; intercept?: number }) => {
-      svgFilters.value.brightness = brightness;
-      svgFilters.value.intercept = intercept;
-      if (brightness !== undefined && intercept !== undefined) {
-        brightnessRef.value = brightness;
-        interceptRef.value = intercept;
-      }
-    };
-
     const globalHandler = {
       ...handler,
       save,
@@ -445,7 +440,7 @@ export default defineComponent({
         time,
         visibleModes,
         readOnlyMode: readonlyState,
-        svgFilters,
+        imageEnhancements,
       },
       globalHandler,
     );
@@ -480,9 +475,8 @@ export default defineComponent({
       originalFps: time.originalFps,
       context,
       readonlyState,
-      svgFilters,
-      brightnessRef,
-      interceptRef,
+      brightness,
+      intercept,
       /* methods */
       handler: globalHandler,
       save,
@@ -645,7 +639,7 @@ export default defineComponent({
             { bind: 'esc', handler: () => handler.trackAbort() },
           ]"
           v-bind="{ imageData, videoUrl, updateTime, frameRate,
-                    originalFps, brightness: brightnessRef, intercept: interceptRef,
+                    originalFps, brightness, intercept,
           }"
           class="playback-component"
         >
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index 5e55d9b1d..651b38a66 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -158,7 +158,7 @@ export default defineComponent({
             title="Image Enhancements"
             @click="toggleEnhancements"
           >
-            <v-icon>mdi-image</v-icon>
+            <v-icon>mdi-contrast-box</v-icon>
           </v-btn>
         </v-col>
       </v-row>
diff --git a/client/src/provides.ts b/client/src/provides.ts
index e440a499b..db9986da3 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -3,7 +3,7 @@ import {
   provide, inject, ref, Ref,
 } from '@vue/composition-api';
 
-import { AnnotatorPreferences as AnnotatorPrefsIface, SVGFilters } from './types';
+import { AnnotatorPreferences as AnnotatorPrefsIface } from './types';
 import { CustomStyle, StateStyles, TypeStyling } from './use/useStyling';
 import { EditAnnotationTypes } from './layers/EditAnnotationLayer';
 import Track, { TrackId } from './track';
@@ -12,6 +12,7 @@ import { RectBounds } from './utils';
 import { Attribute } from './use/useAttributes';
 import { DefaultConfidence, TrackWithContext } from './use/useTrackFilters';
 import { Time } from './use/useTimeObserver';
+import { ImageEnhancements } from './use/useImageEnhancements';
 
 /**
  * Type definitions are read only because injectors may mutate internal state,
@@ -84,8 +85,8 @@ type VisibleModesType = Readonly<Ref<readonly VisibleAnnotationTypes[]>>;
 const ReadOnlyModeSymbol = Symbol('readOnlyMode');
 type ReadOnylModeType = Readonly<Ref<boolean>>;
 
-const SVGFiltersSymbol = Symbol('svgFilters');
-type SVGFiltersType = Readonly<Ref<SVGFilters>>;
+const ImageEnhancementsSymbol = Symbol('imageEnhancements');
+type ImageEnhancementsType = Readonly<Ref<ImageEnhancements>>;
 
 /**
  * Handler interface describes all global events mutations
@@ -161,7 +162,7 @@ export interface Handler {
   unstageFromMerge(ids: TrackId[]): void;
   /* Reload Annotation File */
   reloadAnnotations(): Promise<void>;
-  setSVGFilters({ brightness, intercept }: {brightness?: number; intercept?: number}): void;
+  setSVGFilters({ blackPoint, whitePoint }: {blackPoint?: number; whitePoint?: number}): void;
 }
 const HandlerSymbol = Symbol('handler');
 
@@ -234,7 +235,7 @@ export interface State {
   time: TimeType;
   visibleModes: VisibleModesType;
   readOnlyMode: ReadOnylModeType;
-  svgFilters: SVGFiltersType;
+  imageEnhancements: ImageEnhancementsType;
 }
 
 /**
@@ -290,7 +291,7 @@ function dummyState(): State {
     },
     visibleModes: ref(['rectangle', 'text'] as VisibleAnnotationTypes[]),
     readOnlyMode: ref(false),
-    svgFilters: ref({}),
+    imageEnhancements: ref({}),
   };
 }
 
@@ -325,7 +326,7 @@ function provideAnnotator(state: State, handler: Handler) {
   provide(TimeSymbol, state.time);
   provide(VisibleModesSymbol, state.visibleModes);
   provide(ReadOnlyModeSymbol, state.readOnlyMode);
-  provide(SVGFiltersSymbol, state.svgFilters);
+  provide(ImageEnhancementsSymbol, state.imageEnhancements);
   provide(HandlerSymbol, handler);
 }
 
@@ -429,8 +430,8 @@ function useVisibleModes() {
 function useReadOnlyMode() {
   return use<ReadOnylModeType>(ReadOnlyModeSymbol);
 }
-function useSVGFilters() {
-  return use<SVGFiltersType>(SVGFiltersSymbol);
+function useImageEnhancements() {
+  return use<ImageEnhancementsType>(ImageEnhancementsSymbol);
 }
 
 export {
@@ -461,5 +462,5 @@ export {
   useTime,
   useVisibleModes,
   useReadOnlyMode,
-  useSVGFilters,
+  useImageEnhancements,
 };
diff --git a/client/src/types.ts b/client/src/types.ts
index a4620f0ad..a02011d23 100644
--- a/client/src/types.ts
+++ b/client/src/types.ts
@@ -9,8 +9,3 @@ export interface AnnotatorPreferences {
     after: number;
   };
 }
-
-export interface SVGFilters {
-  brightness?: number;
-  intercept?: number;
-}
diff --git a/client/src/use/index.ts b/client/src/use/index.ts
index 6572058a1..4f75d3fcf 100644
--- a/client/src/use/index.ts
+++ b/client/src/use/index.ts
@@ -6,10 +6,12 @@ import useTimeObserver from './useTimeObserver';
 import useTrackFilters from './useTrackFilters';
 import useTrackSelectionControls from './useTrackSelectionControls';
 import useTrackStore from './useTrackStore';
+import useImageEnhancements from './useImageEnhancements';
 
 export {
   useAttributes,
   useEventChart,
+  useImageEnhancements,
   useLineChart,
   useStyling,
   useTimeObserver,
diff --git a/client/src/use/useImageEnhancements.ts b/client/src/use/useImageEnhancements.ts
new file mode 100644
index 000000000..85600cb2e
--- /dev/null
+++ b/client/src/use/useImageEnhancements.ts
@@ -0,0 +1,58 @@
+
+import {
+  computed,
+  ref, Ref, set as VueSet,
+} from '@vue/composition-api';
+
+export interface ImageEnhancements {
+    blackPoint?: number;
+    whitePoint?: number;
+  }
+
+  /**
+   * Modified markChangesPending for image Enhancments specifically
+   */
+  interface ImageEnhancementParams {
+    markChangesPending: () => void;
+  }
+
+
+export default function useImageEnhancements({ markChangesPending }: ImageEnhancementParams) {
+  const imageEnhancements: Ref<ImageEnhancements> = ref({});
+
+
+  function loadImageEnhancements(metadataEnhancements: ImageEnhancements) {
+    imageEnhancements.value = metadataEnhancements;
+  }
+
+  const setSVGFilters = ({ blackPoint, whitePoint }:
+    {blackPoint?: number; whitePoint?: number }) => {
+    VueSet(imageEnhancements.value, 'blackPoint', blackPoint);
+    VueSet(imageEnhancements.value, 'whitePoint', whitePoint);
+    markChangesPending();
+  };
+
+  const brightness = computed(() => {
+    if (imageEnhancements.value.blackPoint !== undefined
+        && imageEnhancements.value.whitePoint !== undefined) {
+      return (1 / (imageEnhancements.value.whitePoint - imageEnhancements.value.blackPoint));
+    }
+    return undefined;
+  });
+  const intercept = computed(() => {
+    if (imageEnhancements.value.blackPoint !== undefined
+        && imageEnhancements.value.whitePoint !== undefined) {
+      return (-imageEnhancements.value.blackPoint
+        / (imageEnhancements.value.whitePoint - imageEnhancements.value.blackPoint));
+    }
+    return undefined;
+  });
+
+  return {
+    imageEnhancements,
+    brightness,
+    intercept,
+    setSVGFilters,
+    loadImageEnhancements,
+  };
+}

From 17a83a817961f40f2ae3bddc04fc1a9c15edfd1b Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 25 Mar 2022 15:56:24 -0400
Subject: [PATCH 4/8] small mods

---
 client/dive-common/components/ImageEnhancements.vue | 10 +++++-----
 client/dive-common/components/Viewer.vue            |  2 +-
 client/src/use/useImageEnhancements.ts              |  8 ++------
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/client/dive-common/components/ImageEnhancements.vue b/client/dive-common/components/ImageEnhancements.vue
index d8abaa567..064a74202 100644
--- a/client/dive-common/components/ImageEnhancements.vue
+++ b/client/dive-common/components/ImageEnhancements.vue
@@ -10,12 +10,12 @@ export default defineComponent({
     const { setSVGFilters } = useHandler();
     const imageEnhancements = useImageEnhancements();
     const range = ref([
-      imageEnhancements.value.blackPoint ?? 0,
-      imageEnhancements.value.blackPoint ?? 1,
+      (imageEnhancements.value.blackPoint ?? 0) * 255.0,
+      (imageEnhancements.value.whitePoint ?? 1) * 255.0,
     ]);
 
     const modifyValue = () => {
-      setSVGFilters({ blackPoint: range.value[0], whitePoint: range.value[1] });
+      setSVGFilters({ blackPoint: range.value[0] / 255.0, whitePoint: range.value[1] / 255.0 });
     };
     return {
       modifyValue,
@@ -33,8 +33,8 @@ export default defineComponent({
     <v-range-slider
       v-model="range"
       :min="0"
-      :max="1"
-      :step="0.01"
+      :max="255"
+      :step="1.0"
       thumb-label="always"
       label="Low/High"
       @input="modifyValue"
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index ba3498cdf..b3f2a1527 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -127,7 +127,6 @@ export default defineComponent({
 
     const {
       imageEnhancements,
-      loadImageEnhancements,
       brightness,
       intercept,
       setSVGFilters,
@@ -399,6 +398,7 @@ export default defineComponent({
       const newId = `${baseMulticamDatasetId.value}/${camera}`;
       ctx.emit('update:id', newId);
     };
+
     const globalHandler = {
       ...handler,
       save,
diff --git a/client/src/use/useImageEnhancements.ts b/client/src/use/useImageEnhancements.ts
index 85600cb2e..8c6e118a9 100644
--- a/client/src/use/useImageEnhancements.ts
+++ b/client/src/use/useImageEnhancements.ts
@@ -4,6 +4,8 @@ import {
   ref, Ref, set as VueSet,
 } from '@vue/composition-api';
 
+// Expecting this may be a placeholder for more complicated client side enhancements
+// or more CSS filters
 export interface ImageEnhancements {
     blackPoint?: number;
     whitePoint?: number;
@@ -20,11 +22,6 @@ export interface ImageEnhancements {
 export default function useImageEnhancements({ markChangesPending }: ImageEnhancementParams) {
   const imageEnhancements: Ref<ImageEnhancements> = ref({});
 
-
-  function loadImageEnhancements(metadataEnhancements: ImageEnhancements) {
-    imageEnhancements.value = metadataEnhancements;
-  }
-
   const setSVGFilters = ({ blackPoint, whitePoint }:
     {blackPoint?: number; whitePoint?: number }) => {
     VueSet(imageEnhancements.value, 'blackPoint', blackPoint);
@@ -53,6 +50,5 @@ export default function useImageEnhancements({ markChangesPending }: ImageEnhanc
     brightness,
     intercept,
     setSVGFilters,
-    loadImageEnhancements,
   };
 }

From 73d2cfaaeb37c3a256772478e017b7be1e6cec72 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 28 Mar 2022 09:27:37 -0400
Subject: [PATCH 5/8] small changes

---
 .../dive-common/components/ImageEnhancements.vue  | 15 +++++++++++++--
 client/dive-common/store/context.ts               |  5 +++++
 client/src/use/useImageEnhancements.ts            |  4 ++--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/client/dive-common/components/ImageEnhancements.vue b/client/dive-common/components/ImageEnhancements.vue
index 064a74202..14a2a1cda 100644
--- a/client/dive-common/components/ImageEnhancements.vue
+++ b/client/dive-common/components/ImageEnhancements.vue
@@ -28,17 +28,28 @@ export default defineComponent({
 <template>
   <div class="mx-4">
     <span class="text-body-2">
-      Controls for adjusting white balance of images.
+      Controls for adjusting images.
     </span>
+    <v-divider class="my-3" />
     <v-range-slider
       v-model="range"
       :min="0"
       :max="255"
       :step="1.0"
       thumb-label="always"
-      label="Low/High"
+      label="Contrast:"
+      class="my-4"
       @input="modifyValue"
     />
+    <v-btn
+      block
+      depressed
+      color="warning"
+      class="my-2"
+      @click="range = [0, 255]; modifyValue()"
+    >
+      Reset
+    </v-btn>
   </div>
 </template>
 
diff --git a/client/dive-common/store/context.ts b/client/dive-common/store/context.ts
index d07912654..c43262077 100644
--- a/client/dive-common/store/context.ts
+++ b/client/dive-common/store/context.ts
@@ -2,6 +2,7 @@ import Install, { reactive } from '@vue/composition-api';
 import Vue, { VueConstructor } from 'vue';
 /* Components */
 import TypeThreshold from 'dive-common/components/TypeThreshold.vue';
+import ImageEnhancements from 'dive-common/components/ImageEnhancements.vue';
 
 Vue.use(Install);
 
@@ -23,6 +24,10 @@ const componentMap: Record<string, ComponentMapItem> = {
     description: 'Threshold Controls',
     component: TypeThreshold,
   },
+  ImageEnhancements: {
+    description: 'Image Enhancements',
+    component: ImageEnhancements,
+  },
 };
 
 function register(item: ComponentMapItem) {
diff --git a/client/src/use/useImageEnhancements.ts b/client/src/use/useImageEnhancements.ts
index 8c6e118a9..41e87e16a 100644
--- a/client/src/use/useImageEnhancements.ts
+++ b/client/src/use/useImageEnhancements.ts
@@ -5,14 +5,14 @@ import {
 } from '@vue/composition-api';
 
 // Expecting this may be a placeholder for more complicated client side enhancements
-// or more CSS filters
+// or more image filters
 export interface ImageEnhancements {
     blackPoint?: number;
     whitePoint?: number;
   }
 
   /**
-   * Modified markChangesPending for image Enhancments specifically
+   * Modified markChangesPending for image Enhancments specifically when it is saved per dataset
    */
   interface ImageEnhancementParams {
     markChangesPending: () => void;

From bf4c191a0250d386bc80b5e315bd82f1dc98b13f Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 28 Mar 2022 09:30:19 -0400
Subject: [PATCH 6/8] adding to video

---
 client/src/components/annotators/VideoAnnotator.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index e15118cc0..66f7214ed 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -98,6 +98,10 @@ export default defineComponent({
       type: Number as PropType<number | undefined>,
       default: undefined,
     },
+    intercept: {
+      type: Number as PropType<number | undefined>,
+      default: undefined,
+    },
   },
 
   setup(props) {
@@ -295,14 +299,17 @@ export default defineComponent({
             <feFuncR
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
             <feFuncG
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
             <feFuncB
               type="linear"
               :slope="brightness"
+              :intercept="intercept"
             />
           </feComponentTransfer>
         </filter>

From 281cf1bd37bb015ae96906305d9edff11eb073b2 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 28 Mar 2022 13:54:17 -0400
Subject: [PATCH 7/8] addressing comments

---
 client/dive-common/components/Viewer.vue |  2 +-
 client/src/use/useImageEnhancements.ts   | 10 +---------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index d978359b6..42852099c 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -128,7 +128,7 @@ export default defineComponent({
       brightness,
       intercept,
       setSVGFilters,
-    } = useImageEnhancements({ markChangesPending });
+    } = useImageEnhancements();
 
     const recipes = [
       new PolygonBase(),
diff --git a/client/src/use/useImageEnhancements.ts b/client/src/use/useImageEnhancements.ts
index 41e87e16a..e3e9908a3 100644
--- a/client/src/use/useImageEnhancements.ts
+++ b/client/src/use/useImageEnhancements.ts
@@ -11,22 +11,14 @@ export interface ImageEnhancements {
     whitePoint?: number;
   }
 
-  /**
-   * Modified markChangesPending for image Enhancments specifically when it is saved per dataset
-   */
-  interface ImageEnhancementParams {
-    markChangesPending: () => void;
-  }
-
 
-export default function useImageEnhancements({ markChangesPending }: ImageEnhancementParams) {
+export default function useImageEnhancements() {
   const imageEnhancements: Ref<ImageEnhancements> = ref({});
 
   const setSVGFilters = ({ blackPoint, whitePoint }:
     {blackPoint?: number; whitePoint?: number }) => {
     VueSet(imageEnhancements.value, 'blackPoint', blackPoint);
     VueSet(imageEnhancements.value, 'whitePoint', whitePoint);
-    markChangesPending();
   };
 
   const brightness = computed(() => {

From 542854e648883f0f95d7de1a822e4b62ea526aeb Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 28 Mar 2022 13:59:49 -0400
Subject: [PATCH 8/8] updating docs

---
 docs/UI-Timeline.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/UI-Timeline.md b/docs/UI-Timeline.md
index acd665d5f..751fd7c88 100644
--- a/docs/UI-Timeline.md
+++ b/docs/UI-Timeline.md
@@ -14,7 +14,7 @@ The timeline provides a control bar and a few different temporal visualizations.
 * ==:material-skip-previous:==  ==:material-play:== ==:material-skip-next:== are standard media playback controls.
 * ==:material-lock-open:== will enable camera lock, which causes the annotation view to auto-zoom and pan to whatever annotation is currently selected.  This is useful when reviewing the output of a pipeline.
 * ==:material-image-filter-center-focus:== or the ++r++ key will reset zoom/pan in the annotation view.
-
+* ==:material-contrast-box:== will open the image contrast adjustment panel.
 ## Detection Count
 
 ![Timeline View](images/Timeline/TimelineView.png)