synapse-react-client 2.0.55 → 2.0.59

package/dist/containers/table/datasets/DatasetItemsEditor.js

@@ -0,0 +1,264 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatasetItemsEditor = void 0;
+var tslib_1 = require("tslib");
+var lab_1 = require("@material-ui/lab");
+var react_base_table_1 = (0, tslib_1.__importDefault)(require("@sage-bionetworks/react-base-table"));
+var react_1 = (0, tslib_1.__importStar)(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
+var SkeletonTable_1 = require("../../../assets/skeletons/SkeletonTable");
+var TooltipUtils_1 = require("../../../utils/functions/TooltipUtils");
+var useEntity_1 = require("../../../utils/hooks/SynapseAPI/useEntity");
+var useSet_1 = require("../../../utils/hooks/useSet");
+var useTraceUpdate_1 = (0, tslib_1.__importDefault)(require("../../../utils/hooks/useTraceUpdate"));
+var synapseTypes_1 = require("../../../utils/synapseTypes");
+var Typography_1 = (0, tslib_1.__importDefault)(require("../../../utils/typography/Typography"));
+var EntityBadgeIcons_1 = require("../../EntityBadgeIcons");
+var DetailsViewTableRenderers_1 = require("../../entity_finder/details/view/DetailsViewTableRenderers");
+var EntityFinderModal_1 = require("../../entity_finder/EntityFinderModal");
+var TreeView_1 = require("../../entity_finder/tree/TreeView");
+var IconSvg_1 = (0, tslib_1.__importDefault)(require("../../IconSvg"));
+var WarningModal_1 = (0, tslib_1.__importDefault)(require("../../synapse_form_wrapper/WarningModal"));
+var ToastMessage_1 = require("../../ToastMessage");
+var Checkbox_1 = require("../../widgets/Checkbox");
+var DATASET_MAX_ITEM_LIMIT = 20000;
+var ROW_HEIGHT = 42;
+var TABLE_HEIGHT = 350;
+function DatasetItemsEditor(props) {
+    var entityId = props.entityId, onSave = props.onSave, onClose = props.onClose;
+    var _a = (0, react_1.useState)(false), showEntityFinder = _a[0], setShowEntityFinder = _a[1];
+    var _b = (0, react_1.useState)(false), showWarningModal = _b[0], setShowWarningModal = _b[1];
+    // Disable updating the entity after the initial fetch because we don't want to replace edits that the user makes.
+    var _c = (0, react_1.useState)(), datasetToUpdate = _c[0], _setDatasetToUpdate = _c[1];
+    var setDatasetToUpdate = function (dataset) {
+        setHasChangedSinceLastSave(true);
+        _setDatasetToUpdate(dataset);
+    };
+    var _d = (0, react_1.useState)(false), hasChangedSinceLastSave = _d[0], setHasChangedSinceLastSave = _d[1];
+    var _e = (0, useSet_1.useSet)(), selectedIds = _e.set, addSelectedId = _e.add, removeSelectedId = _e.remove, clearSelectedIds = _e.clear;
+    var allItemsAreSelected = !!(datasetToUpdate && datasetToUpdate.items.length === selectedIds.size);
+    var refetch = (0, useEntity_1.useGetEntity)(entityId, undefined, {
+        enabled: !datasetToUpdate,
+        onSuccess: function (dataset) {
+            setDatasetToUpdate(dataset);
+            setHasChangedSinceLastSave(false);
+        },
+    }).refetch;
+    var mutation = (0, useEntity_1.useUpdateEntity)({
+        onSuccess: function () {
+            (0, ToastMessage_1.displayToast)('Create a Version of this Dataset to freeze it in its current state', 'success', { title: 'Dataset Saved' });
+            if (onSave) {
+                onSave();
+            }
+        },
+        onError: function (error) {
+            if (error.status === 412) {
+                (0, ToastMessage_1.displayToast)('Re-retrieve the dataset to get the latest changes. Your current changes will be lost.', 'warning', {
+                    title: 'Dataset Updated since Last Fetched',
+                    primaryButtonText: 'Retrieve Dataset',
+                    onPrimaryButtonClick: refetch,
+                });
+            }
+            else {
+                (0, ToastMessage_1.displayToast)(error.reason, 'danger', {
+                    title: 'An Error Occurred',
+                });
+            }
+        },
+    });
+    var tableData = datasetToUpdate === null || datasetToUpdate === void 0 ? void 0 : datasetToUpdate.items.map(function (item) {
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { isSelected: selectedIds.has(item.entityId), setSelected: function (value) {
+                return value
+                    ? addSelectedId(item.entityId)
+                    : removeSelectedId(item.entityId);
+            } });
+    });
+    function addItemsToDataset(newItems) {
+        setDatasetToUpdate(function (datasetToUpdate) {
+            if (datasetToUpdate) {
+                var existingItems = datasetToUpdate.items.filter(function (item) { return !newItems.find(function (newItem) { return newItem.targetId === item.entityId; }); });
+                if (existingItems.length < datasetToUpdate.items.length) {
+                    (0, ToastMessage_1.displayToast)('Files were added that were already in the dataset. The versions of those files might have been updated.', 'info');
+                }
+                var items = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], existingItems, true), newItems.map(function (item) { return ({
+                    entityId: item.targetId,
+                    versionNumber: item.targetVersionNumber,
+                }); }), true);
+                return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, datasetToUpdate), { items: items });
+            }
+            else {
+                console.warn('Cannot add items to the Dataset because is undefined. The Dataset may not have been fetched yet.');
+                return datasetToUpdate;
+            }
+        });
+        clearSelectedIds();
+    }
+    function removeSelectedItemsFromDataset() {
+        setDatasetToUpdate(function (dataset) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, dataset), { items: dataset.items.filter(function (datasetItem) { return !selectedIds.has(datasetItem.entityId); }) })); });
+        clearSelectedIds();
+    }
+    function changeVersionOnItem(entityId, newVersion) {
+        setDatasetToUpdate(function (dataset) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, dataset), { items: dataset.items.map(function (datasetItem) {
+                return datasetItem.entityId === entityId
+                    ? { entityId: entityId, versionNumber: newVersion }
+                    : datasetItem;
+            }) })); });
+    }
+    var DatasetItemVersionRenderer = function (props) {
+        return (react_1.default.createElement(DetailsViewTableRenderers_1.DatasetEditorVersionRenderer, (0, tslib_1.__assign)({}, props, { toggleSelection: function (datasetItem) {
+                changeVersionOnItem(datasetItem.entityId, datasetItem.versionNumber);
+            } })));
+    };
+    var SelectAllCheckboxRenderer = function (props) {
+        var datasetToUpdate = props.datasetToUpdate, clearSelectedIds = props.clearSelectedIds, addSelectedId = props.addSelectedId;
+        (0, useTraceUpdate_1.default)(props);
+        var isChecked = allItemsAreSelected;
+        return datasetToUpdate ? (react_1.default.createElement("div", { "data-testid": "Select All", style: { cursor: 'pointer' }, onClick: function () {
+                if (isChecked) {
+                    clearSelectedIds();
+                }
+                else {
+                    addSelectedId.apply(void 0, datasetToUpdate.items.map(function (item) { return item.entityId; }));
+                }
+            } },
+            react_1.default.createElement(Checkbox_1.Checkbox, { label: "", className: "SRC-pointer-events-none", checked: isChecked, disabled: datasetToUpdate.items.length === 0, onChange: function () {
+                    // no-op
+                } }))) : (react_1.default.createElement(react_1.default.Fragment, null));
+    };
+    var renderedSelectAllCheckbox = datasetToUpdate ? (react_1.default.createElement(SelectAllCheckboxRenderer, { datasetToUpdate: datasetToUpdate, selectedIds: selectedIds, clearSelectedIds: clearSelectedIds, addSelectedId: addSelectedId, allItemsAreSelected: allItemsAreSelected })) : (react_1.default.createElement(react_1.default.Fragment, null));
+    var defaultColumns = [
+        {
+            key: 'errorState',
+            width: 30,
+            cellRenderer: DetailsViewTableRenderers_1.EntityErrorRenderer,
+        },
+        {
+            key: 'isSelected',
+            width: 40,
+            dataKey: 'isSelected',
+            headerRenderer: renderedSelectAllCheckbox,
+            cellRenderer: DetailsViewTableRenderers_1.CheckboxRenderer,
+        },
+        {
+            key: 'name',
+            width: 350,
+            dataKey: 'entityId',
+            title: 'Name',
+            resizable: true,
+            cellRenderer: DetailsViewTableRenderers_1.EntityNameRenderer,
+        },
+        {
+            key: 'status',
+            width: 80,
+            dataKey: 'entityId',
+            resizable: true,
+            cellRenderer: DetailsViewTableRenderers_1.BadgeIconsRenderer,
+        },
+        {
+            key: 'id',
+            width: 140,
+            title: 'ID',
+            dataKey: 'entityId',
+            resizable: true,
+        },
+        {
+            key: 'version',
+            width: 150,
+            title: 'Version',
+            dataKey: 'entityId',
+            cellRenderer: DatasetItemVersionRenderer,
+        },
+        {
+            key: 'createdOn',
+            width: 200,
+            title: 'Created On',
+            dataKey: 'entityId',
+            resizable: true,
+            cellRenderer: DetailsViewTableRenderers_1.CreatedOnRenderer,
+        },
+        {
+            key: 'modifiedOn',
+            width: 200,
+            title: 'Modified On',
+            dataKey: 'entityId',
+            resizable: true,
+            cellRenderer: DetailsViewTableRenderers_1.ModifiedOnRenderer,
+        },
+        {
+            key: 'modifiedBy',
+            width: 250,
+            title: 'Modified By',
+            dataKey: 'entityId',
+            resizable: true,
+            cellRenderer: DetailsViewTableRenderers_1.ModifiedByRenderer,
+        },
+        {
+            key: 'projectId',
+            width: 300,
+            title: 'Project',
+            dataKey: 'entityId',
+            resizable: true,
+            cellRenderer: DetailsViewTableRenderers_1.ProjectRenderer,
+        },
+    ];
+    function NoItemsPlaceholder() {
+        return (react_1.default.createElement("div", { className: "NoItemsPlaceholder" },
+            react_1.default.createElement(Typography_1.default, { variant: 'headline3' }, "No items in this Dataset"),
+            react_1.default.createElement(react_bootstrap_1.Button, { className: "AddItemsButton", variant: "outline", onClick: function () { return setShowEntityFinder(true); } },
+                react_1.default.createElement(IconSvg_1.default, { options: { icon: 'addCircleTwoTone' } }),
+                react_1.default.createElement("span", null, "Add Items"))));
+    }
+    return (react_1.default.createElement("div", { className: "DatasetEditor bootstrap-4-backport" },
+        react_1.default.createElement(EntityFinderModal_1.EntityFinderModal, { configuration: {
+                selectMultiple: true,
+                initialScope: TreeView_1.FinderScope.ALL_PROJECTS,
+                initialContainer: null,
+                selectableTypes: [synapseTypes_1.EntityType.FILE],
+                mustSelectVersionNumber: true,
+            }, show: showEntityFinder, onClose: function () {
+                setShowEntityFinder(false);
+            }, title: "Add Files to Dataset", confirmButtonCopy: "Add Files", onConfirm: function (items) {
+                addItemsToDataset(items);
+                setShowEntityFinder(false);
+            }, onCancel: function () { return setShowEntityFinder(false); } }),
+        react_1.default.createElement(WarningModal_1.default, { title: "Unsaved Changes", modalBody: "Any unsaved changes will be lost. Are you sure you want to close the editor?", confirmButtonText: "OK", onConfirm: function () {
+                if (onClose) {
+                    onClose();
+                }
+            }, show: showWarningModal, onConfirmCallbackArgs: [], onCancel: function () { return setShowWarningModal(false); } }),
+        react_1.default.createElement("div", { className: "DatasetEditorTopBottomPanel" },
+            react_1.default.createElement("div", { className: "ItemCount" }, datasetToUpdate ? (react_1.default.createElement(Typography_1.default, { variant: "headline3" },
+                datasetToUpdate.items.length === 0
+                    ? 'No'
+                    : datasetToUpdate.items.length.toLocaleString(),
+                ' ',
+                "File",
+                datasetToUpdate.items.length !== 1 && 's')) : (react_1.default.createElement(lab_1.Skeleton, { variant: "rect", width: 200 }))),
+            react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline", disabled: selectedIds.size === DATASET_MAX_ITEM_LIMIT, onClick: function () { return setShowEntityFinder(true); } }, "Add Items"),
+            react_1.default.createElement(react_bootstrap_1.Button, { disabled: selectedIds.size === 0, variant: "outline", onClick: removeSelectedItemsFromDataset }, "Remove Items")),
+        react_1.default.createElement("div", { className: "DatasetEditorTableContainer" },
+            datasetToUpdate ? (datasetToUpdate.items.length === 0 ? (react_1.default.createElement(NoItemsPlaceholder, null)) : (react_1.default.createElement(react_base_table_1.default, { classPrefix: "DatasetEditorTable", data: tableData, height: TABLE_HEIGHT, width: defaultColumns.reduce(function (totalWidth, column) {
+                    return totalWidth + column.width;
+                }, 0), rowHeight: ROW_HEIGHT, overscanRowCount: 5, columns: defaultColumns, rowClassName: 'DatasetEditorRow', rowProps: function (_a) {
+                    var rowData = _a.rowData;
+                    return {
+                        'aria-selected': rowData.isSelected,
+                    };
+                }, headerCellProps: {
+                    role: 'columnheader',
+                }, onRowsRendered: TooltipUtils_1.rebuildTooltip, onScroll: TooltipUtils_1.rebuildTooltip }))) : (react_1.default.createElement(SkeletonTable_1.SkeletonTable, { className: "DatasetItemsEditorSkeleton", numRows: 8, numCols: 6, rowHeight: ROW_HEIGHT + "px" })),
+            react_1.default.createElement(react_tooltip_1.default, { id: EntityBadgeIcons_1.ENTITY_BADGE_ICONS_TOOLTIP_ID, className: "EntityBadgeTooltip", delayShow: 100, place: 'right', effect: 'solid' })),
+        react_1.default.createElement("div", { className: "DatasetEditorTopBottomPanel" },
+            react_1.default.createElement(react_bootstrap_1.Button, { variant: 'outline', onClick: function () {
+                    if (hasChangedSinceLastSave) {
+                        setShowWarningModal(true);
+                    }
+                    else if (onClose) {
+                        onClose();
+                    }
+                } }, "Cancel"),
+            react_1.default.createElement(react_bootstrap_1.Button, { disabled: !datasetToUpdate, variant: 'sds-primary', onClick: function () { return mutation.mutate(datasetToUpdate); } }, "Save"))));
+}
+exports.DatasetItemsEditor = DatasetItemsEditor;
+//# sourceMappingURL=DatasetItemsEditor.js.map

package/dist/containers/table/datasets/DatasetItemsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatasetItemsEditor.js","sourceRoot":"","sources":["../../../../src/lib/containers/table/datasets/DatasetItemsEditor.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -73,7 +73,7 @@ declare const SynapseComponents: {
     ProjectViewCarousel: import("react").FunctionComponent<import("./containers/home_page/project_view_carousel/ProjectViewCarousel").ProjectViewCarouselProps>;
     EntityFinder: import("react").FunctionComponent<import("./containers/entity_finder/EntityFinder").EntityFinderProps>;
     ExperimentalMode: import("react").FC<{}>;
-    EntityBadgeIcons: import("react").FunctionComponent<import("./containers/EntityBadgeIcons").EntityBadgeIconsProps>;
+    EntityBadgeIcons: (props: import("./containers/EntityBadgeIcons").EntityBadgeIconsProps) => JSX.Element;
     DownloadCartPage: import("react").FunctionComponent<import("./containers/download_list_v2/DownloadCartPage").DownloadCartPageProps>;
     ShowDownloadV2: typeof ShowDownloadV2;
     FullWidthAlert: typeof FullWidthAlert;

package/dist/rollup.index.d.ts

@@ -13,6 +13,7 @@ import FullWidthAlert from './containers/FullWidthAlert';
 import UserProfileLinks from './containers/user_profile_links/UserProfileLinks';
 import ProgrammaticOptions from './containers/table/table-top/ProgrammaticOptions';
 import { useSynapseContext } from './utils/SynapseContext';
+import { DatasetItemsEditor } from './containers/table/datasets/DatasetItemsEditor';
 declare const SynapseContext: {
     SynapseContextProvider: import("react").FunctionComponent<import("./utils/SynapseContext").SynapseContextProviderProps>;
     SynapseContextConsumer: import("react").Consumer<import("./utils/SynapseContext").SynapseContextType | undefined>;
@@ -36,12 +37,12 @@ declare const SynapseComponents: {
     SynapseHomepage: import("react").FunctionComponent<import("./containers/SynapseHomepage").SynapseHomepageProps>;
     EntityFinder: import("react").FunctionComponent<import("./containers/entity_finder/EntityFinder").EntityFinderProps>;
     ErrorPage: import("react").FunctionComponent<import("./containers/ErrorPage").ErrorPageProps>;
-    EntityBadgeIcons: import("react").FunctionComponent<import("./containers/EntityBadgeIcons").EntityBadgeIconsProps>;
+    EntityBadgeIcons: (props: import("./containers/EntityBadgeIcons").EntityBadgeIconsProps) => JSX.Element;
     DownloadCartPage: import("react").FunctionComponent<import("./containers/download_list_v2/DownloadCartPage").DownloadCartPageProps>;
     ShowDownloadV2: typeof ShowDownloadV2;
     DownloadConfirmation: import("react").FunctionComponent<import("./containers/download_list/DownloadConfirmation").DownloadConfirmationProps>;
     FullWidthAlert: typeof FullWidthAlert;
-    SchemaDrivenAnnotationEditor: import("react").FunctionComponent<import("./containers/entity/annotations/SchemaDrivenAnnotationEditor").SchemaDrivenAnnotationEditorProps>;
+    SchemaDrivenAnnotationEditor: (props: import("./containers/entity/annotations/SchemaDrivenAnnotationEditor").SchemaDrivenAnnotationEditorProps) => JSX.Element;
     SynapseNavDrawer: import("react").FunctionComponent<import("./containers/SynapseNavDrawer").SynapseNavDrawerProps>;
     FavoritesPage: typeof FavoritesPage;
     EntityModal: import("react").FC<import("./containers/entity/metadata/EntityModal").EntityModalProps>;
@@ -58,5 +59,6 @@ declare const SynapseComponents: {
     IconSvg: import("react").FunctionComponent<import("./containers/IconSvg").IconSvgProps>;
     UserProfileLinks: typeof UserProfileLinks;
     PlotlyWrapper: import("react").FC<import("./containers/PlotlyWrapper").PlotlyWrapperProps>;
+    DatasetItemsEditor: typeof DatasetItemsEditor;
 };
 export { SynapseComponents, SynapseConstants, SynapseClient, SynapseContext };

package/dist/rollup.index.js

@@ -39,6 +39,7 @@ var ToastMessage_1 = require("./containers/ToastMessage");
 var PlotlyWrapper_1 = (0, tslib_1.__importDefault)(require("./containers/PlotlyWrapper"));
 var IconSvg_1 = (0, tslib_1.__importDefault)(require("./containers/IconSvg"));
 var SynapseContext_1 = require("./utils/SynapseContext");
+var DatasetItemsEditor_1 = require("./containers/table/datasets/DatasetItemsEditor");
 var SynapseContext = {
     SynapseContextProvider: SynapseContext_1.SynapseContextProvider,
     SynapseContextConsumer: SynapseContext_1.SynapseContextConsumer,
@@ -77,7 +78,8 @@ var SynapseComponents = {
     displayToast: ToastMessage_1.displayToast,
     IconSvg: IconSvg_1.default,
     UserProfileLinks: UserProfileLinks_1.default,
-    PlotlyWrapper: PlotlyWrapper_1.default
+    PlotlyWrapper: PlotlyWrapper_1.default,
+    DatasetItemsEditor: DatasetItemsEditor_1.DatasetItemsEditor,
 };
 exports.SynapseComponents = SynapseComponents;
 //# sourceMappingURL=rollup.index.js.map

package/dist/rollup.index.js.map

@@ -1 +1 @@
-{"version":3,"file":"rollup.index.js","sourceRoot":"","sources":["../src/lib/rollup.index.ts"],"names":[],"mappings":";;;;AAAA,uCAAoC;AACpC,gFAA4C;AAC5C,0EAAsC;AACtC,kFAA8C;AAC9C,4FAAwD;AACxD,oFAAgD;AAChD,kFAA8C;AAC9C,gHAA4E;AAC5E,6BAA0B;AAC1B,kCAA0D;AAwE9B,iGAxEnB,wBAAgB,OAwEmB;AAAE,8FAxEnB,qBAAa,OAwEmB;AAvE3D,gFAA8E;AAC9E,sFAAoF;AACpF,oEAAkE;AAClE,oGAAgE;AAChE,wFAAoD;AACpD,sIAAkG;AAClG,gEAA8D;AAC9D,kEAAgE;AAChE,mFAAiF;AACjF,0FAAsD;AACtD,4FAA0F;AAC1F,wEAAsE;AACtE,kFAA8C;AAC9C,kEAAgE;AAChE,6GAAyE;AACzE,4FAAwD;AACxD,wFAAsF;AACtF,mHAA+E;AAC/E,6GAA2G;AAC3G,wEAAsE;AACtE,sHAAkF;AAClF,0DAA+E;AAC/E,0FAAsD;AACtD,8EAA0C;AAC1C,yDAI+B;AAE/B,IAAM,cAAc,GAAG;IACrB,sBAAsB,yCAAA;IACtB,sBAAsB,yCAAA;IACtB,iBAAiB,oCAAA;CAClB,CAAA;AAqC4D,wCAAc;AAnC3E,IAAM,iBAAiB,GAAG;IACxB,KAAK,iBAAA;IACL,SAAS,qBAAA;IACT,UAAU,sBAAA;IACV,QAAQ,oBAAA;IACR,cAAc,0BAAA;IACd,SAAS,qBAAA;IACT,iBAAiB,6BAAA;IACjB,cAAc,iCAAA;IACd,oBAAoB,6CAAA;IACpB,eAAe,mCAAA;IACf,iBAAiB,uCAAA;IACjB,kBAAkB,8BAAA;IAClB,YAAY,wBAAA;IACZ,mBAAmB,+BAAA;IACnB,eAAe,mCAAA;IACf,YAAY,6BAAA;IACZ,SAAS,qBAAA;IACT,gBAAgB,qCAAA;IAChB,gBAAgB,qCAAA;IAChB,cAAc,0BAAA;IACd,oBAAoB,6CAAA;IACpB,cAAc,EAAE,wBAAc;IAC9B,4BAA4B,6DAAA;IAC5B,gBAAgB,qCAAA;IAChB,aAAa,yBAAA;IACb,WAAW,2BAAA;IACX,mBAAmB,+BAAA;IACnB,qBAAqB,sCAAA;IACrB,YAAY,6BAAA;IACZ,OAAO,mBAAA;IACP,gBAAgB,4BAAA;IAChB,aAAa,yBAAA;CACd,CAAA;AAEQ,8CAAiB"}
+{"version":3,"file":"rollup.index.js","sourceRoot":"","sources":["../src/lib/rollup.index.ts"],"names":[],"mappings":";;;;AAAA,uCAAoC;AACpC,gFAA4C;AAC5C,0EAAsC;AACtC,kFAA8C;AAC9C,4FAAwD;AACxD,oFAAgD;AAChD,kFAA8C;AAC9C,gHAA4E;AAC5E,6BAA0B;AAC1B,kCAA0D;AA0E9B,iGA1EnB,wBAAgB,OA0EmB;AAAE,8FA1EnB,qBAAa,OA0EmB;AAzE3D,gFAA8E;AAC9E,sFAAoF;AACpF,oEAAkE;AAClE,oGAAgE;AAChE,wFAAoD;AACpD,sIAAkG;AAClG,gEAA8D;AAC9D,kEAAgE;AAChE,mFAAiF;AACjF,0FAAsD;AACtD,4FAA0F;AAC1F,wEAAsE;AACtE,kFAA8C;AAC9C,kEAAgE;AAChE,6GAAyE;AACzE,4FAAwD;AACxD,wFAAsF;AACtF,mHAA+E;AAC/E,6GAA2G;AAC3G,wEAAsE;AACtE,sHAAkF;AAClF,0DAA+E;AAC/E,0FAAsD;AACtD,8EAA0C;AAC1C,yDAI+B;AAC/B,qFAAmF;AAEnF,IAAM,cAAc,GAAG;IACrB,sBAAsB,yCAAA;IACtB,sBAAsB,yCAAA;IACtB,iBAAiB,oCAAA;CAClB,CAAA;AAsC4D,wCAAc;AApC3E,IAAM,iBAAiB,GAAG;IACxB,KAAK,iBAAA;IACL,SAAS,qBAAA;IACT,UAAU,sBAAA;IACV,QAAQ,oBAAA;IACR,cAAc,0BAAA;IACd,SAAS,qBAAA;IACT,iBAAiB,6BAAA;IACjB,cAAc,iCAAA;IACd,oBAAoB,6CAAA;IACpB,eAAe,mCAAA;IACf,iBAAiB,uCAAA;IACjB,kBAAkB,8BAAA;IAClB,YAAY,wBAAA;IACZ,mBAAmB,+BAAA;IACnB,eAAe,mCAAA;IACf,YAAY,6BAAA;IACZ,SAAS,qBAAA;IACT,gBAAgB,qCAAA;IAChB,gBAAgB,qCAAA;IAChB,cAAc,0BAAA;IACd,oBAAoB,6CAAA;IACpB,cAAc,EAAE,wBAAc;IAC9B,4BAA4B,6DAAA;IAC5B,gBAAgB,qCAAA;IAChB,aAAa,yBAAA;IACb,WAAW,2BAAA;IACX,mBAAmB,+BAAA;IACnB,qBAAqB,sCAAA;IACrB,YAAY,6BAAA;IACZ,OAAO,mBAAA;IACP,gBAAgB,4BAAA;IAChB,aAAa,yBAAA;IACb,kBAAkB,yCAAA;CACnB,CAAA;AAEQ,8CAAiB"}

package/dist/style/abstracts/_mixins.scss

@@ -1,4 +1,5 @@
 @use './variables' as SRC;
+@use 'sass:map';
 // -----------------------------------------------------------------------------
 // This file contains all application-wide Sass mixins.
 // -----------------------------------------------------------------------------
@@ -48,9 +49,10 @@
 }
 
 @mixin sortable-table() {
-  thead>tr>th, thead:first-child>tr:first-child>th {
+  thead > tr > th,
+  thead:first-child > tr:first-child > th {
     padding: 10px 6px 5px 7px;
-    border: 1px solid #DDDDDF;
+    border: 1px solid #dddddf;
     color: #515359;
     span {
       display: inline-block;
@@ -111,10 +113,10 @@ $link-underline-color-default: adjust-color(
   color: SRC.$primary-action-color;
   text-decoration: none;
   font-weight: 700;
-  letter-spacing: .5px;
+  letter-spacing: 0.5px;
   border-bottom: 1px solid $link-underline-color-default;
   &:hover {
-    border-bottom: 2px solid SRC.$primary-action-color-700;
+    border-bottom: 2px solid map.get(SRC.$primary-color-palette, 700);
     margin-bottom: -1px;
   }
 }
@@ -124,9 +126,9 @@ $link-underline-color-default: adjust-color(
   text-decoration: none;
   font-weight: 700;
   border-bottom: 2px solid transparent;
-  letter-spacing: .5px;
+  letter-spacing: 0.5px;
   &:hover {
-    border-bottom: 2px solid SRC.$primary-action-color-700;
+    border-bottom: 2px solid map.get(SRC.$primary-color-palette, 700);
     margin-bottom: 0px;
   }
 }
@@ -141,4 +143,4 @@ $link-underline-color-default: adjust-color(
     border-bottom: unset;
     margin-bottom: unset;
   }
-}
+}

package/dist/style/abstracts/_variables.scss

@@ -1,7 +1,29 @@
+@use 'sass:color';
+@use 'sass:map';
+
 // -----------------------------------------------------------------------------
 // This file contains all application-wide Sass variables.
 // -----------------------------------------------------------------------------
 
+// Colors defined by design: https://www.figma.com/file/0oPm5lLSUva8kyfVNMS6FA/Synapse-Style-%26-Component-Library?node-id=77%3A1232
+$colors: (
+  'gray-1000': #22252a,
+  'gray-900': #353a3f,
+  'gray-800': #4a5056,
+  'gray-700': #878e95,
+  'gray-600': #aeb5bc,
+  'gray-500': #d0d4d9,
+  'gray-400': #dfe2e6,
+  'gray-300': #eaecee,
+  'gray-200': #f1f3f5,
+  'gray-100': #fbfbfc,
+  'white': #ffffff,
+  'success': #32a330,
+  'info': #017fa5,
+  'warning': #cc9f00,
+  'error': #c13415,
+) !default;
+
 $gray-dark: #dcdcdc !default;
 $gray-light: #f9f9f9 !default;
 $background-color-gray: $gray-light !default;
@@ -51,37 +73,28 @@ $primary-action-color-active: adjust-color(
   $lightness: 0%
 ) !default;
 
-$primary-action-color-900: adjust-color(
-  $primary-action-color,
-  $saturation: 24%,
-  $lightness: -18%
-) !default;
-
-$primary-action-color-700: adjust-color(
-  $primary-action-color,
-  $saturation: 11%,
-  $lightness: -8%
-) !default;
-
-$primary-action-color-500: adjust-color(
-  $primary-action-color,
-  $saturation: 29%,
-  $lightness: -4%
-) !default;
-
-$primary-action-color-300: adjust-color(
-  $primary-action-color,
-  $saturation: -3%,
-  $lightness: 10%
+$primary-color-palette: (
+  100: adjust-color($primary-action-color, $saturation: -25%, $lightness: 50%),
+  200: adjust-color($primary-action-color, $saturation: -13%, $lightness: 20%),
+  300: adjust-color($primary-action-color, $saturation: -3%, $lightness: 10%),
+  400: adjust-color($primary-action-color, $saturation: -1%, $lightness: 5%),
+  500: $primary-action-color,
+  600: adjust-color($primary-action-color, $saturation: 5%, $lightness: -4%),
+  700: adjust-color($primary-action-color, $saturation: 11%, $lightness: -8%),
+  800: adjust-color($primary-action-color, $saturation: 18%, $lightness: -10%),
+  900: adjust-color($primary-action-color, $saturation: 24%, $lightness: -18%),
 ) !default;
 
-$primary-color-palette: (
-  base: $primary-action-color,
-  active: $primary-action-color-active,
-  300: $primary-action-color-300,
-  500: $primary-action-color-500,
-  700: $primary-action-color-700,
-  900: $primary-action-color-900,
+$secondary-color-palette: (
+  100: adjust-color($secondary-action-color, $saturation: -25%, $lightness: 50%),
+  200: adjust-color($secondary-action-color, $saturation: -13%, $lightness: 20%),
+  300: adjust-color($secondary-action-color, $saturation: -3%, $lightness: 10%),
+  400: adjust-color($secondary-action-color, $saturation: -1%, $lightness: 5%),
+  500: $secondary-action-color,
+  600: adjust-color($secondary-action-color, $saturation: 5%, $lightness: -4%),
+  700: adjust-color($secondary-action-color, $saturation: 11%, $lightness: -8%),
+  800: adjust-color($secondary-action-color, $saturation: 18%, $lightness: -10%),
+  900: adjust-color($secondary-action-color, $saturation: 24%, $lightness: -18%),
 ) !default;
 
 /// Breakpoints map

package/dist/style/base/_icons.scss

@@ -1,4 +1,5 @@
 @use '../abstracts/variables' as SRC;
+@use 'sass:map';
 
 .SRC-arrow-icon,
 .Icon-Plus,
@@ -12,12 +13,12 @@
 .SRC-r-icon,
 .SRC-python-icon {
   path {
-    fill: SRC.$primary-action-color-500;
+    fill: map.get(SRC.$primary-color-palette, 500);
   }
 }
 
 .SRC-terminal-icon > rect.outer {
-  fill: SRC.$primary-action-color-500;
+  fill: map.get(SRC.$primary-color-palette, 500);
 }
 
 .styled-svg-wrapper {
@@ -52,12 +53,12 @@
   &.themed {
     path,
     circle {
-      fill: SRC.$primary-action-color-500;
+      fill: map.get(SRC.$primary-color-palette, 500);
     }
     .icon-kinomics,
     .icon-proteomics {
       path {
-        stroke: SRC.$primary-action-color-500;
+        stroke: map.get(SRC.$primary-color-palette, 500);
         fill: none;
       }
     }
@@ -65,7 +66,7 @@
       .styled-svg-wrapper {
         display: inline-flex;
         padding: 2px;
-        background-color: rgba(SRC.$primary-action-color-500, 0.1);
+        background-color: rgba(map.get(SRC.$primary-color-palette, 500), 0.1);
         border-radius: 50%;
         margin: 0 2px;
       }
@@ -75,7 +76,7 @@
 
 .SRC-Sort-Icon-Active {
   padding: 2px;
-  background-color: SRC.$primary-action-color-500;
+  background-color: map.get(SRC.$primary-color-palette, 500);
   path {
     fill: white;
   }
@@ -85,7 +86,7 @@
   padding: 2px;
 
   path {
-    fill: SRC.$primary-action-color-500;
+    fill: map.get(SRC.$primary-color-palette, 500);
   }
 }
 

package/dist/style/bootstrap4_backports/_base-import.scss

@@ -1,5 +1,6 @@
 @use '../abstracts/variables' as SRC;
 @use 'sass:color';
+@use 'sass:map';
 
 .bootstrap-4-backport {
   //initial bootstrap config based on Synapse design
@@ -158,4 +159,49 @@
       $active-background: SRC.$gray-light
     );
   }
+
+  // Primary button based on Synapse Design System
+  // See https://www.figma.com/file/0oPm5lLSUva8kyfVNMS6FA/Synapse-Style-%26-Component-Library?node-id=53%3A1189
+  .btn-sds-primary {
+    @include button-variant(
+      $background: map.get(SRC.$primary-color-palette, 500),
+      $border: map.get(SRC.$primary-color-palette, 500),
+      $hover-background: map.get(SRC.$primary-color-palette, 600),
+      $hover-border: map.get(SRC.$primary-color-palette, 600),
+      $active-background: map.get(SRC.$primary-color-palette, 700),
+      $active-border: map.get(SRC.$primary-color-palette, 700)
+    );
+    border-radius: 0px;
+    font-weight: 900;
+    &:hover {
+      box-shadow: none; // ?
+    }
+
+    &:disabled {
+      color: map.get(SRC.$colors, 'gray-600');
+      background-color: map.get(SRC.$colors, 'gray-400');
+      border-color: map.get(SRC.$colors, 'gray-400');
+    }
+  }
+
+  // Secondary button based on Synapse Design System
+  // See https://www.figma.com/file/0oPm5lLSUva8kyfVNMS6FA/Synapse-Style-%26-Component-Library?node-id=53%3A1216
+  .btn-outline {
+    @include button-outline-variant(
+      $color: map.get(SRC.$primary-color-palette, 500),
+      $color-hover: map.get(SRC.$primary-color-palette, 600),
+      $active-background: rgba(255, 255, 255, 0),
+      $active-border: map.get(SRC.$primary-color-palette, 700)
+    );
+    border-radius: 0px;
+    font-weight: 900;
+    &:hover {
+      box-shadow: none; // ?
+    }
+
+    &:disabled {
+      color: map.get(SRC.$colors, 'gray-600');
+      border-color: map.get(SRC.$colors, 'gray-400');
+    }
+  }
 }

package/dist/style/bootstrap4_backports/_overrides.scss

@@ -81,7 +81,6 @@ html:not(#synapse\.org) {
   .modal-content {
     padding: 5px 30px;
     .modal-header {
-      align-items: center;
       padding: 10px 0px;
       button.close {
         font-size: 28px;

package/dist/style/components/_all.scss

@@ -16,5 +16,6 @@
   './experimental-mode', './user-search-box', './entity-metadata',
   './download-cart-page', './global-alert', './annotations', 'plotlywrapper',
   './synapse-nav-drawer', './favorites-page', './skeletons', './toasts',
-  './user-profile-links', './blocking-loader', './transition', './popover', './featured-tool-card',
-  './row_renderers/observation-card', './subsection-row-renderer';
+  './user-profile-links', './blocking-loader', './transition', './popover',
+  './featured-tool-card', './row_renderers/observation-card',
+  './subsection-row-renderer', './dataset-editor', './fluid-modal';