Spaces:

MLCommons
/

croissant-editor

Running

App Files Files Community

marcenacp commited on Nov 28, 2023

Commit

6a31b9a

•

1 Parent(s): 695cb46

Deploy.

Browse files

Files changed (33) hide show

app.py +6 -1
components/tabs/__init__.py +44 -0
components/tabs/frontend/.env +6 -0
components/tabs/frontend/.prettierrc +5 -0
components/tabs/frontend/build/asset-manifest.json +10 -0
components/tabs/frontend/build/index.html +1 -0
components/tabs/frontend/build/static/js/main.716a0ab4.js +0 -0
components/tabs/frontend/build/static/js/main.716a0ab4.js.LICENSE.txt +73 -0
components/tabs/frontend/build/static/js/main.716a0ab4.js.map +0 -0
components/tabs/frontend/package-lock.json +0 -0
components/tabs/frontend/package.json +47 -0
components/tabs/frontend/public/index.html +27 -0
components/tabs/frontend/src/Tabs.tsx +87 -0
components/tabs/frontend/src/index.tsx +10 -0
components/tabs/frontend/src/react-app-env.d.ts +1 -0
core/files.py +9 -1
core/past_projects.py +5 -5
core/query_params.py +3 -37
core/state.py +20 -0
cypress/e2e/createManually.cy.js +6 -4
cypress/e2e/displayErrors.cy.js +8 -2
cypress/e2e/loadCroissant.cy.js +7 -2
cypress/e2e/renameDistribution.cy.js +5 -7
cypress/e2e/uploadCsv.cy.js +9 -5
events/fields.py +0 -3
events/metadata.py +0 -3
events/record_sets.py +0 -3
events/resources.py +0 -3
utils.py +12 -11
views/files.py +9 -6
views/overview.py +15 -2
views/record_sets.py +1 -3
views/wizard.py +25 -17

app.py CHANGED Viewed

@@ -20,6 +20,7 @@ col1.header("Croissant Editor")
 init_state()
 user = get_cached_user()
 if OAUTH_CLIENT_ID and not user:
     query_params = st.experimental_get_query_params()
@@ -56,6 +57,8 @@ def _back_to_menu():
 def _logout():
     """Logs the user out."""
     st.cache_data.clear()
     _back_to_menu()
@@ -70,7 +73,9 @@ if timestamp:
     col3.button("Menu", on_click=_back_to_menu)
-if st.session_state.get(CurrentProject):
     render_editor()
 else:
     render_splash()

 init_state()
 user = get_cached_user()
+print("USER", user)
 if OAUTH_CLIENT_ID and not user:
     query_params = st.experimental_get_query_params()
 def _logout():
     """Logs the user out."""
     st.cache_data.clear()
+    get_cached_user.clear()
+    st.session_state[User] = None
     _back_to_menu()
     col3.button("Menu", on_click=_back_to_menu)
+should_display_editor = bool(st.session_state.get(CurrentProject))
+if should_display_editor:
     render_editor()
 else:
     render_splash()

components/tabs/__init__.py ADDED Viewed

	@@ -0,0 +1,44 @@

+import os
+import streamlit.components.v1 as components
+from core.constants import OVERVIEW
+# Create a _RELEASE constant. We'll set this to False while we're developing
+# the component, and True when we're ready to package and distribute it.
+_RELEASE = True
+if not _RELEASE:
+    _component_func = components.declare_component(
+        "tabs_component",
+        url="http://localhost:3001",
+    )
+else:
+    parent_dir = os.path.dirname(os.path.abspath(__file__))
+    build_dir = os.path.join(parent_dir, "frontend/build")
+    _component_func = components.declare_component("tabs_component", path=build_dir)
+def render_tabs(tabs: list[str], selected_tab: int, json: str | None, key=None):
+    """Create a new instance of "tabs_component".
+    Args:
+        tabs: The tabs to render in the component.
+        selected_tab: The selected tab.
+        key: An optional key that uniquely identifies this component. If this is
+            None, and the component's arguments are changed, the component will
+            be re-mounted in the Streamlit frontend and lose its current state.
+    Returns:
+        The number of times the component's "Click Me" button has been clicked.
+            (This is the value passed to `Streamlit.setComponentValue` on the
+            frontend.)
+    """
+    component_value = _component_func(
+        tabs=tabs,
+        selected_tab=selected_tab,
+        json=json,
+        key=key,
+        default=OVERVIEW,
+    )
+    return component_value

components/tabs/frontend/.env ADDED Viewed

	@@ -0,0 +1,6 @@

+# Run the component's dev server on :3001
+# (The Streamlit dev server already runs on :3000)
+PORT=3001
+# Don't automatically open the web browser on `npm run start`.
+BROWSER=none

components/tabs/frontend/.prettierrc ADDED Viewed

	@@ -0,0 +1,5 @@

+{
+  "endOfLine": "lf",
+  "semi": false,
+  "trailingComma": "es5"
+}

components/tabs/frontend/build/asset-manifest.json ADDED Viewed

	@@ -0,0 +1,10 @@

+{
+  "files": {
+    "main.js": "./static/js/main.716a0ab4.js",
+    "index.html": "./index.html",
+    "main.716a0ab4.js.map": "./static/js/main.716a0ab4.js.map"
+  },
+  "entrypoints": [
+    "static/js/main.716a0ab4.js"
+  ]
+}

components/tabs/frontend/build/index.html ADDED Viewed

	@@ -0,0 +1 @@

+ <!doctype html><html lang="en"><head><title>Streamlit Tabs Component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Streamlit Tree Component"/><script defer="defer" src="./static/js/main.716a0ab4.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

components/tabs/frontend/build/static/js/main.716a0ab4.js ADDED Viewed

The diff for this file is too large to render. See raw diff

components/tabs/frontend/build/static/js/main.716a0ab4.js.LICENSE.txt ADDED Viewed

	@@ -0,0 +1,73 @@

+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/** @license React v16.14.0
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

components/tabs/frontend/build/static/js/main.716a0ab4.js.map ADDED Viewed

The diff for this file is too large to render. See raw diff

components/tabs/frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

components/tabs/frontend/package.json ADDED Viewed

	@@ -0,0 +1,47 @@

+{
+  "name": "tree_component",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "streamlit-component-lib": "^2.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "homepage": ".",
+  "devDependencies": {
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "react-scripts": "^5.0.1",
+    "typescript": "^5.2.2"
+  },
+  "overrides": {
+    "react-scripts": {
+      "typescript": "^5"
+    }
+  }
+}

components/tabs/frontend/public/index.html ADDED Viewed

	@@ -0,0 +1,27 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Streamlit Tabs Component</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Streamlit Tree Component" />
+</head>
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+</html>

components/tabs/frontend/src/Tabs.tsx ADDED Viewed

	@@ -0,0 +1,87 @@

+import {
+  Streamlit,
+  StreamlitComponentBase,
+  withStreamlitConnection,
+} from "streamlit-component-lib"
+import React, { ReactNode } from "react"
+import Button from "@mui/material/Button"
+import Tabs from "@mui/material/Tabs"
+import Tab from "@mui/material/Tab"
+import Box from "@mui/material/Box"
+import { ThemeProvider, createTheme } from "@mui/material"
+import { orange } from "@mui/material/colors"
+const theme = createTheme({
+  palette: {
+    primary: orange,
+  },
+})
+function BasicTabs({
+  tabs,
+  selectedTab,
+  json,
+}: {
+  tabs: string[]
+  selectedTab: number
+  json?: { name: string; content: string }
+}) {
+  const [value, setValue] = React.useState(selectedTab)
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    Streamlit.setComponentValue(tabs[newValue])
+    setValue(newValue)
+  }
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: -8,
+      }}
+    >
+      <Box sx={{ width: "100%", margin: -1, padding: 0 }}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <Tabs
+            value={value}
+            onChange={handleChange}
+            aria-label="navigation-tabs"
+          >
+            {tabs.map((tab) => (
+              <Tab key={`custom-tab-${tab}`} label={tab} />
+            ))}
+          </Tabs>
+        </Box>
+      </Box>
+      <Button
+        disabled={!json}
+        variant="outlined"
+        href={
+          json
+            ? `data:text/json;charset=utf-8,${encodeURIComponent(json.content)}`
+            : ""
+        }
+        download={json ? json.name : ""}
+      >
+        Export
+      </Button>
+    </div>
+  )
+}
+class StreamlitTabs extends StreamlitComponentBase<{}> {
+  public render = (): ReactNode => {
+    const tabs = this.props.args["tabs"]
+    const selectedTab = this.props.args["selected_tab"]
+    const json = this.props.args["json"]
+    return (
+      <ThemeProvider theme={theme}>
+        <BasicTabs tabs={tabs} selectedTab={selectedTab} json={json} />
+      </ThemeProvider>
+    )
+  }
+}
+export default withStreamlitConnection(StreamlitTabs)

components/tabs/frontend/src/index.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import React from "react"
+import ReactDOM from "react-dom"
+import Tabs from "./Tabs.tsx"
+ReactDOM.render(
+  <React.StrictMode>
+    <Tabs />
+  </React.StrictMode>,
+  document.getElementById("root")
+)

components/tabs/frontend/src/react-app-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="react-scripts" />

core/files.py CHANGED Viewed

@@ -132,7 +132,13 @@ def file_from_upload(
 def file_from_form(
-    file_type: FileType, type: str, name, description, sha256: str, names: set[str]
 ) -> FileObject | FileSet:
     """Creates a file based on manually added fields."""
     if type == FILE_OBJECT:
@@ -143,12 +149,14 @@ def file_from_form(
             encoding_format=file_type.encoding_format,
             sha256=sha256,
             df=None,
         )
     elif type == FILE_SET:
         return FileSet(
             name=find_unique_name(names, name),
             description=description,
             encoding_format=file_type.encoding_format,
         )
     else:
         raise ValueError("type has to be one of FILE_OBJECT, FILE_SET")

 def file_from_form(
+    file_type: FileType,
+    type: str,
+    name,
+    description,
+    sha256: str,
+    contained_in: list[str],
+    names: set[str],
 ) -> FileObject | FileSet:
     """Creates a file based on manually added fields."""
     if type == FILE_OBJECT:
             encoding_format=file_type.encoding_format,
             sha256=sha256,
             df=None,
+            contained_in=contained_in,
         )
     elif type == FILE_SET:
         return FileSet(
             name=find_unique_name(names, name),
             description=description,
             encoding_format=file_type.encoding_format,
+            contained_in=contained_in,
         )
     else:
         raise ValueError("type has to be one of FILE_OBJECT, FILE_SET")

core/past_projects.py CHANGED Viewed

@@ -30,11 +30,11 @@ def save_current_project():
         st.session_state[CurrentProject] = project
     project.path.mkdir(parents=True, exist_ok=True)
     set_project(project)
-    with _pickle_file(project.path).open("wb") as file:
-        try:
-            pickle.dump(metadata, file)
-        except pickle.PicklingError:
-            logging.error("Could not pickle metadata.")
 def open_project(path: epath.Path) -> Metadata:

         st.session_state[CurrentProject] = project
     project.path.mkdir(parents=True, exist_ok=True)
     set_project(project)
+    try:
+        pickled = pickle.dumps(metadata)
+        _pickle_file(project.path).write_bytes(pickled)
+    except pickle.PicklingError as e:
+        logging.error("Could not pickle metadata.", exc_info=True)
 def open_project(path: epath.Path) -> Metadata:

core/query_params.py CHANGED Viewed

@@ -4,7 +4,6 @@ from typing import Any
 import streamlit as st
-from core.constants import TABS
 from core.state import CurrentProject
 from core.state import RecordSet
@@ -14,7 +13,6 @@ class QueryParams:
     OPEN_PROJECT = "project"
     OPEN_RECORD_SET = "recordSet"
-    OPEN_TAB = "tab"
 def _get_query_param(params: dict[str, Any], name: str) -> str | None:
@@ -28,46 +26,14 @@ def _get_query_param(params: dict[str, Any], name: str) -> str | None:
 def _set_query_param(param: str, new_value: str) -> str | None:
     params = st.experimental_get_query_params()
     new_params = {k: v for k, v in params.items() if k != param}
     new_params[param] = new_value
     st.experimental_set_query_params(**new_params)
-def go_to_tab(tabs: list[str]):
-    params = st.experimental_get_query_params()
-    if QueryParams.OPEN_TAB in params:
-        try:
-            index = int(params[QueryParams.OPEN_TAB][0])
-            if 0 <= index and index < len(TABS):
-                tab = TABS[index]
-                # Click on the tab.
-                js = f"""
-                    <script>
-                    function contains(selector, text) {{
-                      const document = window.parent.document;
-                      const elements = document.querySelectorAll(selector);
-                      return Array.from(elements).filter(function(element) {{
-                        return RegExp(text).test(element.innerText);
-                      }});
-                    }}
-                    const tab = contains('button', '{tab}');
-                    if (tab.length) {{
-                        tab[0].click();
-                    }}
-                    </script>
-                """
-                st.components.v1.html(js)
-        except ValueError:
-            pass
-def set_tab(tab: str):
-    if tab not in TABS:
-        return
-    index = TABS.index(tab)
-    _set_query_param(QueryParams.OPEN_TAB, index)
 def is_record_set_expanded(record_set: RecordSet) -> bool:
     params = st.experimental_get_query_params()
     open_record_set_name = _get_query_param(params, QueryParams.OPEN_RECORD_SET)

 import streamlit as st
 from core.state import CurrentProject
 from core.state import RecordSet
     OPEN_PROJECT = "project"
     OPEN_RECORD_SET = "recordSet"
 def _get_query_param(params: dict[str, Any], name: str) -> str | None:
 def _set_query_param(param: str, new_value: str) -> str | None:
     params = st.experimental_get_query_params()
+    if params.get(param) == [new_value]:
+        # The value already exists in the query params.
+        return
     new_params = {k: v for k, v in params.items() if k != param}
     new_params[param] = new_value
     st.experimental_set_query_params(**new_params)
 def is_record_set_expanded(record_set: RecordSet) -> bool:
     params = st.experimental_get_query_params()
     open_record_set_name = _get_query_param(params, QueryParams.OPEN_RECORD_SET)

core/state.py CHANGED Viewed

@@ -20,6 +20,7 @@ from core.constants import OAUTH_CLIENT_SECRET
 from core.constants import PAST_PROJECTS_PATH
 from core.constants import PROJECT_FOLDER_PATTERN
 from core.constants import REDIRECT_URI
 from core.names import find_unique_name
 import mlcroissant as mlc
@@ -327,3 +328,22 @@ class Metadata:
     def names(self) -> set[str]:
         nodes = self.distribution + self.record_sets
         return set([node.name for node in nodes])

 from core.constants import PAST_PROJECTS_PATH
 from core.constants import PROJECT_FOLDER_PATTERN
 from core.constants import REDIRECT_URI
+from core.constants import TABS
 from core.names import find_unique_name
 import mlcroissant as mlc
     def names(self) -> set[str]:
         nodes = self.distribution + self.record_sets
         return set([node.name for node in nodes])
+class OpenTab:
+    pass
+def get_tab():
+    tab = st.session_state.get(OpenTab)
+    if tab is None:
+        return 0
+    else:
+        return tab
+def set_tab(tab: str):
+    if tab not in TABS:
+        return
+    index = TABS.index(tab)
+    st.session_state[OpenTab] = index

cypress/e2e/createManually.cy.js CHANGED Viewed

@@ -10,13 +10,15 @@ describe('Create a resource manually', () => {
     cy.visit('http://localhost:8501')
     cy.get('button').contains('Create').click()
     cy.get('input[aria-label="Name:red[*]"]').type('MyDataset').blur()
-    cy.get('[data-testid="stMarkdownContainer"]')
-    .contains('Metadata')
-    .click()
     cy.get('input[aria-label="URL:red[*]"]').type('https://mydataset.com', {force: true})
     // Create a resource manually.
-    cy.get('[data-testid="stMarkdownContainer"]').contains('Resources').click()
     cy.get('[data-testid="stMarkdownContainer"]').contains('Add manually').click()
     cy.get('input[aria-label="File name:red[*]"]').type('test.csv').blur()

     cy.visit('http://localhost:8501')
     cy.get('button').contains('Create').click()
     cy.get('input[aria-label="Name:red[*]"]').type('MyDataset').blur()
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('Metadata').click()
+    })
     cy.get('input[aria-label="URL:red[*]"]').type('https://mydataset.com', {force: true})
     // Create a resource manually.
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('Resources').click()
+    })
     cy.get('[data-testid="stMarkdownContainer"]').contains('Add manually').click()
     cy.get('input[aria-label="File name:red[*]"]').type('test.csv').blur()

cypress/e2e/displayErrors.cy.js CHANGED Viewed

@@ -1,6 +1,7 @@
 /// <reference types="cypress" />
 import 'cypress-file-upload';
 describe('load existing errored croissant', () => {
   it('should display errors', () => {
@@ -21,10 +22,15 @@ describe('load existing errored croissant', () => {
     })
     cy.get('[data-testid="stMarkdownContainer"]').contains("Errors").should('not.exist')
     // Empty the `name` field to create an error:
-    cy.get('[data-testid="stMarkdownContainer"]').contains('RecordSets').click()
     cy.contains('split_enums (2 fields)').click()
     cy.get('input[aria-label="Name:red[*]"][value="split_enums"]').should('be.visible').type('{selectall}{backspace}{enter}')
-    cy.get('[data-testid="stMarkdownContainer"]').contains('Overview').click()
     cy.get('[data-testid="stMarkdownContainer"]').contains("Errors").should('exist')
   })
 })

 /// <reference types="cypress" />
 import 'cypress-file-upload';
+import 'cypress-iframe';
 describe('load existing errored croissant', () => {
   it('should display errors', () => {
     })
     cy.get('[data-testid="stMarkdownContainer"]').contains("Errors").should('not.exist')
     // Empty the `name` field to create an error:
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('RecordSets').click()
+    })
     cy.contains('split_enums (2 fields)').click()
     cy.get('input[aria-label="Name:red[*]"][value="split_enums"]').should('be.visible').type('{selectall}{backspace}{enter}')
+    cy.timeout(2000)
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('Overview').click({force: true})
+    })
     cy.get('[data-testid="stMarkdownContainer"]').contains("Errors").should('exist')
   })
 })

cypress/e2e/loadCroissant.cy.js CHANGED Viewed

@@ -1,6 +1,7 @@
 /// <reference types="cypress" />
 import 'cypress-file-upload';
 import * as path from 'path';
 describe('Editor loads Croissant without Error', () => {
@@ -20,7 +21,9 @@ describe('Editor loads Croissant without Error', () => {
         events: ["dragenter", "drop"],
       })
     })
-    cy.get('button').contains('Metadata').click()
     cy
     .get("[data-testid='element-container']")
@@ -47,7 +50,9 @@ describe('Editor loads Croissant without Error', () => {
     cy.get('[data-testid="stException"]').should('not.exist')
-    cy.get('button').contains('Export').should('exist').should('be.visible').click({force: true})
     cy.fixture('titanic.json').then((fileContent) => {
       const downloadsFolder = Cypress.config("downloadsFolder");
       cy.readFile(path.join(downloadsFolder, "croissant-titanic.json"))

 /// <reference types="cypress" />
 import 'cypress-file-upload';
+import 'cypress-iframe';
 import * as path from 'path';
 describe('Editor loads Croissant without Error', () => {
         events: ["dragenter", "drop"],
       })
     })
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('Metadata').click()
+    })
     cy
     .get("[data-testid='element-container']")
     cy.get('[data-testid="stException"]').should('not.exist')
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('Export').click()
+    })
     cy.fixture('titanic.json').then((fileContent) => {
       const downloadsFolder = Cypress.config("downloadsFolder");
       cy.readFile(path.join(downloadsFolder, "croissant-titanic.json"))

cypress/e2e/renameDistribution.cy.js CHANGED Viewed

@@ -21,20 +21,18 @@ describe('Renaming of FileObjects/FileSets/RecordSets/Fields.', () => {
         events: ["dragenter", "drop"],
       })
     })
-    cy.get('button').contains('Resources').click()
-    cy.enter('[title="components.tree.tree_component"]').then(getBody => {
-      // Click on genders.csv
-      getBody().contains('genders.csv').click()
     })
-    // TODO(marcenacp): There is a bug where this action has to be performed twice.
-    cy.get('button').contains('Resources').click()
     cy.enter('[title="components.tree.tree_component"]').then(getBody => {
       // Click on genders.csv
       getBody().contains('genders.csv').click()
     })
     cy.get('input[aria-label="Name:red[*]"][value="genders.csv"]').type('{selectall}{backspace}the-new-name{enter}')
-    cy.get('button').contains('RecordSets').click()
     cy.contains('genders').click()
     cy.contains('Edit fields details').click()
     cy.contains('the-new-name')

         events: ["dragenter", "drop"],
       })
     })
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('Resources').click()
     })
     cy.enter('[title="components.tree.tree_component"]').then(getBody => {
       // Click on genders.csv
       getBody().contains('genders.csv').click()
     })
     cy.get('input[aria-label="Name:red[*]"][value="genders.csv"]').type('{selectall}{backspace}the-new-name{enter}')
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('RecordSets').click()
+    })
     cy.contains('genders').click()
     cy.contains('Edit fields details').click()
     cy.contains('the-new-name')

cypress/e2e/uploadCsv.cy.js CHANGED Viewed

@@ -11,12 +11,14 @@ describe('Editor loads a local CSV as a resource', () => {
     cy.get('button').contains('Create').click()
     cy.get('input[aria-label="Name:red[*]"]').type('MyDataset').blur()
-    cy.get('[data-testid="stMarkdownContainer"]')
-    .contains('Metadata')
-    .click()
     cy.get('input[aria-label="URL:red[*]"]').type('https://mydataset.com', {force: true})
-    cy.get('[data-testid="stMarkdownContainer"]').contains('Resources').click()
     // Drag and drop mimicking: streamlit/e2e/specs/st_file_uploader.spec.js.
     cy.fixture('base.csv').then((fileContent) => {
       const file = {
@@ -43,7 +45,9 @@ describe('Editor loads a local CSV as a resource', () => {
     cy.contains('First rows of data:')
     // On the record set page, we see the record set.
-    cy.get('[data-testid="stMarkdownContainer"]').contains('RecordSets').click()
     cy.contains('base.csv_record_set (2 fields)').click()
     // We also see the fields with the proper types.
     cy.get('[data-testid="stDataFrameResizable"]').contains("column1")

     cy.get('button').contains('Create').click()
     cy.get('input[aria-label="Name:red[*]"]').type('MyDataset').blur()
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('Metadata').click()
+    })
     cy.get('input[aria-label="URL:red[*]"]').type('https://mydataset.com', {force: true})
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('Resources').click()
+    })
     // Drag and drop mimicking: streamlit/e2e/specs/st_file_uploader.spec.js.
     cy.fixture('base.csv').then((fileContent) => {
       const file = {
     cy.contains('First rows of data:')
     // On the record set page, we see the record set.
+    cy.enter('[title="components.tabs.tabs_component"]').then(getBody => {
+      getBody().contains('RecordSets').click()
+    })
     cy.contains('base.csv_record_set (2 fields)').click()
     // We also see the fields with the proper types.
     cy.get('[data-testid="stDataFrameResizable"]').contains("column1")

events/fields.py CHANGED Viewed

@@ -3,8 +3,6 @@ from typing import Any
 import streamlit as st
-from core.constants import RECORD_SETS
-from core.query_params import set_tab
 from core.state import Field
 from core.state import Metadata
 import mlcroissant as mlc
@@ -79,7 +77,6 @@ def handle_field_change(
     key: str,
     **kwargs,
 ):
-    set_tab(RECORD_SETS)
     value = st.session_state[key]
     if change == FieldEvent.NAME:
         old_name = field.name

 import streamlit as st
 from core.state import Field
 from core.state import Metadata
 import mlcroissant as mlc
     key: str,
     **kwargs,
 ):
     value = st.session_state[key]
     if change == FieldEvent.NAME:
         old_name = field.name

events/metadata.py CHANGED Viewed

@@ -2,8 +2,6 @@ import enum
 import streamlit as st
-from core.constants import METADATA
-from core.query_params import set_tab
 from core.state import Metadata
@@ -18,7 +16,6 @@ class MetadataEvent(enum.Enum):
 def handle_metadata_change(event: MetadataEvent, metadata: Metadata, key: str):
-    set_tab(METADATA)
     if event == MetadataEvent.NAME:
         metadata.name = st.session_state[key]
     elif event == MetadataEvent.DESCRIPTION:

 import streamlit as st
 from core.state import Metadata
 def handle_metadata_change(event: MetadataEvent, metadata: Metadata, key: str):
     if event == MetadataEvent.NAME:
         metadata.name = st.session_state[key]
     elif event == MetadataEvent.DESCRIPTION:

events/record_sets.py CHANGED Viewed

@@ -2,9 +2,7 @@ import enum
 import streamlit as st
-from core.constants import RECORD_SETS
 from core.query_params import expand_record_set
-from core.query_params import set_tab
 from core.state import Metadata
 from core.state import RecordSet
@@ -18,7 +16,6 @@ class RecordSetEvent(enum.Enum):
 def handle_record_set_change(event: RecordSetEvent, record_set: RecordSet, key: str):
-    set_tab(RECORD_SETS)
     value = st.session_state[key]
     if event == RecordSetEvent.NAME:
         old_name = record_set.name

 import streamlit as st
 from core.query_params import expand_record_set
 from core.state import Metadata
 from core.state import RecordSet
 def handle_record_set_change(event: RecordSetEvent, record_set: RecordSet, key: str):
     value = st.session_state[key]
     if event == RecordSetEvent.NAME:
         old_name = record_set.name

events/resources.py CHANGED Viewed

@@ -2,8 +2,6 @@ import enum
 import streamlit as st
-from core.constants import RESOURCES
-from core.query_params import set_tab
 from core.state import FileObject
 from core.state import FileSet
 from core.state import Metadata
@@ -23,7 +21,6 @@ class ResourceEvent(enum.Enum):
 def handle_resource_change(event: ResourceEvent, resource: Resource, key: str):
-    set_tab(RESOURCES)
     value = st.session_state[key]
     if event == ResourceEvent.NAME:
         old_name = resource.name

 import streamlit as st
 from core.state import FileObject
 from core.state import FileSet
 from core.state import Metadata
 def handle_resource_change(event: ResourceEvent, resource: Resource, key: str):
     value = st.session_state[key]
     if event == ResourceEvent.NAME:
         old_name = resource.name

utils.py CHANGED Viewed

@@ -4,6 +4,7 @@ from core.past_projects import open_project
 from core.query_params import get_project_timestamp
 from core.state import CurrentProject
 from core.state import Metadata
 from core.state import SelectedRecordSet
 from core.state import SelectedResource
 import mlcroissant as mlc
@@ -17,17 +18,14 @@ def init_state(force=False):
     """Initializes the session state. `force=True` to force re-initializing it."""
     timestamp = get_project_timestamp()
-    if timestamp and not force:
-        project = CurrentProject.from_timestamp(timestamp)
-        if (
-            project
-            and CurrentProject not in st.session_state
-            and Metadata not in st.session_state
-        ):
-            st.session_state[CurrentProject] = project
-            st.session_state[Metadata] = open_project(project.path)
-    else:
-        st.session_state[CurrentProject] = None
     if Metadata not in st.session_state or force:
         st.session_state[Metadata] = Metadata()
@@ -41,6 +39,9 @@ def init_state(force=False):
     if SelectedResource not in st.session_state or force:
         st.session_state[SelectedRecordSet] = None
     # Uncomment those lines if you work locally in order to avoid clicks at each reload.
     # And comment all previous lines in `init_state`.
     # if mlc.Dataset not in st.session_state or force:

 from core.query_params import get_project_timestamp
 from core.state import CurrentProject
 from core.state import Metadata
+from core.state import OpenTab
 from core.state import SelectedRecordSet
 from core.state import SelectedResource
 import mlcroissant as mlc
     """Initializes the session state. `force=True` to force re-initializing it."""
     timestamp = get_project_timestamp()
+    if CurrentProject not in st.session_state or force:
+        if timestamp:
+            project = CurrentProject.from_timestamp(timestamp)
+            if project:
+                st.session_state[CurrentProject] = project
+                st.session_state[Metadata] = open_project(project.path)
+        else:
+            st.session_state[CurrentProject] = None
     if Metadata not in st.session_state or force:
         st.session_state[Metadata] = Metadata()
     if SelectedResource not in st.session_state or force:
         st.session_state[SelectedRecordSet] = None
+    if OpenTab not in st.session_state or force:
+        st.session_state[OpenTab] = None
     # Uncomment those lines if you work locally in order to avoid clicks at each reload.
     # And comment all previous lines in `init_state`.
     # if mlc.Dataset not in st.session_state or force:

views/files.py CHANGED Viewed

@@ -2,14 +2,12 @@ import streamlit as st
 from components.tree import render_tree
 from core.constants import DF_HEIGHT
-from core.constants import RESOURCES
 from core.files import file_from_form
 from core.files import file_from_upload
 from core.files import file_from_url
 from core.files import FILE_OBJECT
 from core.files import FILE_TYPES
 from core.files import RESOURCE_TYPES
-from core.query_params import set_tab
 from core.record_sets import infer_record_sets
 from core.state import FileObject
 from core.state import FileSet
@@ -27,6 +25,7 @@ _MANUAL_RESOURCE_TYPE_KEY = "create_manually_type"
 _MANUAL_NAME_KEY = "manual_object_name"
 _MANUAL_DESCRIPTION_KEY = "manual_object_description"
 _MANUAL_SHA256_KEY = "manual_object_sha256"
 def render_files():
@@ -69,7 +68,6 @@ def _render_resources_panel(files: list[Resource]) -> Resource | None:
     if not name:
         return None
     file = filename_to_file[name]
-    set_tab(RESOURCES)
     return file
@@ -104,9 +102,13 @@ def _render_upload_panel():
                 "SHA256",
                 key=_MANUAL_SHA256_KEY,
             )
-            st.text_input(
                 "Parent",
-                key="manual_parent",
             )
         def handle_on_click():
@@ -126,6 +128,7 @@ def _render_upload_panel():
                 name = st.session_state[_MANUAL_NAME_KEY]
                 description = st.session_state[_MANUAL_DESCRIPTION_KEY]
                 sha256 = st.session_state[_MANUAL_SHA256_KEY] if needs_sha256 else None
                 errorMessage = (
                     "Please import either a local file, provide a download URL or fill"
                     " in all required fields: name"
@@ -141,7 +144,7 @@ def _render_upload_panel():
                     )
                     return
                 file = file_from_form(
-                    file_type, resource_type, name, description, sha256, names
                 )
             st.session_state[Metadata].add_distribution(file)

 from components.tree import render_tree
 from core.constants import DF_HEIGHT
 from core.files import file_from_form
 from core.files import file_from_upload
 from core.files import file_from_url
 from core.files import FILE_OBJECT
 from core.files import FILE_TYPES
 from core.files import RESOURCE_TYPES
 from core.record_sets import infer_record_sets
 from core.state import FileObject
 from core.state import FileSet
 _MANUAL_NAME_KEY = "manual_object_name"
 _MANUAL_DESCRIPTION_KEY = "manual_object_description"
 _MANUAL_SHA256_KEY = "manual_object_sha256"
+_MANUAL_PARENT_KEY = "manual_object_parents"
 def render_files():
     if not name:
         return None
     file = filename_to_file[name]
     return file
                 "SHA256",
                 key=_MANUAL_SHA256_KEY,
             )
+            parent_options = [
+                file.name for file in st.session_state[Metadata].distribution
+            ]
+            st.multiselect(
                 "Parent",
+                options=parent_options,
+                key=_MANUAL_PARENT_KEY,
             )
         def handle_on_click():
                 name = st.session_state[_MANUAL_NAME_KEY]
                 description = st.session_state[_MANUAL_DESCRIPTION_KEY]
                 sha256 = st.session_state[_MANUAL_SHA256_KEY] if needs_sha256 else None
+                parents = st.session_state[_MANUAL_PARENT_KEY]
                 errorMessage = (
                     "Please import either a local file, provide a download URL or fill"
                     " in all required fields: name"
                     )
                     return
                 file = file_from_form(
+                    file_type, resource_type, name, description, sha256, parents, names
                 )
             st.session_state[Metadata].add_distribution(file)

views/overview.py CHANGED Viewed

@@ -1,3 +1,5 @@
 import streamlit as st
 from core.state import Metadata
@@ -7,6 +9,13 @@ from views.metadata import handle_metadata_change
 from views.metadata import MetadataEvent
 def render_overview():
     metadata: Metadata = st.session_state[Metadata]
     col1, col2 = st.columns([1, 1], gap="medium")
@@ -39,8 +48,12 @@ def render_overview():
             args=(MetadataEvent.DESCRIPTION, metadata, key),
         )
-        st.subheader(f"{len(metadata.distribution)} Files")
-        st.subheader(f"{len(metadata.record_sets)} Record Sets")
     with col2:
         user_started_editing = metadata.record_sets or metadata.distribution
         if user_started_editing:

+from typing import Any
 import streamlit as st
 from core.state import Metadata
 from views.metadata import MetadataEvent
+def _plural(array: list[Any]):
+    if array:
+        return "s"
+    else:
+        return ""
 def render_overview():
     metadata: Metadata = st.session_state[Metadata]
     col1, col2 = st.columns([1, 1], gap="medium")
             args=(MetadataEvent.DESCRIPTION, metadata, key),
         )
+        st.subheader(
+            f"{len(metadata.distribution)} File" + _plural(metadata.distribution)
+        )
+        st.subheader(
+            f"{len(metadata.record_sets)} Record Set" + _plural(metadata.distribution)
+        )
     with col2:
         user_started_editing = metadata.record_sets or metadata.distribution
         if user_started_editing:

views/record_sets.py CHANGED Viewed

@@ -92,9 +92,7 @@ def _handle_create_record_set():
     metadata.add_record_set(RecordSet(name="new-record-set", description=""))
-def _handle_fields_change(
-    record_set_key: int, record_set: RecordSet, params: dict[str, Any]
-):
     expand_record_set(record_set=record_set)
     data_editor_key = _data_editor_key(record_set_key, record_set)
     result = st.session_state[data_editor_key]

     metadata.add_record_set(RecordSet(name="new-record-set", description=""))
+def _handle_fields_change(record_set_key: int, record_set: RecordSet):
     expand_record_set(record_set=record_set)
     data_editor_key = _data_editor_key(record_set_key, record_set)
     result = st.session_state[data_editor_key]

views/wizard.py CHANGED Viewed

@@ -3,10 +3,16 @@ import json
 import streamlit as st
 import streamlit_nested_layout  # Do not remove this allows nesting columns.
 from core.constants import TABS
 from core.past_projects import save_current_project
-from core.query_params import go_to_tab
 from core.state import Metadata
 import mlcroissant as mlc
 from views.files import render_files
 from views.metadata import render_metadata
@@ -14,31 +20,33 @@ from views.overview import render_overview
 from views.record_sets import render_record_sets
-def render_export_button(col):
     metadata: Metadata = st.session_state[Metadata]
     try:
-        col.download_button(
-            "Export",
-            file_name=f"croissant-{metadata.name.lower()}.json",
-            type="primary",
-            data=json.dumps(metadata.to_canonical().to_json()),
-            help="Export the Croissant JSON-LD",
-        )
     except mlc.ValidationError as exception:
-        col.download_button("Export", disabled=True, data="", help=str(exception))
 def render_editor():
-    col1, col2 = st.columns([10, 1])
-    render_export_button(col2)
-    tab1, tab2, tab3, tab4 = col1.tabs(TABS)
-    with tab1:
         render_overview()
-    with tab2:
         render_metadata()
-    with tab3:
         render_files()
-    with tab4:
         render_record_sets()
     save_current_project()

 import streamlit as st
 import streamlit_nested_layout  # Do not remove this allows nesting columns.
+from components.tabs import render_tabs
+from core.constants import METADATA
+from core.constants import OVERVIEW
+from core.constants import RECORD_SETS
+from core.constants import RESOURCES
 from core.constants import TABS
 from core.past_projects import save_current_project
+from core.state import get_tab
 from core.state import Metadata
+from core.state import set_tab
 import mlcroissant as mlc
 from views.files import render_files
 from views.metadata import render_metadata
 from views.record_sets import render_record_sets
+def _export_json() -> str | None:
     metadata: Metadata = st.session_state[Metadata]
     try:
+        return {
+            "name": f"croissant-{metadata.name.lower()}.json",
+            "content": json.dumps(metadata.to_canonical().to_json()),
+        }
     except mlc.ValidationError as exception:
+        return None
 def render_editor():
+    export_json = _export_json()
+    # Warning: the custom component cannot be nested in a st.columns or it is forced to
+    # re-render even if a `key` is set.
+    selected_tab = get_tab()
+    tab = render_tabs(
+        tabs=TABS, selected_tab=selected_tab, json=export_json, key="tabs"
+    )
+    if tab == OVERVIEW:
         render_overview()
+    elif tab == METADATA:
         render_metadata()
+    elif tab == RESOURCES:
         render_files()
+    elif tab == RECORD_SETS:
         render_record_sets()
     save_current_project()
+    set_tab(tab)