dotdata_widgets 0.1.2 → 0.1.4

package/lib/widgets/feature-space/FeatureSpaceDomainsDescriptions.js

@@ -1,40 +1,74 @@
-import React, { useEffect, useState } from 'react';
-import { Accordion, AccordionDetails, AccordionHeader, } from '../../components/accordion';
-import { Input } from '../../components/input';
-import { GroupedDomainsDescriptionsList } from '../../feature-descriptors-domain/grouped-domains-descriptions-list';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureSpaceDomainsDescriptions = void 0;
+const react_1 = __importStar(require("react"));
+const UnfoldLess_1 = __importDefault(require("@mui/icons-material/UnfoldLess"));
+const input_1 = require("../../components/input");
+const feature_descriptor_grouped_domain_tree_1 = require("../../feature-descriptors-domain/feature-descriptor-grouped-domain-tree");
 const searchInputStyle = {
-    width: '70%',
-    marginTop: '4px',
-    marginBottom: '16px',
+    width: '220px',
 };
-export const FeatureSpaceDomainsDescriptions = props => {
-    const [aggregationSearch, setAggregationSearch] = useState(() => '');
-    const [filterSearch, setFilterSearch] = useState(() => '');
-    const [searchedAggregation, setSearchedAggregation] = useState(() => props.aggregations);
-    const [searchedFilters, setSearchedFilters] = useState(() => props.filters);
-    useEffect(() => {
+const FeatureSpaceDomainsDescriptions = props => {
+    const [aggregationSearch, setAggregationSearch] = (0, react_1.useState)(() => '');
+    const [filterSearch, setFilterSearch] = (0, react_1.useState)(() => '');
+    const [searchedAggregation, setSearchedAggregation] = (0, react_1.useState)(() => props.aggregations);
+    const [searchedFilters, setSearchedFilters] = (0, react_1.useState)(() => props.filters);
+    (0, react_1.useEffect)(() => {
         const aggregations = filterDomainDescriptions(props.aggregations, aggregationSearch);
         setSearchedAggregation(aggregations);
     }, [aggregationSearch]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const filters = filterDomainDescriptions(props.filters, filterSearch);
         setSearchedFilters(filters);
     }, [filterSearch]);
-    return (React.createElement("div", null,
-        React.createElement(Accordion, null,
-            React.createElement(AccordionHeader, null,
-                React.createElement("h3", { className: "grey-label" }, "Filters and Aggregations")),
-            React.createElement(AccordionDetails, null,
-                React.createElement("div", { style: { display: 'flex', marginBottom: '0.5rem' } },
-                    React.createElement("div", { style: { width: '50%' } },
-                        React.createElement("div", { className: "grey-label" }, "Filters"),
-                        React.createElement(Input, { style: searchInputStyle, value: filterSearch, placeholder: "Search:", onValueChange: setFilterSearch }),
-                        React.createElement(GroupedDomainsDescriptionsList, { groupedDomain: searchedFilters })),
-                    React.createElement("div", { style: { width: '50%' } },
-                        React.createElement("div", { className: "grey-label" }, "Aggregations"),
-                        React.createElement(Input, { style: searchInputStyle, value: aggregationSearch, placeholder: "Search:", onValueChange: setAggregationSearch }),
-                        React.createElement(GroupedDomainsDescriptionsList, { groupedDomain: searchedAggregation })))))));
+    const [expandedAggregations, setExpandedAggregations] = react_1.default.useState(() => props.aggregations.types
+        .map(({ columns }, typeIdx) => [
+        `type_${typeIdx}`,
+        columns.map((_, columnIdx) => `type_${typeIdx}_column${columnIdx}`),
+    ])
+        .flat(2));
+    return (react_1.default.createElement("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '32px' } },
+        react_1.default.createElement("div", { className: "feature-space-domain-filters" },
+            react_1.default.createElement("div", { className: "feature-space-domain-header" },
+                react_1.default.createElement(UnfoldLess_1.default, { onClick: () => setExpandedAggregations([]) }),
+                react_1.default.createElement("h4", { className: "" }, "Filters (123)"),
+                react_1.default.createElement(input_1.Input, { style: searchInputStyle, value: filterSearch, placeholder: "Search for filter", onValueChange: setFilterSearch })),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(feature_descriptor_grouped_domain_tree_1.FeatureDescriptorGroupedDomainTree, { groupedDomain: searchedFilters, expanded: expandedAggregations }))),
+        react_1.default.createElement("div", { className: "feature-space-domain-aggregations" },
+            react_1.default.createElement("div", { className: "feature-space-domain-header" },
+                react_1.default.createElement("h4", null, "Aggregations (456)"),
+                react_1.default.createElement(input_1.Input, { style: searchInputStyle, value: aggregationSearch, placeholder: "Search for aggregation", onValueChange: setAggregationSearch })),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(feature_descriptor_grouped_domain_tree_1.FeatureDescriptorGroupedDomainTree, { groupedDomain: searchedAggregation, expanded: expandedAggregations })))));
 };
+exports.FeatureSpaceDomainsDescriptions = FeatureSpaceDomainsDescriptions;
 const isNotEmpty = (arr) => arr.length > 0;
 function filterDomainDescriptions(domains, searchPhrase) {
     return {
@@ -51,3 +85,4 @@ function filterDomainDescriptions(domains, searchPhrase) {
             .filter(({ columns }) => isNotEmpty(columns)),
     };
 }
+//# sourceMappingURL=FeatureSpaceDomainsDescriptions.js.map

package/lib/widgets/feature-space/FeatureSpaceView.js

@@ -1,11 +1,48 @@
-import React from 'react';
-import { useModelState } from '../../utils/widget';
-import { FeatureSpaceDomainsDescriptions } from './FeatureSpaceDomainsDescriptions';
-import { FeatureExplorationPaths } from './FeatureExplorationPaths';
-export const FeatureSpaceView = props => {
-    const [featureSpace] = useModelState('value');
-    return (React.createElement(React.Fragment, null,
-        React.createElement("h2", { className: "grey-label" }, "Feature Space Overview:"),
-        featureSpace.explorationPaths ? (React.createElement(FeatureExplorationPaths, { explorationPaths: featureSpace.explorationPaths })) : null,
-        featureSpace.filters ? (React.createElement(FeatureSpaceDomainsDescriptions, { filters: featureSpace.filters, aggregations: featureSpace.aggregations })) : null));
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureSpaceView = void 0;
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const widget_model_1 = require("../../utils/widget-model");
+const widget_theme_1 = require("../../utils/widget-theme");
+const FeatureExplorationPaths_1 = require("./FeatureExplorationPaths");
+const context_1 = require("../../feature-descriptor/context");
+const domains_descriptors_tree_1 = require("../../feature-descriptor/domains-descriptors-tree");
+const FeatureDomainsDescriptions_1 = require("./FeatureDomainsDescriptions");
+const Divider = () => (react_1.default.createElement("div", { style: {
+        height: '1px',
+        borderTop: '1px solid var(--c-grey-300)',
+        marginBlock: '24px',
+    } }));
+const FeatureSpaceView = props => {
+    const [featureSpace] = (0, widget_model_1.useModelState)('value');
+    const selectedFiltersModel = (0, widget_model_1.useModelState)('selected_filters');
+    const selectedAggregationsModel = (0, widget_model_1.useModelState)('selected_aggregations');
+    const [selectedJoinIds, setSelectedJoinIds] = react_1.default.useState(() => []);
+    const [filterDescriptionsTree, setFilterDescriptionsTree] = react_1.default.useState(() => ({ types: [] }));
+    const [aggregationDescriptionsTree, setAggregationDescriptionsTree] = react_1.default.useState(() => ({ types: [] }));
+    react_1.default.useEffect(() => {
+        setFilterDescriptionsTree(domains_descriptors_tree_1.DescriptionsTree.appendGroupId(featureSpace.filters, 'f'));
+    }, [featureSpace.filters]);
+    react_1.default.useEffect(() => {
+        setAggregationDescriptionsTree(domains_descriptors_tree_1.DescriptionsTree.appendGroupId(featureSpace.aggregations, 'a'));
+    }, [featureSpace.aggregations]);
+    return (react_1.default.createElement(styles_1.ThemeProvider, { theme: widget_theme_1.theme },
+        react_1.default.createElement("h2", { className: "grey-label" }, "Feature Space Overview:"),
+        react_1.default.createElement(domains_descriptors_tree_1.DomainsDescriptionsTreeItemSelectionContextProvider, { selectedJoinIds: selectedJoinIds },
+            react_1.default.createElement(FeatureExplorationPaths_1.FeatureExplorationPaths, { explorationPaths: featureSpace.explorationPaths, selectedJoinIds: selectedJoinIds, setSelectedJoinIds: setSelectedJoinIds }),
+            react_1.default.createElement(Divider, null),
+            react_1.default.createElement(material_1.Grid, { container: true, spacing: 6 },
+                react_1.default.createElement(material_1.Grid, { item: true, xs: 6 },
+                    react_1.default.createElement(context_1.FdDomainsDescriptionsSelectionContext.Provider, { value: selectedFiltersModel },
+                        react_1.default.createElement(FeatureDomainsDescriptions_1.FeatureDomainsDescriptions, { domainName: "Filters", descriptionsTree: filterDescriptionsTree, selectedJoinIds: selectedJoinIds }))),
+                react_1.default.createElement(material_1.Grid, { item: true, xs: 6, sx: { overflow: 'hidden' } },
+                    react_1.default.createElement(context_1.FdDomainsDescriptionsSelectionContext.Provider, { value: selectedAggregationsModel },
+                        react_1.default.createElement(FeatureDomainsDescriptions_1.FeatureDomainsDescriptions, { domainName: "Aggregations", descriptionsTree: aggregationDescriptionsTree, selectedJoinIds: selectedJoinIds })))))));
+};
+exports.FeatureSpaceView = FeatureSpaceView;
+//# sourceMappingURL=FeatureSpaceView.js.map

package/lib/widgets/index.js

@@ -1,4 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
 // Import the CSS
-import '../../css/widget.css';
-export * from './FeatureLeaderboardWidget';
-export * from './FeatureSpaceWidget';
+require("../../css/widget.css");
+__exportStar(require("./FeatureLeaderboardWidget"), exports);
+__exportStar(require("./FeatureSpaceWidget"), exports);
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dotdata_widgets",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A dotdata widget",
   "keywords": [
     "dotdata",
@@ -50,8 +50,14 @@
     "watch:labextension": "jupyter labextension watch ."
   },
   "dependencies": {
-    "@fontsource/roboto": "^4.5.8",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@jupyter-widgets/base": "^6.0.2",
+    "@mui/icons-material": "^5.11.9",
+    "@mui/lab": "^5.0.0-alpha.120",
+    "@mui/material": "^5.11.9",
+    "@tanstack/react-virtual": "^3.0.0-beta.48",
+    "lodash": "^4.17.21",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "vega": "^5.22.1"
@@ -90,7 +96,6 @@
     "tsc-alias": "^1.8.2",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "~4.9.5",
-    "url-loader": "^4.1.1",
     "webpack": "^5.69.1",
     "webpack-cli": "^5.0.1"
   },

package/LICENSE.txt

@@ -1,27 +0,0 @@
-Copyright (c) 2023 dotdata
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
-2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lib/hooks/index.js

@@ -1 +0,0 @@
-"use strict";

package/lib/hooks/widget-model.js

@@ -1 +0,0 @@
-"use strict";

package/lib/utils/widget/widget-context-wrapper.js

@@ -1,9 +0,0 @@
-import React, { createContext, useContext } from 'react';
-export const WidgetModelContext = createContext(undefined);
-export function useWidgetModelContext() {
-    return useContext(WidgetModelContext);
-}
-export const withModelContext = (Component) => {
-    return (props) => (React.createElement(WidgetModelContext.Provider, { value: props.model },
-        React.createElement(Component, { ...props })));
-};

package/lib/widget.js

@@ -1,34 +0,0 @@
-"use strict";
-// Copyright (c) dotdata
-// Distributed under the terms of the Modified BSD License.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExampleView = exports.ExampleModel = void 0;
-const base_1 = require("@jupyter-widgets/base");
-const version_1 = require("./version");
-// Import the CSS
-require("../css/widget.css");
-class ExampleModel extends base_1.DOMWidgetModel {
-    defaults() {
-        return Object.assign(Object.assign({}, super.defaults()), { _model_name: ExampleModel.model_name, _model_module: ExampleModel.model_module, _model_module_version: ExampleModel.model_module_version, _view_name: ExampleModel.view_name, _view_module: ExampleModel.view_module, _view_module_version: ExampleModel.view_module_version, value: 'Hello World' });
-    }
-}
-exports.ExampleModel = ExampleModel;
-ExampleModel.serializers = Object.assign({}, base_1.DOMWidgetModel.serializers);
-ExampleModel.model_name = 'ExampleModel';
-ExampleModel.model_module = version_1.MODULE_NAME;
-ExampleModel.model_module_version = version_1.MODULE_VERSION;
-ExampleModel.view_name = 'ExampleView'; // Set to null if no view
-ExampleModel.view_module = version_1.MODULE_NAME; // Set to null if no view
-ExampleModel.view_module_version = version_1.MODULE_VERSION;
-class ExampleView extends base_1.DOMWidgetView {
-    render() {
-        this.el.classList.add('custom-widget');
-        this.value_changed();
-        this.model.on('change:value', this.value_changed, this);
-    }
-    value_changed() {
-        this.el.textContent = this.model.get('value');
-    }
-}
-exports.ExampleView = ExampleView;
-//# sourceMappingURL=widget.js.map