Merge pull request #253 from UW-Macrostrat/editing-updates

Editing updates

pages/integrations/xdd/extractions/lib/index.ts

@@ -5,8 +5,16 @@ import { Entity, EntityExt, Highlight, EntityType } from "./types";
 import { CSSProperties } from "react";
 import { asChromaColor } from "@macrostrat/color-utils";
 
-export function buildHighlights(entities: EntityExt[]): Highlight[] {
+export function buildHighlights(
+  entities: EntityExt[],
+  parent: EntityExt | null
+): Highlight[] {
   let highlights = [];
+  let parents = [];
+  if (parent != null) {
+    parents = [parent.id, ...(parent.parents ?? [])];
+  }
+
   for (const entity of entities) {
     highlights.push({
       start: entity.indices[0],
@@ -15,14 +23,14 @@ export function buildHighlights(entities: EntityExt[]): Highlight[] {
       backgroundColor: entity.type.color ?? "#ddd",
       tag: entity.type.name,
       id: entity.id,
+      parents,
     });
-    highlights.push(...buildHighlights(entity.children ?? []));
+    highlights.push(...buildHighlights(entity.children ?? [], entity));
   }
   return highlights;
 }
 
 export function enhanceData(extractionData, models, entityTypes) {
-  console.log(extractionData, models);
   return {
     ...extractionData,
     model: models.get(extractionData.model_id),
@@ -34,18 +42,23 @@ export function enhanceData(extractionData, models, entityTypes) {
 
 export function getTagStyle(
   baseColor: string,
-  options: { selected?: boolean; inDarkMode?: boolean }
+  options: { highlighted?: boolean; inDarkMode?: boolean; active?: boolean }
 ): CSSProperties {
   const _baseColor = asChromaColor(baseColor ?? "#ddd");
-  const { selected = true, inDarkMode = false } = options;
+  const { highlighted = true, inDarkMode = false, active = false } = options;
 
-  const mixAmount = selected ? 0.8 : 0.5;
-  const backgroundAlpha = selected ? 0.8 : 0.2;
+  let mixAmount = highlighted ? 0.8 : 0.5;
+  let backgroundAlpha = highlighted ? 0.8 : 0.2;
+
+  if (active) {
+    mixAmount = 1;
+    backgroundAlpha = 1;
+  }
 
   const mixTarget = inDarkMode ? "white" : "black";
 
   const color = _baseColor.mix(mixTarget, mixAmount).css();
-  const borderColor = selected
+  const borderColor = highlighted
     ? _baseColor.mix(mixTarget, mixAmount / 2).css()
     : "transparent";
 
@@ -56,6 +69,7 @@ export function getTagStyle(
     borderStyle: "solid",
     borderColor,
     borderWidth: "1px",
+    fontWeight: active ? "bold" : "normal",
   };
 }
 
@@ -101,7 +115,7 @@ export function ModelInfo({ data }) {
   return h("p.model-name", ["Model: ", h("code.bp5-code", data.name)]);
 }
 
-export function EntityTag({ data, selected = true }) {
+export function EntityTag({ data, highlighted = true, active = false }) {
   const { name, type, match } = data;
   const className = classNames(
     {
@@ -111,12 +125,12 @@ export function EntityTag({ data, selected = true }) {
     "entity"
   );
 
-  const style = getTagStyle(type.color, { selected });
+  const style = getTagStyle(type.color, { highlighted, active });
 
   return h(Tag, { style, className }, [
-    h("code.entity-type.bp5-code", type.name),
-    " ",
     h("span.entity-name", name),
+    " ",
+    h("code.entity-type.bp5-code", type.name),
     h(Match, { data: match }),
   ]);
 }

pages/integrations/xdd/extractions/lib/types.ts

@@ -21,6 +21,7 @@ export type Highlight = {
   backgroundColor?: string;
   borderColor?: string;
   id: number;
+  parents?: number[];
 };
 
 export interface EntityExt extends Omit<Entity, "type" | "children"> {

pages/integrations/xdd/feedback/@sourceTextID/+Page.client.ts

@@ -2,28 +2,19 @@ import h from "@macrostrat/hyper";
 import { ContentPage } from "~/layouts";
 import { PageBreadcrumbs } from "~/components";
 import { usePageContext } from "vike-react/usePageContext";
-import { enhanceData, ExtractionContext } from "../../extractions/lib";
+import { enhanceData } from "../../extractions/lib";
 import {
-  usePostgresQuery,
-  useModelIndex,
   useEntityTypeIndex,
+  useModelIndex,
+  usePostgresQuery,
 } from "../../extractions/lib/data-service";
 import { FeedbackComponent } from "./lib";
-import { JSONView } from "@macrostrat/ui-components";
-import { create } from "zustand";
-import { useEffect } from "react";
-import {
-  Card,
-  NonIdealState,
-  OverlaysProvider,
-  Spinner,
-} from "@blueprintjs/core";
+import { OverlaysProvider } from "@blueprintjs/core";
 
 /**
  * Get a single text window for feedback purposes
  */
 
-// noinspection JSUnusedGlobalSymbols
 export function Page() {
   return h(
     OverlaysProvider,
@@ -35,12 +26,6 @@ export function Page() {
   );
 }
 
-const useStore = create((set) => {
-  return {
-    entities: null,
-  };
-});
-
 function ExtractionIndex() {
   const { routeParams } = usePageContext();
   const { sourceTextID } = routeParams;
@@ -53,37 +38,37 @@ function ExtractionIndex() {
     predicate: sourceTextID,
   });
 
-  useEffect(() => {
-    if (data == null) return;
-    useStore.setState({ entities: data[0]?.entities });
-  }, [data]);
-
   if (data == null || models == null || entityTypes == null) {
     return h("div", "Loading...");
   }
 
-  const window = enhanceData(data[0], models, entityTypes);
-  const { entities = [], paragraph_text, model } = window;
-
-  return h([
-    //h("h1", paper.citation?.title ?? "Model extractions"),
-    h(FeedbackComponent, {
-      entities,
-      text: paragraph_text,
-      model,
-      entityTypes,
-    }),
-  ]);
-}
-
-function FeedbackDevTool() {
-  const entities = useStore((state) => state.entities);
-  if (entities == null)
-    return h(NonIdealState, { icon: h(Spinner), title: "Loading..." });
-
-  return h(JSONView, { data: entities, showRoot: false, keyPath: 0 });
+  return h(
+    "div.feedback-windows",
+    data.map((d) => {
+      console.log(data);
+      const window = enhanceData(d, models, entityTypes);
+      const { entities = [], paragraph_text, model } = window;
+      //h("h1", paper.citation?.title ?? "Model extractions"),
+      return h(FeedbackComponent, {
+        entities,
+        text: paragraph_text,
+        model,
+        entityTypes,
+        sourceTextID: window.source_text,
+        runID: window.model_run,
+      });
+    })
+  );
 }
 
-FeedbackDevTool.title = "Feedback";
-
-export const devTools = [FeedbackDevTool];
+// function FeedbackDevTool() {
+//   const entities = useStore((state) => state.entities);
+//   if (entities == null)
+//     return h(NonIdealState, { icon: h(Spinner), title: "Loading..." });
+//
+//   return h(JSONView, { data: entities, showRoot: false, keyPath: 0 });
+// }
+//
+// FeedbackDevTool.title = "Feedback";
+//
+// export const devTools = [FeedbackDevTool];