Merge branch 'issue-29-highlight-active-annotation' into 'main'

highlight selected annotations and annotations hovered over

Closes #30 and #29

See merge request SCDH/tei-processing/seed-frontend-components!4

Author: lueck

src/redux/colorizeText.ts

@@ -10,7 +10,8 @@ import log from "./logging";
 export const preferredColorPredicate: string = "https://intertextuality.org/annotation#preferredCssColor";
 export const colorPriorityPredicate: string = "https://intertextuality.org/annotation#colorPriority";
 
-export const defaultColor: string = "yellow";
+export const visualCategory: string = "background-color";
+export const defaultCss: CSSDefinition = { "background-color": "whitesmoke" };
 
 /*
  * A thunk for setting the CSS for all annotations. This will update
@@ -32,7 +33,7 @@ export const setCssAnnotationsThunk = () => {
 		log.debug("setting CSS for annotation : " + annotId);
 		// get the annotation by ID
 		const annotation = annots[annotId];
-		css[annotId] = {};
+		css[annotId] = { 0: defaultCss };
 		// collect attributed RDF classes into the tags variable
 		var tags: any = {}
 		// an annotation may have multiple predicates with multiple objects
@@ -50,16 +51,13 @@ export const setCssAnnotationsThunk = () => {
 				tags[clasUri] = ontology[clasUri];
 				var tag: Predications = ontology[clasUri];
 				// get the CSS properties: background color
-				if (!tag.hasOwnProperty(preferredColorPredicate)) {
-				    css[annotId][0] = new CSSStyleDeclaration();
-				    css[annotId][0]["background-color"] = defaultColor;
-				} else {
+				if (tag.hasOwnProperty(preferredColorPredicate)) {
 				    var priority: number = 0;
 				    if (tag.hasOwnProperty(colorPriorityPredicate)) {
 					priority = +tag[colorPriorityPredicate][0].value;
 				    }
 				    css[annotId][priority] = {};
-				    css[annotId][priority]["background-color"] = tag[preferredColorPredicate][0].value;
+				    css[annotId][priority][visualCategory] = tag[preferredColorPredicate][0].value;
 				}
 			    }
 			}

src/redux/seed-store.ts

@@ -46,5 +46,6 @@ export type SeedDispatch = ((action: Action<"listenerMiddleware/add">) => Unsubs
 
 export const seedListenerMiddleware = createListenerMiddleware();
 export const startAppListening = seedListenerMiddleware.startListening.withTypes<SeedState, SeedDispatch>();
+export type startAppListeningType = typeof startAppListening;
 
 export const addAppListener = addListener.withTypes<SeedState, SeedDispatch>();

src/redux/store.ts

@@ -1,12 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 
-import { seedListenerMiddleware } from "./seed-store";
+import { seedListenerMiddleware, startAppListening } from "./seed-store";
 import textsReducer from "./textsSlice";
 import textViewsReducer from "./textViewsSlice";
 import annotationsReducer from "./annotationsSlice";
 import ontologyReducer from "./ontologySlice";
 import synopsisReducer from "./synopsisSlice";
 import { subscribeAnnotationsCssUpdater, subscribeSegmentsCssOnCssUpdater, subscribeSegmentsCssOnSegmentsUpdater } from "./colorizeText";
+import { addTextViewListeners } from "./textViewMiddleware";
 
 /*
  * Listener middleware for the store.  Without listener middleware,
@@ -35,3 +36,6 @@ export type AppDispatch = typeof store.dispatch;
 subscribeAnnotationsCssUpdater(store);
 subscribeSegmentsCssOnCssUpdater(store);
 subscribeSegmentsCssOnSegmentsUpdater(store);
+
+// add listener middleware
+addTextViewListeners(startAppListening);

src/redux/textViewMiddleware.ts

@@ -0,0 +1,41 @@
+import { startAppListeningType } from "./seed-store";
+import { fetchAnnotationsPerSegment, setSegmentsPerAnnotation, TextViewsSlice, AnnotationsPerSegment, SegmentsPerAnnotation } from "./textViewsSlice";
+
+import log from "./logging";
+
+
+/*
+ * A function that adds listener middleware to a {SeedStore}.
+ *
+ * USAGE: `addTextViewListeners(startAppListening);`
+ */
+export const addTextViewListeners = (startListening: startAppListeningType) => {
+    log.debug("adding listener middleware for the text view slice");
+
+    // add listener middleware for inverting AnnotationsPerSegment and storing it to SegmentsPerAnnotation
+    startListening({
+	//type: "textViews/fetchAnnotationsPerSegment",
+	actionCreator: fetchAnnotationsPerSegment.fulfilled,
+	effect: (_action, listenerApi): void => {
+	    log.debug("call to annotations middleware");
+	    const textViewsSlice: TextViewsSlice = listenerApi.getState().textViews;
+	    Object.keys(textViewsSlice).forEach((textViewId: string) => {
+		const annotsPerSegment: AnnotationsPerSegment = textViewsSlice[textViewId].annotationsPerSegment;
+		// start with empty object
+		const segmentsPerAnnot: SegmentsPerAnnotation = {};
+		Object.keys(annotsPerSegment).filter(segmentId => segmentId.length > 0).forEach((segmentId: string) => {
+		    const annots: Array<string> = annotsPerSegment[segmentId];
+		    annots.forEach((annotId: string) => {
+			if (segmentsPerAnnot.hasOwnProperty(annotId)) {
+			    segmentsPerAnnot[annotId].push(segmentId);
+			} else {
+			    segmentsPerAnnot[annotId] = new Array<string>(1).fill(segmentId);
+			}
+		    });
+		});
+		// write to slice
+		listenerApi.dispatch(setSegmentsPerAnnotation({viewId: textViewId, segmentsPerAnnot: segmentsPerAnnot}));
+	    });
+	}
+    });
+}

src/redux/textViewsSlice.ts

@@ -56,6 +56,11 @@ export interface TextViewState {
      */
     annotationsPerSegment: AnnotationsPerSegment;
 
+    /*
+     * The reverse of `annotationsPerSegment`.
+     */
+    segmentsPerAnnotation: SegmentsPerAnnotation;
+
     /*
      * The CSS attributed to an segment on the base of annotations on
      * it.
@@ -80,6 +85,15 @@ export interface AnnotationsPerSegment {
 
 }
 
+/*
+ * The reverse of {AnnotationsPerSegment}.
+ */
+export interface SegmentsPerAnnotation {
+
+    [annotId: string]: Array<string>;
+
+}
+
 /*
  * The {TextViewsSlice} is a slice of the redux state for keeping
  * the state of a view on a text.  The type of
@@ -145,6 +159,7 @@ const textViewsSlice = createSlice({
 		scrollPosition: null,
 		annotations: [],
 		annotationsPerSegment: {},
+		segmentsPerAnnotation: {},
 		cssPerSegment: {}
 	    };
 	},
@@ -167,7 +182,13 @@ const textViewsSlice = createSlice({
 	setCssForAllSegments: (state, action: PayloadAction<{viewId: string, cssPerSegment: { [segmentId: string]: CSSDefinition }}>) => {
 	    state[action.payload.viewId].cssPerSegment = action.payload.cssPerSegment;
 	},
-
+	/*
+	 * Update the {TextViewState.segmentsPerAnnotation} property
+	 * of a text view.
+	 */
+	setSegmentsPerAnnotation: (state, action: PayloadAction<{viewId: string, segmentsPerAnnot: SegmentsPerAnnotation}>) => {
+	    state[action.payload.viewId].segmentsPerAnnotation = action.payload.segmentsPerAnnot;
+	}
     },
     extraReducers: (builder) => {
 	builder.addCase(
@@ -178,6 +199,6 @@ const textViewsSlice = createSlice({
     },
 });
 
-export const { initTextView, setText, scrolledTo, setCssForAllSegments } = textViewsSlice.actions;
+export const { initTextView, setText, scrolledTo, setCssForAllSegments, setSegmentsPerAnnotation } = textViewsSlice.actions;
 
 export default textViewsSlice.reducer;

src/seed-text-view.ts

@@ -7,9 +7,10 @@ import { storeConsumerMixin } from './store-consumer-mixin';
 import { windowMixin, windowStyles } from './window-mixin';
 
 import { seedTextViewContext } from "./seed-context";
-import { addAppListener } from "./redux/seed-store";
+import { addAppListener, SeedState } from "./redux/seed-store";
 import { initText, setText, TextState } from "./redux/textsSlice";
 import { initTextView, setText as setTextViewText, scrolledTo, fetchAnnotationsPerSegment } from "./redux/textViewsSlice";
+import { annotationSelected, annotationsPassedBy } from './redux/annotationsSlice';
 import { selectAnnotationsAtSegmentThunk, passByAnnotationsAtSegmentThunk } from "./redux/selectAnnotations";
 import { CSSDefinition } from './redux/cssTypes';
 import { scrolled, syncOthers } from './redux/synopsisSlice';
@@ -18,8 +19,6 @@ import { setScrollTarget } from './redux/synopsisMiddleware';
 
 import log from "./logging";
 
-import { SeedState } from './redux/seed-store';
-
 
 
 // define the web component
@@ -47,6 +46,8 @@ export class SeedTextView extends windowMixin(storeConsumerMixin(LitElement)) {
     @state()
     doc: string | undefined;
 
+    protected annotationSelected: string | null = null;
+
     protected docLoaded: boolean = false;
 
     protected msgQueue: Array<any> = [];
@@ -117,6 +118,37 @@ export class SeedTextView extends windowMixin(storeConsumerMixin(LitElement)) {
 	    }
 	}));
 
+	this.store?.dispatch(addAppListener({
+	    actionCreator: annotationSelected,
+	    effect: (_action, listenerApi): void => {
+		// reset highlighting of previously selected annotation
+		if (this.annotationSelected) {
+		    this.colorizeAnnotation(listenerApi.getState(), this.annotationSelected, { "border": "none"});
+		}
+		// highlight currently selected annotation
+		this.annotationSelected = listenerApi.getState().annotations.annotationSelected ?? "unknown";
+		// TODO: make CSS configurable
+		this.colorizeAnnotation(listenerApi.getState(), this.annotationSelected, { "border": "1px solid red"});
+	    }
+	}));
+
+	this.store?.dispatch(addAppListener({
+	    actionCreator: annotationsPassedBy,
+	    effect: (_action, listenerApi): void => {
+		// reset highlighting of previously transient annotations:
+		// general annotation highlighting and transient
+		// highlighting are bound to the same visual category,
+		// so we can use the general highlighting for a reset
+		this.colorizeText(listenerApi.getState().textViews[this.id].cssPerSegment);
+		// highlight transient annotations
+		const annotIds: Array<string> = listenerApi.getState().annotations.annotationsTransient;
+		annotIds.forEach(annotId => {
+		    // TODO: make CSS configurable
+		    this.colorizeAnnotation(listenerApi.getState(), annotId, { "background-color": "silver"});
+		});
+	    }
+	}));
+
 	// this.storeUnsubscribeListeners.push(subsc);
     }
 
@@ -147,7 +179,7 @@ export class SeedTextView extends windowMixin(storeConsumerMixin(LitElement)) {
     }
 
     /*
-     * A callback for scrolling the text to `scrollTarget` position. 
+     * A callback for scrolling the text to `scrollTarget` position.
      */
     scrollTextTo(scrollTarget: string): void {
 	if (this.iframe) {
@@ -308,6 +340,22 @@ export class SeedTextView extends windowMixin(storeConsumerMixin(LitElement)) {
 	}
     }
 
+    /*
+     * Get the text segements included in an annotation given by
+     * `annotId` and colorize them with the given CSS.
+     */
+    protected colorizeAnnotation(state: SeedState, annotId: string, css: CSSDefinition): void {
+	if (state.textViews[this.id].segmentsPerAnnotation.hasOwnProperty(annotId)) {
+	    log.debug("colorizing selected annotation in " + this.id + ": " + annotId);
+	    const segments: Array<string> = state.textViews[this.id].segmentsPerAnnotation[annotId];
+	    const cssPerSegments: { [segmentId: string]: CSSDefinition } = {};
+	    segments.forEach(seg => {
+		cssPerSegments[seg] = css;
+	    });
+	    this.colorizeText(cssPerSegments);
+	}
+    }
+
     static styles: CSSResultGroup = [
 	windowStyles,
 	css`