Comment out the withLabel icon until its working better

packages/web/components/templates/article/HighlightsLayer.tsx

@@ -80,13 +80,15 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 })
 
   const [currentHighlightIdx, setCurrentHighlightIdx] = useState(0)
-  const [focusedHighlight, setFocusedHighlight] =
-    useState<Highlight | undefined>(undefined)
+  const [focusedHighlight, setFocusedHighlight] = useState<
+    Highlight | undefined
+  >(undefined)
 
   const [selectionData, setSelectionData] = useSelection(highlightLocations)
 
-  const [labelsTarget, setLabelsTarget] =
-    useState<Highlight | undefined>(undefined)
+  const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
+    undefined
+  )
 
   const [
     confirmDeleteHighlightWithNoteId,
@@ -811,7 +813,10 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         <SetHighlightLabelsModalPresenter
           highlight={labelsTarget}
           highlightId={labelsTarget.id}
-          onOpenChange={() => setLabelsTarget(undefined)}
+          onUpdate={updateHighlightsCallback}
+          onOpenChange={() => {
+            setLabelsTarget(undefined)
+          }}
         />
       )}
       {confirmDeleteHighlightWithNoteId && (

packages/web/components/templates/article/Notebook.tsx

@@ -57,8 +57,9 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
   const [noteText, setNoteText] = useState<string>('')
   const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] =
     useState<undefined | string>(undefined)
-  const [labelsTarget, setLabelsTarget] =
-    useState<Highlight | undefined>(undefined)
+  const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
+    undefined
+  )
   const noteState = useRef<NoteState>({
     isCreating: false,
     note: undefined,
@@ -359,6 +360,10 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
         <SetHighlightLabelsModalPresenter
           highlight={labelsTarget}
           highlightId={labelsTarget.id}
+          onUpdate={(highlight) => {
+            // Don't actually need to do something here
+            console.log('update highlight: ', highlight)
+          }}
           onOpenChange={() => {
             mutate()
             setLabelsTarget(undefined)

packages/web/components/templates/article/SetLabelsModalPresenter.tsx

@@ -3,6 +3,7 @@ import { useSetPageLabels } from '../../../lib/hooks/useSetPageLabels'
 import { LabelsProvider } from './SetLabelsControl'
 import { SetLabelsModal } from './SetLabelsModal'
 import { useSetHighlightLabels } from '../../../lib/hooks/useSetHighlightLabels'
+import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 
 type SetPageLabelsModalPresenterProps = {
   articleId: string
@@ -15,13 +16,6 @@ export function SetPageLabelsModalPresenter(
 ): JSX.Element {
   const [labels, dispatchLabels] = useSetPageLabels(props.articleId)
 
-  useEffect(() => {
-    dispatchLabels({
-      type: 'RESET',
-      labels: props.article.labels ?? [],
-    })
-  }, [props.article, dispatchLabels])
-
   const onOpenChange = useCallback(() => {
     if (props.article) {
       props.article.labels = labels.labels
@@ -29,6 +23,13 @@ export function SetPageLabelsModalPresenter(
     props.onOpenChange(true)
   }, [props, labels])
 
+  useEffect(() => {
+    dispatchLabels({
+      type: 'RESET',
+      labels: props.article.labels ?? [],
+    })
+  }, [props.article, dispatchLabels])
+
   return (
     <SetLabelsModal
       provider={props.article}
@@ -41,7 +42,9 @@ export function SetPageLabelsModalPresenter(
 
 type SetHighlightLabelsModalPresenterProps = {
   highlightId: string
-  highlight: LabelsProvider
+  highlight: Highlight
+
+  onUpdate: (updatedHighlight: Highlight) => void
   onOpenChange: (open: boolean) => void
 }
 
@@ -57,12 +60,18 @@ export function SetHighlightLabelsModalPresenter(
     })
   }, [props.highlight, dispatchLabels])
 
+  const onOpenChange = useCallback(() => {
+    props.highlight.labels = labels.labels
+    props.onUpdate(props.highlight)
+    props.onOpenChange(true)
+  }, [props])
+
   return (
     <SetLabelsModal
       provider={props.highlight}
       selectedLabels={labels.labels}
       dispatchLabels={dispatchLabels}
-      onOpenChange={props.onOpenChange}
+      onOpenChange={onOpenChange}
     />
   )
 }

packages/web/lib/highlights/highlightGenerator.ts

@@ -206,19 +206,19 @@ export function makeHighlightNodeAttributes(
 
     lastElement.appendChild(ctr)
   }
-  if (withLabels && lastElement) {
-    const svg = labelsImage(customColor)
-    svg.setAttribute(highlightLabelIdAttribute, id)
+  // if (withLabels && lastElement) {
+  //   const svg = labelsImage(customColor)
+  //   svg.setAttribute(highlightLabelIdAttribute, id)
 
-    const ctr = document.createElement('span')
-    ctr.className = 'highlight_label_button'
-    ctr.appendChild(svg)
-    ctr.setAttribute(highlightLabelIdAttribute, id)
-    ctr.setAttribute('width', '14px')
-    ctr.setAttribute('height', '14px')
+  //   const ctr = document.createElement('span')
+  //   ctr.className = 'highlight_label_button'
+  //   ctr.appendChild(svg)
+  //   ctr.setAttribute(highlightLabelIdAttribute, id)
+  //   ctr.setAttribute('width', '14px')
+  //   ctr.setAttribute('height', '14px')
 
-    lastElement.appendChild(ctr)
-  }
+  //   lastElement.appendChild(ctr)
+  // }
 
   return {
     prefix,

packages/web/lib/hooks/useSetHighlightLabels.tsx

@@ -3,6 +3,7 @@ import { Label } from '../networking/fragments/labelFragment'
 import { showErrorToast } from '../toastHelpers'
 import { setLabelsForHighlight } from '../networking/mutations/setLabelsForHighlight'
 import { LabelsDispatcher } from './useSetPageLabels'
+import { Highlight } from '../networking/fragments/highlightFragment'
 
 export const useSetHighlightLabels = (
   highlightId?: string