@cosla/sensemaking-web-ui 1.0.0

package/README.md

@@ -0,0 +1,35 @@
+# web-ui
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.1.
+
+For setup and basic usage, see the `README.md` file in the root of this repository.
+What follows is web-ui-side developer-specific information, autogenerated from Angular.
+
+## Running
+
+```bash
+cd web-ui
+npm run dev
+```
+
+Note that this will run both the web-ui build & serve process, and the backend server.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/angular.json

@@ -0,0 +1,116 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "web-ui": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/web-ui",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
+              "src/styles.scss"
+            ],
+            "scripts": [],
+            "server": "src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "server.ts"
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "20MB",
+                  "maximumError": "20MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "100kB",
+                  "maximumError": "100kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "web-ui:build:production"
+            },
+            "development": {
+              "buildTarget": "web-ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "host": "0.0.0.0",
+            "port": 4200
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "6ff4f325-17ba-4fbb-ae7e-d93e98737dc5"
+  }
+}

package/health_check.js

@@ -0,0 +1,68 @@
+const esbuild = require("esbuild");
+const jsdom = require("jsdom");
+const fs = require("fs");
+const path = require("path");
+
+const { JSDOM } = jsdom;
+
+const argv = process.argv.slice(2);
+function getArgValue(names) {
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    for (const name of names) {
+      if (a === name && argv[i + 1]) return argv[i + 1];
+      if (a.startsWith(name + "=")) return a.split("=", 2)[1];
+    }
+  }
+  return undefined;
+}
+
+const outputFilePath = getArgValue(["-o", "--outputFile"]) || "dist/health-check.html";
+const outputDir = path.dirname(outputFilePath);
+
+fs.mkdirSync(outputDir, { recursive: true });
+
+const dom = new JSDOM(`<!DOCTYPE html>
+<html>
+<head>
+  <title>Web-UI Health Check</title>
+</head>
+<body>
+  <h1>Hello World</h1>
+  <p>Web-UI health check passed!</p>
+</body>
+</html>`);
+
+const simpleScript = `
+console.log('Health check: Web-UI dependencies are working!');
+`;
+
+esbuild
+  .build({
+    stdin: {
+      contents: simpleScript,
+      loader: "js",
+    },
+    bundle: true,
+    minify: true,
+    format: "iife",
+    write: false,
+  })
+  .then(
+    (result) => {
+      const scriptSrc = result.outputFiles[0].text;
+      const script = dom.window.document.createElement("script");
+      script.innerHTML = scriptSrc;
+      dom.window.document.body.appendChild(script);
+
+      fs.writeFileSync(outputFilePath, dom.serialize());
+      console.log(`Health check HTML file created at ${path.resolve(outputFilePath)}`);
+      console.log("✓ Web-UI health check passed");
+      process.exit(0);
+    },
+    (error) => {
+      console.error("Health check failed:", error);
+      process.exit(1);
+    }
+  );
+

package/karma.conf.js

@@ -0,0 +1,43 @@
+// karma.conf.js
+module.exports = function (config) {
+  config.set({
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
+    plugins: [
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage"),
+      require("@angular-devkit/build-angular/plugins/karma"),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Jasmine/Jasmine
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require("path").join(__dirname, "./coverage/web-ui"),
+      subdir: ".",
+      reporters: [{ type: "html" }, { type: "text-summary" }],
+    },
+    reporters: ["progress", "kjhtml"],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true, //this will be overriden by the test command
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: "ChromeHeadless",
+        flags: ["--no-sandbox"],
+      },
+    },
+    browsers: ["ChromeHeadlessNoSandbox"], // Run in Headless Chrome
+    singleRun: false, // Set to false for continuous testing, true to run once,
+    restartOnFileChange: true,
+  });
+};

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@cosla/sensemaking-web-ui",
+  "version": "1.0.0",
+  "description": "Provides interactive visualizations and report from sensemaking-tools output. Fork of Jigsaw's sensemaking-tools web-ui (https://github.com/Jigsaw-Code/sensemaking-tools).",
+  "homepage": "https://github.com/CoslaDigital/sensemaking-tools#readme",
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test --watch=false --browsers=ChromeHeadlessNoSandbox --code-coverage",
+    "serve:ssr:web-ui": "node dist/web-ui/server/server.mjs",
+    "start:api-server": "nodemon --watch ../api-server --watch ../library ../api-server/index.ts",
+    "start:web-ui": "ng serve",
+    "dev": "concurrently --kill-others \"npm run start:api-server\" \"npm run start:web-ui\"",
+    "prepublishOnly": "echo 'Publishing @cosla/sensemaking-web-ui'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CoslaDigital/sensemaking-tools.git"
+  },
+  "keywords": [
+    "sensemaking",
+    "angular",
+    "visualization",
+    "civic-tech",
+    "public-input",
+    "data-visualization",
+    "web-ui",
+    "dashboard"
+  ],
+  "author": "CoslaDigital",
+  "license": "ISC",
+  "files": [
+    "src/**/*",
+    "public/**/*",
+    "angular.json",
+    "tsconfig.json",
+    "tsconfig.app.json",
+    "tsconfig.spec.json",
+    "karma.conf.js",
+    "server.ts",
+    "site-build.ts",
+    "single-html-build.js",
+    "health_check.js",
+    "package.json",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@angular/animations": "18.2.13",
+    "@angular/cdk": "18.2.13",
+    "@angular/common": "18.2.13",
+    "@angular/compiler": "18.2.13",
+    "@angular/core": "18.2.13",
+    "@angular/forms": "18.2.13",
+    "@angular/material": "18.2.13",
+    "@angular/platform-browser": "18.2.13",
+    "@angular/platform-browser-dynamic": "18.2.13",
+    "@angular/platform-server": "18.2.13",
+    "@angular/router": "18.2.13",
+    "@angular/ssr": "18.2.13",
+    "@conversationai/sensemaker-visualizations": "^1.0.46",
+    "@sinclair/typebox": "^0.34.27",
+    "express": "^4.18.2",
+    "ngx-markdown": "^18.0.0",
+    "papaparse": "^5.4.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "18.2.13",
+    "@angular/cli": "18.2.13",
+    "@angular/compiler-cli": "18.2.13",
+    "@types/express": "^4.17.17",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
+    "@types/papaparse": "^5.3.14",
+    "concurrently": "^9.0.1",
+    "jasmine-core": "~5.1.0",
+    "jsdom": "^26.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "nodemon": "^3.1.4",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.5.2"
+  }
+}

package/server.ts

@@ -0,0 +1,60 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr';
+import express from 'express';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+import bootstrap from './src/main.server';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
+
+  const commonEngine = new CommonEngine();
+
+  server.set('view engine', 'html');
+  server.set('views', browserDistFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get(
+    '**',
+    express.static(browserDistFolder, {
+      maxAge: '1y',
+      index: 'index.html',
+    })
+  );
+
+  // All regular routes use the Angular engine
+  server.get('**', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: browserDistFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || 4200;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+run();

package/single-html-build.js

@@ -0,0 +1,100 @@
+const esbuild = require("esbuild");
+const jsdom = require("jsdom");
+const fs = require("fs");
+const path = require("path");
+
+const { JSDOM } = jsdom;
+const srcDir = "dist/web-ui/browser";
+const defaultDestDir = "dist/bundled";
+
+// Parse CLI args for output file path (supports -o value, --outputFile value, and --outputFile=value)
+const argv = process.argv.slice(2);
+function getArgValue(names) {
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    for (const name of names) {
+      if (a === name && argv[i + 1]) return argv[i + 1];
+      if (a.startsWith(name + "=")) return a.split("=", 2)[1];
+    }
+  }
+  return undefined;
+}
+
+const outputFilePath = getArgValue(["-o", "--outputFile"]) || `${defaultDestDir}/report.html`;
+const outputDir = path.dirname(outputFilePath);
+
+fs.mkdirSync(outputDir, { recursive: true });
+
+const indexFilePath = srcDir + "/index.csr.html"; // this is the root html file from the build
+const htmlSource = fs.readFileSync(indexFilePath);
+const dom = new JSDOM(htmlSource.toString());
+
+let mainScript;
+let scriptsToInject = [];
+
+const isUrl = string => {
+  try {
+    return Boolean(new URL(string));
+  } catch (e) {
+    return false;
+  }
+};
+
+const scriptTags = Array.from(dom.window.document.getElementsByTagName("script"));
+scriptTags.forEach((e) => {
+  let fileName = e.getAttribute("src");
+  if(fileName && !isUrl(fileName)) {
+    let scriptPath = srcDir + "/" + fileName;
+    if(fileName.includes("main-")) {
+      mainScript = scriptPath;
+    } else {
+      scriptsToInject.push(scriptPath);
+    }
+    e.remove();
+  }
+});
+
+const linkTags = Array.from(dom.window.document.getElementsByTagName("link"));
+linkTags.forEach((e) => {
+  const rel = e.getAttribute("rel");
+  const href = e.getAttribute("href");
+  const media = e.getAttribute("media");
+  if(rel === "stylesheet" && !isUrl(href) && media === "print") {
+    e.remove();
+    let styleFile = srcDir + "/" + href;
+    // Add the stylesheet to dom as inline.
+    const style = dom.window.document.createElement("style");
+    style.innerHTML = fs.readFileSync(styleFile).toString();
+    dom.window.document.body.appendChild(style);
+  }
+  // find and remove unused resources to prevent console errors
+  if(rel === "modulepreload" || rel === "icon") {
+    e.remove();
+  }
+});
+
+// write JS to memory, then add to DOM, then write HTML file
+esbuild
+  .build({
+    entryPoints: [mainScript],
+    inject: scriptsToInject,
+    bundle: true,
+    minify: true,
+    sourcemap: false,
+    outfile: path.join(outputDir, "bundled.js"), // file won't be created, but property is still required when writing to memory
+    format: "esm",
+    write: false, // places JS in memory instead of writing to file
+  })
+  .then(
+    (result) => {
+      const scriptSrc = result.outputFiles[0].text;
+      const script = dom.window.document.createElement("script");
+      script.innerHTML = scriptSrc;
+      dom.window.document.body.appendChild(script);
+
+      // do not rename file to "index.html"; causes a break
+      fs.writeFileSync(outputFilePath, dom.serialize());
+      console.log(`Report HTML file created at ${path.resolve(outputFilePath)}`);
+    },
+    (error) => console.error(error),
+  );

package/site-build.ts

@@ -0,0 +1,54 @@
+const { Command } = require("commander");
+const { copyFileSync, writeFileSync } = require("fs");
+const path = require("path");
+const { exec, ExecException } = require("child_process");
+
+async function main(): Promise<void> {
+  // Parse command line arguments.
+  const program = new Command();
+  program.option("-t, --topics <file>", "The topics file location.");
+  program.option("-s, --summary <file>", "The summary file location.");
+  program.option("-c, --comments <file>", "The comments file location.");
+  program.option("-r, --reportTitle <title>", "The title of the report.");
+  program.parse(process.argv);
+  const options = program.opts();
+
+  if(!options["topics"]) {
+    throw Error("Topics file path not specified");
+  }
+  if(!options["summary"]) {
+    throw Error("Summary file path not specified");
+  }
+  if(!options["comments"]) {
+    throw Error("Comments file path not specified");
+  }
+  if(!options["reportTitle"]) {
+    throw Error("Report title not specified");
+  }
+
+  const reportMetadata = {
+    title: options["reportTitle"],
+  };
+
+  // path to "data" folder
+  const baseOutputPath = path.join(__dirname, "./data");
+
+  copyFileSync(options["topics"], path.join(baseOutputPath, "/topic-stats.json"));
+  copyFileSync(options["summary"], path.join(baseOutputPath, "/summary.json"));
+  copyFileSync(options["comments"], path.join(baseOutputPath, "/comments.json"));
+  writeFileSync(path.join(baseOutputPath, "/metadata.json"), JSON.stringify(reportMetadata, null, 2));
+
+  await exec("npm run build", (error: typeof ExecException | null, stdout: string, stderr: string) => {
+    if(error) {
+      console.error(`Build failed: ${error.message}`);
+      return;
+    }
+    if(stderr) {
+      console.error(`Build errors/warnings: ${stderr}`);
+    }
+    console.log(`Build output: ${stdout}`);
+    console.log("Build complete");
+  });
+}
+
+main();

package/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

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

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+import { CommonModule } from '@angular/common';
+
+describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        AppComponent,
+      ],
+      declarations: [],
+      providers: [],
+    })
+      .overrideComponent(AppComponent, {
+        remove: { imports: [] },
+        add: { imports: [] },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create the app', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/app.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { MatIconRegistry } from "@angular/material/icon";
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    RouterOutlet,
+  ],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
+})
+export class AppComponent {
+  constructor(private matIconRegistry: MatIconRegistry) {
+    // set defaults for all material icons:
+    //   use symbols (instead of icons)
+    //   use "outlined" variation
+    this.matIconRegistry.setDefaultFontSetClass("material-symbols-outlined");
+  }
+}

package/src/app/app.config.server.ts

@@ -0,0 +1,9 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering()],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

package/src/app/app.config.ts

@@ -0,0 +1,19 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideMarkdown } from 'ngx-markdown';
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideMarkdown(),
+    provideAnimations(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideClientHydration(),
+    provideAnimationsAsync(),
+    provideAnimationsAsync(),
+  ],
+};

package/src/app/app.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+import { ReportComponent } from './pages/report/report.component';
+
+export const routes: Routes = [
+  // Wildcard route is necessary for building "single HTML file" report.
+  // Do not change path to anything else.
+  { path: "**", component: ReportComponent },
+];