@cosla/sensemaking-web-ui 1.0.0

package/src/app/components/dialog/dialog.component.html

@@ -0,0 +1,15 @@
+<div class="root">
+  <h2 mat-dialog-title>{{ data.title }}</h2>
+  <mat-dialog-content>
+    <div>{{ data.text }}</div>
+    <div class="copy-container">
+      <div class="copy-text">{{ data.link }}</div>
+      <button mat-icon-button (click)="copyLink()" aria-label="Copy link to clipboard">
+        <mat-icon>content_copy</mat-icon>
+      </button>
+    </div>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button (click)="close()">Close</button>
+  </mat-dialog-actions>
+</div>

package/src/app/components/dialog/dialog.component.scss

@@ -0,0 +1,42 @@
+@import "../../../style-vars";
+
+.root {
+  max-width: 450px;
+
+  button[mat-button] {
+    color: $science-blue;
+    font-family: $main-font;
+  }
+
+  h2[mat-dialog-title] {
+    color: $mine-shaft;
+    font-family: $main-font;
+  }
+
+  mat-dialog-content {
+    color: $cape-cod;
+    font-family: $main-font;
+  }
+}
+
+.copy-container {
+  border: 1px solid $gray-nurse;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 10px;
+  margin-top: 20px;
+  padding: 4px 4px 4px 12px;
+
+  .copy-text {
+    overflow: hidden;
+		text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  mat-icon {
+    color: $cape-cod;
+    flex-shrink: 0;
+  }
+}

package/src/app/components/dialog/dialog.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { DialogComponent } from './dialog.component';
+
+describe('DialogComponent', () => {
+  let component: DialogComponent;
+  let fixture: ComponentFixture<DialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DialogComponent],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: MatDialogRef, useValue: {} },
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/dialog/dialog.component.ts

@@ -0,0 +1,40 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Component, Inject } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MatButtonModule } from "@angular/material/button";
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from "@angular/material/dialog";
+import { MatIconModule } from '@angular/material/icon';
+
+type DialogData = {
+  link: string,
+  text: string,
+  title: string,
+};
+
+@Component({
+  selector: 'app-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatIconModule,
+  ],
+  templateUrl: './dialog.component.html',
+  styleUrl: './dialog.component.scss'
+})
+export class DialogComponent {
+  constructor(
+    private clipboard: Clipboard,
+    public dialogRef: MatDialogRef<DialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData
+  ) {}
+
+  close() {
+    this.dialogRef.close();
+  }
+
+  copyLink() {
+    this.clipboard.copy(this.data.link);
+  }
+}

package/src/app/components/sensemaking-chart-wrapper/sensemaking-chart-wrapper.component.ts

@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  Input,
+  ViewChild,
+  ElementRef,
+  AfterViewInit,
+} from '@angular/core';
+import '@conversationai/sensemaker-visualizations';
+
+@Component({
+  selector: 'app-sensemaking-chart-wrapper',
+  standalone: true,
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <div class="chart-container">
+      <sensemaker-chart
+        #sensemakingChartEl
+        [attr.id]="chartId"
+        [attr.chart-type]="chartType"
+        [attr.view]="view"
+        [attr.topic-filter]="topicFilter"
+        [attr.colors]="colors?.length ? (colors | json) : null"
+      ></sensemaker-chart>
+    </div>
+  `,
+  styles: [
+    `
+      .chart-container {
+        width: 100%;
+        height: 100%;
+      }
+    `,
+  ],
+})
+export class SensemakingChartWrapperComponent implements AfterViewInit {
+  @ViewChild('sensemakingChartEl') chartElementRef!: ElementRef<
+    HTMLElement & {
+      data?: any;
+      summaryData?: any;
+    }
+  >;
+
+  @Input() chartId: string = '';
+  @Input() chartType: string = 'topics-distribution';
+  @Input() view: string = 'cluster';
+  @Input() topicFilter: string = '';
+  @Input() colors: string[] = [];
+  @Input() data: any;
+  @Input() summaryData: any;
+
+  ngAfterViewInit() {
+    // Set the data directly on the web component
+    if (this.chartElementRef?.nativeElement) {
+      const chartElement = this.chartElementRef.nativeElement;
+
+      // Set the main data
+      chartElement.data = this.data;
+
+      // Set the summary data
+      chartElement.summaryData = this.summaryData;
+    }
+  }
+}

package/src/app/components/statement-card/statement-card.component.html

@@ -0,0 +1,51 @@
+<ng-template #mainStatement let-truncated="truncated">
+  <div class="pills" [ngSwitch]="type">
+    <ng-container *ngSwitchCase="'high-alignment'">
+      <div class="pill pos" *ngIf="isOverallAgree">{{ agreePercent }}% voted agree</div>
+      <div class="pill neg" *ngIf="!isOverallAgree">{{ disagreePercent }}% voted disagree</div>
+    </ng-container>
+    <ng-container *ngSwitchCase="'low-alignment'">
+      <div class="pill neutral">{{ agreePercent }}% voted agree</div>
+      <div class="pill neutral">{{ disagreePercent }}% voted disagree</div>
+    </ng-container>
+    <ng-container *ngSwitchCase="'high-uncertainty'">
+      <div class="pill blank">{{ passPercent }}% voted "unsure/pass"</div>
+    </ng-container>
+    <ng-container *ngSwitchCase="'uncategorized'">
+      <div class="pill blank">{{ agreePercent }}% voted agree</div>
+      <div class="pill blank">{{ disagreePercent }}% voted disagree</div>
+    </ng-container>
+  </div>
+  <p [class.truncated]="truncated">{{ data?.text }}</p>
+</ng-template>
+<article class="inline-card" [customTooltip]="tooltipTemplate">
+  <ng-container *ngTemplateOutlet="mainStatement; context: { truncated: truncate }"></ng-container>
+</article>
+<ng-template #tooltipTemplate>
+  <div class="popup-card">
+    <div class="popup-top">
+      <ng-container *ngTemplateOutlet="mainStatement"></ng-container>
+      <div class="topic-breakdown">Topic(s): {{ topics }}</div>
+    </div>
+    <div class="popup-bottom">
+      <div class="subheading">{{ voteTotal }} total votes</div>
+      <div class="vote-breakdown">
+        <div class="vote-type">
+          <div class="vote-dot agree"></div>
+          <div>Agree</div>
+        </div>
+        <div>{{ agreeTotal }}</div>
+        <div class="vote-type">
+          <div class="vote-dot disagree"></div>
+          <div>Disagree</div>
+        </div>
+        <div>{{ disagreeTotal }}</div>
+        <div class="vote-type">
+          <div class="vote-dot pass"></div>
+          <div>"Unsure/Pass"</div>
+        </div>
+        <div>{{ passTotal }}</div>
+      </div>
+    </div>
+  </div>
+</ng-template>

package/src/app/components/statement-card/statement-card.component.scss

@@ -0,0 +1,134 @@
+@import "../../../style-vars";
+
+@mixin card-shape {
+  border-radius: 16px 16px 16px 0;
+}
+
+.inline-card {
+  @include card-shape;
+  background-color: $white;
+  border: 1px solid $mystic;
+  height: 100%; // needed for usage of element in grid to ensure it takes up any empty space in the grid row
+  padding: 12px;
+
+  &:hover {
+    background-color: $mystic-2;
+  }
+}
+
+p {
+  font-size: 12px;
+  line-height: 1.33;
+  letter-spacing: 0.1px;
+
+  &.truncated {
+    @include truncateText(3);
+  }
+}
+
+.pill {
+  border-radius: 500px;
+  color: $mine-shaft;
+  font-size: 10px;
+  letter-spacing: 0.1px;
+  line-height: 1.2;
+  padding: 3px 8px;
+  width: fit-content;
+
+  &.blank {
+    background-color: $white;
+    border: 1px solid $silver;
+    padding: 2px 7px;
+  }
+
+  &.neg {
+    background-color: $your-pink;
+  }
+
+  &.neutral {
+    background-color: $alto;
+  }
+
+  &.pos {
+    background-color: $magic-mint;
+  }
+}
+
+.pills {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 5px;
+  row-gap: 5px;
+  margin-bottom: 8px;
+}
+
+.popup-card {
+  @include card-shape;
+  background-color: $white;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.30);
+  max-width: 250px;
+
+  .popup-bottom {
+    padding: 12px;
+  }
+
+  .popup-top {
+    border-bottom: 1px solid $mystic;
+    padding: 12px;
+  }
+}
+
+.subheading {
+  color: $cape-cod-2;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.1px;
+  line-height: 1.33;
+}
+
+.topic-breakdown {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1px;
+  line-height: 1.6;
+  margin-top: 10px;
+}
+
+.vote-breakdown {
+  color: $cape-cod-2;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.1px;
+  line-height: 1.33;
+  display: grid;
+  grid-template-columns: max-content auto;
+  gap: 7px 25px;
+  margin-top: 5px;
+}
+
+.vote-dot {
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+  height: 4px;
+  width: 4px;
+
+  &.agree {
+    background-color: $magic-mint;
+  }
+
+  &.disagree {
+    background-color: $your-pink;
+  }
+
+  &.pass {
+    background-color: $white;
+    border: 0.5px solid $boulder;
+  }
+}
+
+.vote-type {
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+}

package/src/app/components/statement-card/statement-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatementCardComponent } from './statement-card.component';
+
+describe('StatementCardComponent', () => {
+  let component: StatementCardComponent;
+  let fixture: ComponentFixture<StatementCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StatementCardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StatementCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/statement-card/statement-card.component.ts

@@ -0,0 +1,50 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { CustomTooltipDirective } from "../../directives/custom-tooltip/custom-tooltip.directive";
+
+import { VoteGroup, Statement } from "../../models/report.model";
+
+@Component({
+  selector: 'app-statement-card',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CustomTooltipDirective,
+    OverlayModule,
+  ],
+  templateUrl: './statement-card.component.html',
+  styleUrl: './statement-card.component.scss'
+})
+export class StatementCardComponent implements OnInit {
+  @Input() data?: Statement;
+  @Input() truncate = false;
+  @Input() type = "";
+  isOverallAgree?: boolean;
+  agreePercent?: number;
+  disagreePercent?: number;
+  passPercent?: number;
+  agreeTotal = 0;
+  disagreeTotal = 0;
+  passTotal = 0;
+  voteTotal = 0;
+  topics = "";
+
+  ngOnInit() {
+    if(!this.data) return;
+    this.isOverallAgree = this.data.agreeRate >= this.data.disagreeRate;
+    this.agreePercent = Math.round(this.data.agreeRate * 100);
+    this.disagreePercent = Math.round(this.data.disagreeRate * 100);
+    this.passPercent = Math.round(this.data.passRate * 100);
+    Object.values(this.data.votes).forEach((voterGroup: VoteGroup) => {
+      const { agreeCount, disagreeCount, passCount } = voterGroup;
+      this.agreeTotal += agreeCount;
+      this.disagreeTotal += disagreeCount;
+      this.passTotal += passCount;
+      this.voteTotal += agreeCount + disagreeCount + passCount;
+    });
+    if(this.data.topics) {
+      this.topics = this.data.topics.replaceAll(";", ", ").replaceAll(":", " > ");
+    }
+  }
+}

package/src/app/directives/custom-tooltip/custom-tooltip.directive.spec.ts

@@ -0,0 +1,39 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Overlay } from '@angular/cdk/overlay';
+import { By } from '@angular/platform-browser';
+import { CustomTooltipDirective } from './custom-tooltip.directive';
+
+// test host component
+@Component({
+  template: `
+    <div [customTooltip]="tooltipTemplate">Host element</div>
+    <ng-template #tooltipTemplate>Tooltip content</ng-template>
+  `,
+})
+class TestComponent {
+  @ViewChild('tooltipTemplate') tooltipTemplate!: TemplateRef<any>;
+}
+
+describe('CustomTooltipDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomTooltipDirective],
+      declarations: [TestComponent],
+      providers: [Overlay],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+  });
+
+  it('should create an instance of the directive with TemplateRef input', () => {
+    const directiveEl = fixture.debugElement.query(By.directive(CustomTooltipDirective));
+    expect(directiveEl).not.toBeNull(); // check that the directive is applied
+    const directiveInstance = directiveEl.injector.get(CustomTooltipDirective);
+    expect(directiveInstance).toBeTruthy(); // verify the instance exists
+    expect(directiveInstance.content).toBeDefined(); // verify TemplateRef input is set
+  });
+});

package/src/app/directives/custom-tooltip/custom-tooltip.directive.ts

@@ -0,0 +1,89 @@
+import { Directive, Input, HostListener, TemplateRef, ViewContainerRef } from "@angular/core";
+import { GlobalPositionStrategy, Overlay, OverlayRef } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+
+@Directive({
+  selector: "[customTooltip]",
+  standalone: true
+})
+export class CustomTooltipDirective {
+  @Input("customTooltip") content!: TemplateRef<any>;
+  private overlayRef!: OverlayRef;
+  private portal: TemplatePortal<any> | null = null;
+
+  constructor(
+    private overlay: Overlay,
+    private viewContainerRef: ViewContainerRef
+  ) {}
+
+  @HostListener("mousemove", ["$event"])
+  updatePosition(event: MouseEvent) {
+    if(!this.overlayRef) {
+      return;
+    }
+
+    const strategy = this.overlayRef
+      .getConfig()
+      .positionStrategy as GlobalPositionStrategy;
+
+    // measure rendered tooltip
+    const tooltipEl = this.overlayRef.overlayElement;
+    const { width, height } = tooltipEl.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+
+    // set distance for tooltip offset from mouse point
+    const offset = 10;
+
+    // horizontal position
+    let xPos = event.clientX + offset;
+    if(event.clientX + offset + width > viewportWidth) {
+      // overflows screen's right edge → flip to left of cursor
+      xPos = event.clientX - width - offset;
+    }
+
+    // vertical position
+    let yPos = event.clientY - height - offset;
+    if(yPos < 0) {
+      // overflows screen's top edge → flip to below cursor
+      yPos = event.clientY + offset;
+    }
+
+    strategy.left(`${xPos}px`);
+    strategy.top(`${yPos}px`);
+    this.overlayRef.updatePosition();
+  }
+
+  @HostListener("mouseenter", ["$event"])
+  show(event: MouseEvent) {
+    if(!this.overlayRef) {
+      const positionStrategy = this.overlay
+        .position()
+        .global()
+        // start somewhere offscreen; reposition immediately
+        .left("0px")
+        .top("0px");
+
+      this.overlayRef = this.overlay.create({
+        positionStrategy,
+        scrollStrategy: this.overlay.scrollStrategies.reposition()
+      });
+    }
+
+    this.portal = new TemplatePortal(
+      this.content,
+      this.viewContainerRef
+    );
+    this.overlayRef.attach(this.portal);
+
+    // initial positioning
+    this.updatePosition(event);
+  }
+
+  @HostListener("mouseleave")
+  hide() {
+    if(this.overlayRef) {
+      // remove the overlay
+      this.overlayRef.detach();
+    }
+  }
+}

package/src/app/models/report.model.ts

@@ -0,0 +1,48 @@
+type VoteGroup = {
+  agreeCount: number,
+  disagreeCount: number,
+  passCount: number,
+};
+
+type Statement = {
+  id: string,
+  text: string,
+  votes: object,
+  topics: string,
+  passRate: number,
+  agreeRate: number,
+  disagreeRate: number,
+  isHighAlignment: boolean,
+  highAlignmentScore: number,
+  isLowAlignment: boolean,
+  lowAlignmentScore: number,
+  isHighUncertainty: boolean,
+  highUncertaintyScore: number,
+  isFilteredOut: boolean,
+};
+
+type Subtopic = {
+  name: string,
+  commentCount: number,
+  voteCount: number,
+  relativeAlignment: string,
+  relativeEngagement: string,
+  comments?: Statement[],
+  id?: string,
+};
+
+type Topic = {
+  name: string,
+  commentCount: number,
+  voteCount: number,
+  relativeAlignment: string,
+  relativeEngagement: string,
+  subtopicStats: Subtopic[],
+};
+
+export {
+  VoteGroup,
+  Statement,
+  Subtopic,
+  Topic,
+};