Simplify timelines UI/reuse UI elements

ui/package.json

@@ -30,6 +30,7 @@
     "d3-force": "^3.0.0",
     "d3-scale": "^4.0.2",
     "dagre": "^0.8.5",
+    "date-fns": "^2.29.3",
     "google-libphonenumber": "^3.2.31",
     "http-proxy-middleware": "^2.0.0",
     "js-file-download": "^0.4.9",
@@ -108,6 +109,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "@types/d3-force": "^3.0.4",
     "@types/d3-scale": "^4.0.3",
     "@types/dagre": "^0.7.47",

ui/src/app/App.scss

@@ -8,6 +8,7 @@
 @import './layouts.scss';
 @import './blueprint-overrides.scss';
 @import 'app/mixins.scss';
+@import 'app/utils.scss';
 
 html {
   height: 100%;

ui/src/app/utils.scss

@@ -0,0 +1,11 @@
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}

ui/src/app/variables.scss

@@ -29,7 +29,7 @@ $aleph-table-border-color: $light-gray2;
 $aleph-content-background: white;
 $aleph-border-color: $light-gray2;
 
-$aleph-greyed-text: $gray3;
+$aleph-greyed-text: $pt-text-color-muted;
 $aleph-theme-intent: $aleph-link-color;
 $aleph-profile-dark: $gold2;
 $aleph-profile-light: $gold5;

ui/src/components/Document/DocumentDropzone.scss

@@ -4,6 +4,9 @@
 .DocumentDropzone {
   flex-grow: 1;
   &__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
     min-height: 100%;
     &.active {
       position: relative;

ui/src/components/Timeline/EntityViewer2.scss

@@ -0,0 +1,25 @@
+@import 'app/variables.scss';
+
+.EntityViewer2 {
+  display: grid;
+  gap: 2 * $aleph-grid-size;
+  padding-top: 5 * $aleph-grid-size;
+}
+
+.EntityViewer2__header {
+  text-align: center;
+}
+
+.EntityViewer2__caption {
+  margin-top: 0.5 * $aleph-grid-size;
+  margin-bottom: 0;
+}
+
+.EntityViewer2__schema {
+  color: $aleph-greyed-text;
+}
+
+.EntityViewer2__color {
+  width: 75%;
+  justify-self: center;
+}

ui/src/components/Timeline/EntityViewer2.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from 'testUtils';
+import { Entity, Model, defaultModel } from '@alephdata/followthemoney';
+import EntityViewer2 from './EntityViewer2';
+
+const defaultProps = {
+  fetchEntitySuggestions: async () => [],
+  writeable: true,
+  onVertexChange: () => {},
+  onEntityChange: () => {},
+};
+
+const model = new Model(defaultModel);
+let entity: Entity;
+
+beforeEach(() => {
+  entity = model.getEntity({
+    id: '1',
+    schema: 'Company',
+    properties: {
+      name: ['ACME, Inc.'],
+    },
+  });
+});
+
+it('renders schema name and entity caption', () => {
+  const vertex = { entityId: '1' };
+  render(<EntityViewer2 {...defaultProps} entity={entity} vertex={vertex} />);
+  expect(screen.getByText('Company')).toBeInTheDocument();
+  expect(screen.getByRole('heading', { name: 'ACME, Inc.' }));
+});
+
+it('renders a color picker', () => {
+  const vertex = { entityId: '1', color: 'green' };
+  render(<EntityViewer2 {...defaultProps} entity={entity} vertex={vertex} />);
+  const picker = document.querySelector(
+    '.ColorPicker [style*="background-color: green"]'
+  );
+  expect(picker).toBeInTheDocument();
+});
+
+it('renders properties', () => {
+  const vertex = { entityId: '1' };
+  render(<EntityViewer2 {...defaultProps} entity={entity} vertex={vertex} />);
+  expect(screen.getByText('Name')).toBeInTheDocument();
+  expect(screen.getByText('Incorporation date')).toBeInTheDocument();
+});

ui/src/components/Timeline/EntityViewer2.tsx

@@ -0,0 +1,56 @@
+import { FC } from 'react';
+import { Entity } from '@alephdata/followthemoney';
+import { Schema } from 'src/react-ftm/types';
+import { DEFAULT_COLOR } from './Timeline';
+import type { Vertex, FetchEntitySuggestions } from './types';
+import EntityViewerProperties from './EntityViewerProperties';
+import { ColorPicker } from 'src/react-ftm';
+
+import './EntityViewer2.scss';
+
+type EntityViewer2Props = {
+  entity: Entity;
+  vertex: Vertex;
+  fetchEntitySuggestions: FetchEntitySuggestions;
+  writeable?: boolean;
+  onVertexChange: (vertex: Vertex) => void;
+  onEntityChange: (entity: Entity) => void;
+};
+
+const EntityViewer2: FC<EntityViewer2Props> = ({
+  entity,
+  vertex,
+  fetchEntitySuggestions,
+  writeable,
+  onVertexChange,
+  onEntityChange,
+}) => {
+  const currentColor = vertex?.color || DEFAULT_COLOR;
+
+  return (
+    <article className="EntityViewer2">
+      <header className="EntityViewer2__header">
+        <div className="EntityViewer2__schema">
+          <Schema.Label schema={entity.schema} icon />
+        </div>
+        <h2 className="EntityViewer2__caption">{entity.getCaption()}</h2>
+      </header>
+      <div className="EntityViewer2__color">
+        {writeable && (
+          <ColorPicker
+            currSelected={currentColor}
+            onSelect={(color) => onVertexChange({ ...vertex, color })}
+          />
+        )}
+      </div>
+      <EntityViewerProperties
+        entity={entity}
+        fetchEntitySuggestions={fetchEntitySuggestions}
+        writeable={writeable}
+        onChange={(entity) => onEntityChange(entity)}
+      />
+    </article>
+  );
+};
+
+export default EntityViewer2;

ui/src/components/Timeline/EntityViewerProperties.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from 'testUtils';
+import userEvent from '@testing-library/user-event';
+import { Entity, Model, defaultModel } from '@alephdata/followthemoney';
+import EntityViewerProperties from './EntityViewerProperties';
+
+const defaultProps = {
+  fetchEntitySuggestions: async () => [],
+  writeable: true,
+  onChange: () => {},
+};
+
+const model = new Model(defaultModel);
+let entity: Entity;
+
+beforeEach(() => {
+  entity = model.getEntity({
+    id: '1',
+    schema: 'Company',
+  });
+});
+
+it('renders featured, temporal, and non-empty properties', () => {
+  const { rerender } = render(
+    <EntityViewerProperties {...defaultProps} entity={entity} />
+  );
+
+  // Featured
+  expect(screen.getByText('Name')).toBeInTheDocument();
+  expect(screen.getByText('Jurisdiction')).toBeInTheDocument();
+  expect(screen.getByText('Registration number')).toBeInTheDocument();
+
+  // Temporal
+  expect(screen.getByText('Incorporation date')).toBeInTheDocument();
+  expect(screen.getByText('Dissolution date')).toBeInTheDocument();
+
+  // Non empty
+  entity.setProperty('wikidataId', 'Q7102061');
+  rerender(<EntityViewerProperties {...defaultProps} entity={entity} />);
+  expect(screen.getByText('Wikidata ID')).toBeInTheDocument();
+});
+
+it('can add any other editable property', async () => {
+  render(<EntityViewerProperties {...defaultProps} entity={entity} />);
+
+  // There is no editor for the Wikidata ID
+  expect(screen.queryByText('Wikidata ID')).toBeNull();
+
+  await userEvent.click(screen.getByRole('button', { name: 'Add a property' }));
+  await userEvent.click(screen.getByRole('menuitem', { name: 'Wikidata ID' }));
+
+  // Now there is an editor for the dissolution date
+  expect(screen.getByText('Wikidata ID').matches('.EditableProperty *')).toBe(
+    true
+  );
+
+  // Can't add a property twice
+  await userEvent.click(screen.getByRole('button', { name: 'Add a property' }));
+  expect(screen.queryByRole('menuitem', { name: 'Wikidata ID' })).toBeNull();
+});
+
+it('cannot add properties if not writeable', () => {
+  render(
+    <EntityViewerProperties
+      {...defaultProps}
+      writeable={false}
+      entity={entity}
+    />
+  );
+
+  expect(screen.queryByRole('button', { name: 'Add a property' })).toBeNull();
+});