@reltio/components 1.4.1997 → 1.4.1999

package/cjs/features/activity-log/RecordUpdates/RecordUpdates.test.js

@@ -0,0 +1,207 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var CollapsibleItemsContext_1 = require("../contexts/CollapsibleItemsContext");
+var RecordUpdates_1 = require("./RecordUpdates");
+var defaultUpdates = [
+    {
+        type: 'ATTRIBUTE_CHANGED',
+        attributeType: 'configuration/entityTypes/HCP/attributes/TextField',
+        newValue: { value: 'new text field value', ov: true, id: '3UIcE257b', sources: ['Reltio'] },
+        oldValue: { value: 'old text field value', ov: true, id: '3UIcE257b', sources: ['Reltio'] }
+    },
+    {
+        type: 'ATTRIBUTE_ADDED',
+        attributeType: 'configuration/entityTypes/HCP/attributes/FirstName',
+        newValue: { value: 'added first name value', ov: true, id: 'hsJ2b41', sources: ['Reltio'] }
+    },
+    {
+        type: 'ATTRIBUTE_REMOVED',
+        attributeType: 'configuration/entityTypes/HCP/attributes/LastName',
+        oldValue: { value: 'removed last name value', ov: true, id: 'Js23Ma09Ui', sources: ['Reltio'] }
+    },
+    {
+        type: 'ATTRIBUTE_CHANGED',
+        attributeType: 'configuration/entityTypes/HCP/attributes/Double',
+        newValue: { value: '1234.56789', ov: true, id: '83Ks3pOl2', sources: ['Reltio'] },
+        oldValue: { value: '98765.4321', ov: true, id: '83Ks3pOl2', sources: ['Reltio'] }
+    },
+    {
+        type: 'ATTRIBUTE_CHANGED',
+        attributeType: 'configuration/entityTypes/HCP/attributes/Boolean',
+        newValue: { value: 'true', ov: true, id: '3UIcE257b', sources: ['Reltio'] },
+        oldValue: { value: 'false', ov: true, id: '3UIcE257b', sources: ['Reltio'] }
+    }
+];
+var defaultProps = {
+    recordId: 'record-id',
+    updates: defaultUpdates
+};
+var defaultMdmValues = {
+    metadata: {
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                label: 'HCP',
+                attributes: [
+                    {
+                        label: 'String',
+                        name: 'TextField',
+                        type: 'String',
+                        uri: 'configuration/entityTypes/HCP/attributes/TextField'
+                    },
+                    {
+                        label: 'First Name',
+                        name: 'FirstName',
+                        type: 'String',
+                        uri: 'configuration/entityTypes/HCP/attributes/FirstName'
+                    },
+                    {
+                        label: 'Last Name',
+                        name: 'LastName',
+                        type: 'String',
+                        uri: 'configuration/entityTypes/HCP/attributes/LastName'
+                    },
+                    {
+                        label: 'Double',
+                        name: 'Double',
+                        type: 'Double',
+                        uri: 'configuration/entityTypes/HCP/attributes/Double'
+                    },
+                    {
+                        label: 'Boolean',
+                        name: 'Boolean',
+                        type: 'Boolean',
+                        uri: 'configuration/entityTypes/HCP/attributes/Boolean'
+                    }
+                ]
+            }
+        ]
+    },
+    attributesPresentation: {
+        'configuration/entityTypes/HCP/attributes/Double': {
+            thousandSeparator: '-',
+            decimalSeparator: '^',
+            prefix: '[',
+            suffix: ']'
+        }
+    }
+};
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d;
+    var user = user_event_1.default.setup();
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues },
+            react_1.default.createElement(CollapsibleItemsContext_1.CollapsibleItemsProvider, null, children)));
+    };
+    return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(RecordUpdates_1.RecordUpdates, __assign({}, props)), { wrapper: Providers })), { user: user });
+};
+describe('Record updates tests', function () {
+    it('should not render anything if items empty', function () {
+        var props = __assign(__assign({}, defaultProps), { updates: [] });
+        var container = setUp({ props: props }).container;
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('should render and expand items correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, deltaFields;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    deltaFields = react_2.screen.getAllByTestId('delta-field');
+                    expect(deltaFields).toHaveLength(3);
+                    expect(deltaFields[0]).toHaveTextContent('String:');
+                    expect(deltaFields[0]).toHaveTextContent('old text field value');
+                    expect(deltaFields[0]).toHaveTextContent('new text field value');
+                    expect(deltaFields[0]).toHaveTextContent('edited');
+                    expect(deltaFields[1]).toHaveTextContent('First Name:');
+                    expect(deltaFields[1]).toHaveTextContent('added first name value');
+                    expect(deltaFields[1]).toHaveTextContent('added');
+                    expect(deltaFields[2]).toHaveTextContent('Last Name:');
+                    expect(deltaFields[2]).toHaveTextContent('removed last name value');
+                    expect(deltaFields[2]).toHaveTextContent('deleted');
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button', { name: '2 more updates' }))];
+                case 1:
+                    _a.sent();
+                    deltaFields = react_2.screen.getAllByTestId('delta-field');
+                    expect(deltaFields).toHaveLength(5);
+                    expect(deltaFields[3]).toHaveTextContent('Double:');
+                    expect(deltaFields[3]).toHaveTextContent('[98-765^4321]');
+                    expect(deltaFields[3]).toHaveTextContent('[1-234^56789]');
+                    expect(deltaFields[3]).toHaveTextContent('edited');
+                    expect(deltaFields[4]).toHaveTextContent('Boolean:');
+                    expect(deltaFields[4]).toHaveTextContent('No');
+                    expect(deltaFields[4]).toHaveTextContent('Yes');
+                    expect(deltaFields[4]).toHaveTextContent('edited');
+                    expect(react_2.screen.queryByRole('button')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not render more items link if updates count is 3 or less', function () {
+        var props = __assign(__assign({}, defaultProps), { updates: defaultUpdates.slice(0, 3) });
+        setUp({ props: props });
+        expect(react_2.screen.getAllByTestId('delta-field')).toHaveLength(3);
+        expect(react_2.screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+    it('should render more items link correctly if updates count is 4', function () {
+        var props = __assign(__assign({}, defaultProps), { updates: defaultUpdates.slice(0, 4) });
+        setUp({ props: props });
+        expect(react_2.screen.getAllByTestId('delta-field')).toHaveLength(3);
+        react_2.screen.getByRole('button', { name: '1 more update' });
+    });
+});

package/cjs/features/activity-log/RecordUpdates/components/DeltaField/DeltaField.js

@@ -28,7 +28,7 @@ var DeltaField = function (_a) {
     var converter = function (value) {
         return (0, activities_1.stringifyDeltaValue)(value, delta.attributeType, metadata, attributesPresentation);
     };
-    return (react_1.default.createElement(Field_1.Field, { fieldName: (attribute === null || attribute === void 0 ? void 0 : attribute.label) || (attribute === null || attribute === void 0 ? void 0 : attribute.name) },
+    return (react_1.default.createElement(Field_1.Field, { fieldName: (attribute === null || attribute === void 0 ? void 0 : attribute.label) || (attribute === null || attribute === void 0 ? void 0 : attribute.name), "data-reltio-id": "delta-field" },
         react_1.default.createElement("span", null,
             value && converter(value),
             newValue && oldValue && (react_1.default.createElement(react_1.default.Fragment, null,

package/cjs/features/activity-log/RelationObject/RelationObject.test.js

@@ -1,39 +1,56 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
+var react_2 = require("@testing-library/react");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var types_1 = require("../types");
 var RelationObject_1 = require("./RelationObject");
-describe('RelationObject tests', function () {
+var defaultItem = {
+    id: '3vJgNLSN',
+    timestamp: 1621847085259,
+    objectUri: 'relations/edEnRRW',
+    objectType: 'configuration/relationTypes/HasAddress',
+    startObjectUri: 'entities/sOoSQYm',
+    startObjectLabel: 'start object label',
+    endObjectUri: 'entities/1BVkicLG',
+    endObjectLabel: 'end object label',
+    data: { type: types_1.ActivityTypes.RELATIONSHIP_CHANGED }
+};
+var defaultProps = {
+    item: defaultItem
+};
+var defaultMdmValues = {
+    uiPath: 'https://reltio.com/nui'
+};
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d;
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues }, children));
+    };
+    return (0, react_2.render)(react_1.default.createElement(RelationObject_1.RelationObject, __assign({}, props)), { wrapper: Providers });
+};
+describe('Relation object tests', function () {
     it('should render correctly', function () {
-        var relationItem = {
-            id: '3vJgNLSN',
-            user: 'egorshkov',
-            method: 'POST',
-            url: '/reltio/api/alenat/entities/sOoSQYm/_update',
-            clientType: 'Reltio UI',
-            timestamp: 1621847085259,
-            objectUri: 'relations/edEnRRW',
-            objectType: 'configuration/relationTypes/HasAddress',
-            startObjectUri: 'entities/sOoSQYm',
-            startObjectLabel: '- cBtCASwtAeEbTxe Agacati',
-            endObjectUri: 'entities/1BVkicLG',
-            endObjectLabel: 'cBtCASwtAeEbTxe Agacati Nash',
-            data: {
-                type: 'RELATIONSHIP_CHANGED'
-            },
-            eventId: '1621847085259_00qpSyx'
-        };
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(RelationObject_1.RelationObject, { item: relationItem }));
-        var startObjectUri = relationItem.startObjectUri, startObjectLabel = relationItem.startObjectLabel, endObjectUri = relationItem.endObjectUri, endObjectLabel = relationItem.endObjectLabel;
-        expect(wrapper.find('.delimiter').length).toBe(1);
-        var links = wrapper.find('EntityUriLink');
-        expect(links.length).toBe(2);
-        expect(links.at(0).prop('value')).toBe(startObjectUri);
-        expect(links.at(0).text()).toBe(startObjectLabel);
-        expect(links.at(1).prop('value')).toBe(endObjectUri);
-        expect(links.at(1).text()).toBe(endObjectLabel);
+        setUp();
+        var links = react_2.screen.getAllByRole('link');
+        expect(links[0]).toHaveTextContent('start object label');
+        expect(links[0]).toHaveAttribute('href', 'https://reltio.com/nui#p~com.reltio.plugins.entity.default.DefaultPerspective_e~entities/sOoSQYm');
+        expect(links[1]).toHaveTextContent('end object label');
+        expect(links[1]).toHaveAttribute('href', 'https://reltio.com/nui#p~com.reltio.plugins.entity.default.DefaultPerspective_e~entities/1BVkicLG');
     });
 });

package/cjs/features/activity-log/RelationRecord/RelationRecord.test.js

@@ -15,79 +15,99 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
+var react_2 = require("@testing-library/react");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var CollapsibleItemsContext_1 = require("../contexts/CollapsibleItemsContext");
+var types_1 = require("../types");
 var RelationRecord_1 = require("./RelationRecord");
-describe('RelationRecord tests', function () {
-    var deltaCollection = {
-        ovChanged: true,
-        delta: [
-            {
-                type: 'ATTRIBUTE_CHANGED',
-                attributeType: 'configuration/entityTypes/HCP/attributes/TextField',
-                newValue: {
-                    value: 'Str31',
-                    ov: true,
-                    id: '3UIcE257b',
-                    sources: ['Reltio']
-                },
-                oldValue: {
-                    value: 'Str1',
-                    ov: true,
-                    id: '3UIcE257b',
-                    sources: ['Reltio']
-                }
-            },
-            {
-                type: 'ATTRIBUTE_ADDED',
-                attributeType: 'configuration/entityTypes/HCP/attributes/TestField',
-                newValue: {
-                    value: 'Test',
-                    ov: true,
-                    id: '3UIcE257b',
-                    sources: ['Reltio']
-                }
-            },
+var defaultDeltaCollection = {
+    ovChanged: true,
+    delta: [
+        {
+            type: 'ATTRIBUTE_CHANGED',
+            attributeType: 'configuration/relationTypes/HasAddress/attributes/TextField',
+            newValue: { value: 'new value', ov: true, id: '3UIcE257b', sources: ['Reltio'] },
+            oldValue: { value: 'old value', ov: true, id: '3UIcE257b', sources: ['Reltio'] }
+        },
+        {
+            type: 'ATTRIBUTE_ADDED',
+            attributeType: 'configuration/relationTypes/HasAddress/attributes/TextField',
+            newValue: { value: 'added value', ov: true, id: 'Sdj23PaS', sources: ['Reltio'] }
+        },
+        {
+            type: 'ATTRIBUTE_REMOVED',
+            attributeType: 'configuration/relationTypes/HasAddress/attributes/TextField',
+            oldValue: { value: 'removed value', ov: true, id: '9m2Nsm3Pa', sources: ['Reltio'] }
+        }
+    ]
+};
+var defaultItem = {
+    id: '3vJgNLSN',
+    timestamp: 1621847085259,
+    objectUri: 'relations/edEnRRW',
+    objectType: 'configuration/relationTypes/HasAddress',
+    startObjectUri: 'entities/sOoSQYm',
+    startObjectLabel: 'start object label',
+    endObjectUri: 'entities/1BVkicLG',
+    endObjectLabel: 'end object label',
+    data: { type: types_1.ActivityTypes.RELATIONSHIP_CHANGED },
+    deltaCollection: defaultDeltaCollection
+};
+var defaultProps = {
+    item: defaultItem
+};
+var defaultMdmValues = {
+    metadata: {
+        entityTypes: [
             {
-                type: 'ATTRIBUTE_REMOVED',
-                attributeType: 'configuration/entityTypes/HCP/attributes/TestField2',
-                oldValue: {
-                    value: 'Test2',
-                    ov: true,
-                    id: '3UIcE257b',
-                    sources: ['Reltio']
-                }
+                uri: 'configuration/relationTypes/HasAddress',
+                label: 'Has address',
+                attributes: [
+                    {
+                        label: 'String',
+                        name: 'TextField',
+                        type: 'String',
+                        uri: 'configuration/relationTypes/HasAddress/attributes/TextField'
+                    }
+                ]
             }
         ]
+    },
+    uiPath: 'https://reltio.com/nui'
+};
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d;
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues },
+            react_1.default.createElement(CollapsibleItemsContext_1.CollapsibleItemsProvider, null, children)));
     };
-    var emptyDeltaCollection = {
-        ovChanged: false,
-        delta: undefined
-    };
-    var wrapperItem = {
-        id: '30Y8UsZr',
-        user: 'alexander.kirsanov',
-        method: 'PUT',
-        url: '/reltio/api/alenat/entities/k5nO0xA/attributes/TextField/3UIcE257b',
-        clientType: 'Reltio UI',
-        timestamp: 1622096971385,
-        objectUri: 'entities/k5nO0xA',
-        objectType: 'configuration/entityTypes/HCP',
-        objectLabel: 'BulkUpdate_regression_3 Label_test_Long_label_test_long_long_long_long_long - RelationTableViewss - New Address for HCP_Bulk_Update with long_label Londomir',
-        data: {
-            type: 'ENTITY_CHANGED'
-        },
-        deltaCollection: deltaCollection,
-        eventId: '1622096971385_03DVkNW'
-    };
+    return (0, react_2.render)(react_1.default.createElement(RelationRecord_1.RelationRecord, __assign({}, props)), { wrapper: Providers });
+};
+describe('Relation record tests', function () {
     it('should render correctly', function () {
-        var wrapper = (0, enzyme_1.shallow)(react_1.default.createElement(RelationRecord_1.RelationRecord, { item: wrapperItem }));
-        expect(wrapper.find('RecordLabel').prop('description')).toBe('');
-        expect(wrapper.find('RelationObject').length).toBe(1);
-        expect(wrapper.find('RecordUpdates').length).toBe(1);
-        expect(wrapper.find('RecordUpdates').prop('updates')).toEqual(wrapperItem.deltaCollection.delta);
-        wrapper.setProps({ item: __assign(__assign({}, wrapperItem), { deltaCollection: emptyDeltaCollection }) });
-        expect(wrapper.find('RecordLabel').prop('description')).toBe('Relationship updated');
-        expect(wrapper.find('RelationObject').length).toBe(1);
-        expect(wrapper.find('RecordUpdates').prop('updates')).toEqual(emptyDeltaCollection.delta);
+        setUp();
+        expect(react_2.screen.queryByText('Relationship updated')).not.toBeInTheDocument();
+        react_2.screen.getByText('start object label');
+        react_2.screen.getByText('end object label');
+        var deltaFields = react_2.screen.getAllByTestId('delta-field');
+        expect(deltaFields[0]).toHaveTextContent('String:');
+        expect(deltaFields[0]).toHaveTextContent('old value');
+        expect(deltaFields[0]).toHaveTextContent('new value');
+        expect(deltaFields[0]).toHaveTextContent('edited');
+        expect(deltaFields[1]).toHaveTextContent('String:');
+        expect(deltaFields[1]).toHaveTextContent('added value');
+        expect(deltaFields[1]).toHaveTextContent('added');
+        expect(deltaFields[2]).toHaveTextContent('String:');
+        expect(deltaFields[2]).toHaveTextContent('removed value');
+        expect(deltaFields[2]).toHaveTextContent('deleted');
+    });
+    it('should render correctly without delta', function () {
+        var props = __assign(__assign({}, defaultProps), { item: __assign(__assign({}, defaultItem), { deltaCollection: undefined }) });
+        setUp({ props: props });
+        react_2.screen.getByText('Relationship updated');
+        react_2.screen.getByText('start object label');
+        react_2.screen.getByText('end object label');
+        expect(react_2.screen.queryByTestId('delta-field')).not.toBeInTheDocument();
     });
 });

package/esm/UpSetChart/UpSetChart.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
-type DataItem = {
-    name: string;
-    sets: string[];
-};
+import { UpSetChartData } from './types';
 type Props = {
-    width: number;
-    height: number;
-    data: DataItem[];
+    data: UpSetChartData;
+    width?: number;
+    height?: number;
 };
-export declare const UpSetChart: ({ width, height, data }: Props) => React.JSX.Element;
+export declare const UpSetChart: ({ data, width, height }: Props) => React.JSX.Element;
 export {};

package/esm/UpSetChart/UpSetChart.js

@@ -1,7 +1,40 @@
-import React from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { scaleBand } from 'd3-scale';
+import Tooltip from '@mui/material/Tooltip';
+import { SetsChart } from './components/SetsChart';
+import { IntersectionsMatrix } from './components/IntersectionsMatrix';
+import { IntersectionsChart } from './components/IntersectionsChart';
+import { useUpSetChartSizes } from './useUpSetChartSizes';
+import { GAP_BEFORE_LEFT_BAR, TOP_GAP } from './constants';
+import { findIntersections } from './helpers';
+import { useStyles } from './styles';
 export var UpSetChart = function (_a) {
-    var width = _a.width, height = _a.height, data = _a.data;
-    if (!width || !height || !data)
-        return null;
-    return React.createElement("div", null, "UpSet");
+    var data = _a.data, width = _a.width, height = _a.height;
+    var styles = useStyles({ width: width, height: height });
+    var containerRef = useRef(null);
+    var _b = useState(null), hoveredSet = _b[0], setHoveredSet = _b[1];
+    var _c = useState(null), hoveredIntersection = _c[0], setHoveredIntersection = _c[1];
+    var _d = useState([width, height]), _e = _d[0], availableWidth = _e[0], availableHeight = _e[1], setAvailableSize = _d[1];
+    var _f = useMemo(function () { return findIntersections(data); }, [data]), intersections = _f.intersections, sets = _f.sets;
+    var hoveredElements = (hoveredIntersection === null || hoveredIntersection === void 0 ? void 0 : hoveredIntersection.elements) || (hoveredSet === null || hoveredSet === void 0 ? void 0 : hoveredSet.elements);
+    var tooltipTitle = hoveredIntersection === null || hoveredIntersection === void 0 ? void 0 : hoveredIntersection.sets.join(' ∩ ');
+    var _g = useUpSetChartSizes({ width: availableWidth, height: availableHeight, intersections: intersections, sets: sets }), labels = _g.labels, svgWidth = _g.svgWidth, svgHeight = _g.svgHeight, intersectionsChartWidth = _g.intersectionsChartWidth, intersectionsChartHeight = _g.intersectionsChartHeight, matrixY = _g.matrixY, matrixHeight = _g.matrixHeight, setsChartWidth = _g.setsChartWidth, leftPadding = _g.leftPadding;
+    var matrixXScale = useMemo(function () {
+        var domain = intersections.map(function (_, i) { return String(i); });
+        return scaleBand([0, intersectionsChartWidth]).domain(domain).paddingInner(0.2);
+    }, [intersections, intersectionsChartWidth]);
+    var matrixYScale = useMemo(function () {
+        var domain = sets.map(function (set) { return set.name; });
+        return scaleBand([0, matrixHeight]).domain(domain);
+    }, [sets, matrixHeight]);
+    useEffect(function () {
+        var _a = containerRef.current || {}, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        setAvailableSize([clientWidth || width, clientHeight || height]);
+    }, [width, height]);
+    return (React.createElement("div", { ref: containerRef, className: styles.wrapper },
+        React.createElement(Tooltip, { title: tooltipTitle, followCursor: true },
+            React.createElement("svg", { className: styles.svg, width: svgWidth, height: svgHeight },
+                React.createElement(IntersectionsMatrix, { xScale: matrixXScale, yScale: matrixYScale, intersections: intersections, sets: sets, transform: "translate(".concat(leftPadding, ",").concat(matrixY, ")"), hoveredIntersection: hoveredIntersection }),
+                React.createElement(SetsChart, { yScale: matrixYScale, width: setsChartWidth, sets: sets, labels: labels, hoveredElements: hoveredElements, hoverAreaWidth: svgWidth, transform: "translate(".concat(GAP_BEFORE_LEFT_BAR, ",").concat(matrixY, ")"), onSetHover: setHoveredSet }),
+                React.createElement(IntersectionsChart, { xScale: matrixXScale, width: intersectionsChartWidth, height: intersectionsChartHeight, intersections: intersections, highlightedElements: hoveredElements, transform: "translate(".concat(leftPadding, ",").concat(TOP_GAP, ")"), matrixHeight: matrixHeight, onIntersectionHover: setHoveredIntersection })))));
 };