Merge pull request #1777 from ProjectMirador/react-mosaic

React mosaic proof of concept with redux state management

__tests__/integration/mirador/thumbnail-navigation.test.js

@@ -3,13 +3,6 @@
 describe('Thumbnail navigation', () => {
   beforeAll(async () => {
     await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
-    await expect(page).toClick('#addBtn');
-    await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/019');
-    await expect(page).toClick('#fetchBtn');
-    // TODO: Refactor the app so we get rid of the wait
-    await page.waitFor(1000);
-    await expect(page).toClick('.mirador-manifest-list-item');
-    await page.waitFor(1000);
   });
 
   it('navigates a manifest using thumbnail navigation', async () => {

__tests__/src/actions/workspace.test.js

@@ -13,4 +13,15 @@ describe('workspace actions', () => {
       expect(actions.fullscreenWorkspace(options)).toEqual(expectedAction);
     });
   });
+  describe('updateWorkspaceMosaicLayout', () => {
+    it('should updates mosaic layout', () => {
+      const options = { foo: 'bar' };
+
+      const expectedAction = {
+        type: ActionTypes.UPDATE_WORKSPACE_MOSAIC_LAYOUT,
+        layout: { foo: 'bar' },
+      };
+      expect(actions.updateWorkspaceMosaicLayout(options)).toEqual(expectedAction);
+    });
+  });
 });

__tests__/src/components/Window.test.js

@@ -10,8 +10,6 @@ describe('Window', () => {
   it('should render outer element', () => {
     wrapper = shallow(<Window window={window} />);
     expect(wrapper.find('.mirador-window')).toHaveLength(1);
-    expect(wrapper.instance().styleAttributes())
-      .toEqual({ width: '400px', height: '500px' });
   });
   it('should render <WindowTopBar>', () => {
     wrapper = shallow(<Window window={window} />);

__tests__/src/components/Workspace.test.js

@@ -5,8 +5,30 @@ import Window from '../../../src/containers/Window';
 
 describe('Workspace', () => {
   const windows = { 1: { id: 1 }, 2: { id: 2 } };
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(
+      <Workspace
+        windows={windows}
+        config={{ workspace: { type: 'mosaic' } }}
+      />,
+    );
+  });
   it('should render properly', () => {
-    const wrapper = shallow(<Workspace windows={windows} />);
+    expect(wrapper.find('.mirador-workspace').length).toBe(1);
+    expect(wrapper.find('Connect(WorkspaceMosaic)').length).toBe(1);
+  });
+  describe('workspaceByType', () => {
+    it('when mosaic', () => {
+      expect(wrapper.find('Connect(WorkspaceMosaic)').length).toBe(1);
+    });
+    it('anything else', () => {
+      wrapper = shallow(
+        <Workspace
+          windows={windows}
+          config={{ workspace: { type: 'foo' } }}
+        />,
+      );
       expect(wrapper.matchesElement(
         <div className="mirador-workspace">
           <Window window={{ id: 1 }} />
@@ -15,3 +37,4 @@ describe('Workspace', () => {
       )).toBe(true);
     });
   });
+});

__tests__/src/components/WorkspaceMosaic.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import { Mosaic } from 'react-mosaic-component';
+import WorkspaceMosaic from '../../../src/components/WorkspaceMosaic';
+
+describe('WorkspaceMosaic', () => {
+  const windows = { 1: { id: 1 }, 2: { id: 2 } };
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(
+      <WorkspaceMosaic
+        windows={windows}
+        workspace={{}}
+        updateWorkspaceMosaicLayout={() => {}}
+      />,
+    );
+  });
+  it('should render properly with an initialValue', () => {
+    expect(wrapper.matchesElement(
+      <Mosaic initialValue={{ direction: 'row', first: '1', second: '2' }} />,
+    )).toBe(true);
+  });
+  describe('determineWorkspaceLayout', () => {
+    it('when window ids do not match workspace layout', () => {
+      wrapper = shallow(
+        <WorkspaceMosaic
+          windows={windows}
+          workspace={{ layout: 'foo' }}
+          updateWorkspaceMosaicLayout={() => {}}
+        />,
+      );
+      expect(wrapper.instance().determineWorkspaceLayout()).toMatchObject({
+        direction: 'row', first: '1', second: '2',
+      });
+    });
+    it('when window ids match workspace layout', () => {
+      wrapper = shallow(
+        <WorkspaceMosaic
+          windows={{ foo: { id: 'foo' } }}
+          workspace={{ layout: 'foo' }}
+          updateWorkspaceMosaicLayout={() => {}}
+        />,
+      );
+      expect(wrapper.instance().determineWorkspaceLayout()).toBeNull();
+    });
+  });
+  describe('tileRenderer', () => {
+    it('when window is available', () => {
+      expect(wrapper.instance().tileRenderer('1')).not.toBeNull();
+    });
+    it('when window is not available', () => {
+      expect(wrapper.instance().tileRenderer('bar')).toBeNull();
+    });
+  });
+  describe('mosaicChange', () => {
+    it('calls the provided prop to update layout', () => {
+      const mock = jest.fn();
+      wrapper = shallow(
+        <WorkspaceMosaic
+          windows={{ foo: { id: 'foo' } }}
+          workspace={{ layout: 'foo' }}
+          updateWorkspaceMosaicLayout={mock}
+        />,
+      );
+      wrapper.instance().mosaicChange();
+      expect(mock).toBeCalled();
+    });
+  });
+});

__tests__/src/reducers/workspace.test.js

@@ -18,4 +18,12 @@ describe('workspace reducer', () => {
       fullscreen: true,
     });
   });
+  it('should handle UPDATE_WORKSPACE_MOSAIC_LAYOUT', () => {
+    expect(reducer([], {
+      type: ActionTypes.UPDATE_WORKSPACE_MOSAIC_LAYOUT,
+      layout: { foo: 'bar' },
+    })).toEqual({
+      layout: { foo: 'bar' },
+    });
+  });
 });

package.json

@@ -43,6 +43,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.4.0",
     "react-fullscreen-crossbrowser": "^1.0.9",
+    "react-mosaic-component": "^2.0.2",
     "react-redux": "^6.0.0",
     "react-virtualized": "^9.21.0",
     "redux": "4.0.1",

src/components/Window.js

@@ -10,21 +10,13 @@ import ThumbnailNavigation from '../containers/ThumbnailNavigation';
  * @param {object} window
  */
 class Window extends Component {
-  /**
-   * Return style attributes
-   */
-  styleAttributes() {
-    const { window } = this.props;
-    return { width: `${window.xywh[2]}px`, height: `${window.xywh[3]}px` };
-  }
-
   /**
    * Renders things
    */
   render() {
     const { manifest, window } = this.props;
     return (
-      <div className={ns('window')} style={this.styleAttributes()}>
+      <div className={ns('window')}>
         <WindowTopBar
           windowId={window.id}
           manifest={manifest}

src/components/Workspace.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import Window from '../containers/Window';
+import WorkspaceMosaic from '../containers/WorkspaceMosaic';
 import ns from '../config/css-ns';
 
 /**
@@ -10,20 +11,38 @@ import ns from '../config/css-ns';
  */
 class Workspace extends React.Component {
   /**
-   * render
    */
-  render() {
-    const { windows } = this.props;
-    return (
-      <div className={ns('workspace')}>
-        {
-          Object.values(windows).map(window => (
+  constructor(props) {
+    super(props);
+
+    this.workspaceByType = this.workspaceByType.bind(this);
+  }
+
+  /**
+   * Determine which workspace to render by configured type
+   */
+  workspaceByType() {
+    const { config, windows } = this.props;
+    switch (config.workspace.type) {
+      case 'mosaic':
+        return <WorkspaceMosaic windows={windows} />;
+      default:
+        return Object.values(windows).map(window => (
           <Window
             key={window.id}
             window={window}
           />
-          ))
+        ));
     }
+  }
+
+  /**
+   * render
+   */
+  render() {
+    return (
+      <div className={ns('workspace')}>
+        {this.workspaceByType()}
       </div>
     );
   }
@@ -31,6 +50,7 @@ class Workspace extends React.Component {
 
 Workspace.propTypes = {
   windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  config: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
 export default Workspace;

src/components/WorkspaceMosaic.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Mosaic, getLeaves, createBalancedTreeFromLeaves,
+} from 'react-mosaic-component';
+import 'react-mosaic-component/react-mosaic-component.css';
+import Window from '../containers/Window';
+
+/**
+ * Represents a work area that contains any number of windows
+ * @memberof Workspace
+ * @private
+ */
+class WorkspaceMosaic extends React.Component {
+  /**
+   */
+  constructor(props) {
+    super(props);
+
+    this.tileRenderer = this.tileRenderer.bind(this);
+    this.mosaicChange = this.mosaicChange.bind(this);
+    this.determineWorkspaceLayout = this.determineWorkspaceLayout.bind(this);
+  }
+
+  /**
+   * Render a tile (Window) in the Mosaic.
+   */
+  tileRenderer(id, path) {
+    const { windows } = this.props;
+    const window = windows[id];
+    if (!window) return null;
+    return (
+      <Window
+        key={window.id}
+        window={window}
+      />
+    );
+  }
+
+  /**
+   * Update the redux store when the Mosaic is changed.
+   */
+  mosaicChange(newLayout) {
+    const { updateWorkspaceMosaicLayout } = this.props;
+    updateWorkspaceMosaicLayout(newLayout);
+  }
+
+  /**
+   * Used to determine whether or not a "new" layout should be autogenerated.
+   * If a Window is added or removed, generate that new layout and use that for
+   * this render. When the Mosaic changes, that will trigger a new store update.
+   */
+  determineWorkspaceLayout() {
+    const { windows, workspace } = this.props;
+    const windowKeys = Object.keys(windows);
+    const leaveKeys = getLeaves(workspace.layout);
+    // Check every window is in the layout, and all layout windows are present
+    // in store
+    if (!windowKeys.every(e => leaveKeys.includes(e))
+    || !leaveKeys.every(e => windowKeys.includes(e))) {
+      const newLayout = createBalancedTreeFromLeaves(windowKeys);
+      return newLayout;
+    }
+    return null;
+  }
+
+  /**
+   */
+  render() {
+    const { workspace } = this.props;
+    const newLayout = this.determineWorkspaceLayout();
+    return (
+      <Mosaic
+        renderTile={this.tileRenderer}
+        initialValue={newLayout || workspace.layout}
+        onChange={this.mosaicChange}
+        className="mirador-mosaic"
+        zeroStateView={<div />}
+      />
+    );
+  }
+}
+
+
+WorkspaceMosaic.propTypes = {
+  updateWorkspaceMosaicLayout: PropTypes.func.isRequired,
+  windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  workspace: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+export default WorkspaceMosaic;

src/config/settings.js

@@ -4,4 +4,7 @@ export default {
     defaultPosition: 'bottom',
     height: 150,
   },
+  workspace: {
+    type: 'mosaic',
+  }
 };

src/containers/Window.js

@@ -7,8 +7,9 @@ import Window from '../components/Window';
  * @memberof Window
  * @private
  */
-const mapStateToProps = ({ manifests }, props) => ({
+const mapStateToProps = ({ manifests, windows }, props) => ({
   manifest: manifests[props.window.manifestId],
+  window: windows[props.window.id],
 });
 
 const enhance = compose(

src/containers/Workspace.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import * as actions from '../state/actions';
 import Workspace from '../components/Workspace';
 
 /**
@@ -9,6 +10,7 @@ import Workspace from '../components/Workspace';
  */
 const mapStateToProps = state => (
   {
+    config: state.config,
     windows: state.windows,
   }
 );

src/containers/WorkspaceMosaic.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import * as actions from '../state/actions';
+import WorkspaceMosaic from '../components/WorkspaceMosaic';
+
+/**
+ * mapStateToProps - to hook up connect
+ * @memberof Workspace
+ * @private
+ */
+const mapStateToProps = state => (
+  {
+    workspace: state.workspace,
+  }
+);
+
+
+/**
+ * mapDispatchToProps - used to hook up connect to action creators
+ * @memberof Workspace
+ * @private
+ */
+const mapDispatchToProps = { updateWorkspaceMosaicLayout: actions.updateWorkspaceMosaicLayout };
+
+const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  // further HOC go here
+);
+
+export default enhance(WorkspaceMosaic);

src/state/actions/action-types.js

@@ -20,6 +20,7 @@ const ActionTypes = {
   RECEIVE_INFO_RESPONSE: 'RECEIVE_INFO_RESPONSE',
   RECEIVE_INFO_RESPONSE_FAILURE: 'RECEIVE_INFO_RESPONSE_FAILURE',
   REMOVE_INFO_RESPONSE: 'REMOVE_INFO_RESPONSE',
+  UPDATE_WORKSPACE_MOSAIC_LAYOUT: 'UPDATE_WORKSPACE_MOSAIC_LAYOUT',
 };
 
 export default ActionTypes;

src/state/actions/workspace.js

@@ -10,3 +10,13 @@ import ActionTypes from './action-types';
 export function fullscreenWorkspace(fullscreen) {
   return { type: ActionTypes.FULLSCREEN_WORKSPACE, fullscreen };
 }
+
+/**
+ * updateWorkspaceMosaicLayout - action creator
+ *
+ * @param  {Object} layout
+ * @memberof ActionCreators
+ */
+export function updateWorkspaceMosaicLayout(layout) {
+  return { type: ActionTypes.UPDATE_WORKSPACE_MOSAIC_LAYOUT, layout };
+}

src/state/reducers/workspace.js

@@ -9,6 +9,8 @@ const workspaceReducer = (state = {}, action) => {
       return { ...state, focusedWindowId: action.windowId };
     case ActionTypes.FULLSCREEN_WORKSPACE:
       return { ...state, fullscreen: action.fullscreen };
+    case ActionTypes.UPDATE_WORKSPACE_MOSAIC_LAYOUT:
+      return { ...state, layout: action.layout };
     default:
       return state;
   }

src/styles/index.scss

@@ -27,6 +27,7 @@ body {
   &-window {
     display: flex;
     flex-direction: column;
+    height: 100%;
   }
 
   &-osd-container {