V4.8.2 Patch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "harperdb-studio",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "description": "A UI for HarperDB",
   "deploymentUrl": "studio.harperdb.io",
   "private": true,

src/assets/styles/components/_react-table.scss

@@ -18,6 +18,11 @@
         min-width: 100px;
         white-space: nowrap;
 
+        &.disabled-column {
+          background-color: $lighter-grey-overlay !important;
+          cursor: not-allowed;
+        }
+
         &.sorted {
           &.desc {
             box-shadow: inset 0 -2px 0 0 $lighter-grey-overlay;
@@ -26,7 +31,6 @@
           &.asc {
             box-shadow: inset 0 2px 0 0 $lighter-grey-overlay;
           }
-
         }
       }
     }
@@ -129,7 +133,6 @@
       }
     }
 
-
     .paginator {
       align-items: center;
       display: flex;

src/components/instance/browse/BrowseDatatable.js

@@ -17,7 +17,7 @@ let controller;
 let controller2;
 let controller3;
 
-function BrowseDatatable({ tableState, setTableState, activeTable }) {
+function BrowseDatatable({ tableState, setTableState, activeTable, tableDescriptionAttributes }) {
   const navigate = useNavigate();
   const { compute_stack_id, schema, table, customer_id } = useParams();
   const auth = useStoreState(instanceState, (s) => s.auth);
@@ -65,7 +65,7 @@ function BrowseDatatable({ tableState, setTableState, activeTable }) {
       }
       controller = new AbortController();
       controller2 = new AbortController();
-      const { newData, newTotalRecords, newTotalPages, newEntityAttributes, hashAttribute, dataTableColumns, error } = await getTableData({
+      const { newData, newTotalRecords, newTotalPages, newEntityAttributes, hashAttribute, dynamicAttributesFromDataTable, dataTableColumns, error } = await getTableData({
         schema,
         table,
         filtered: tableState.filtered,
@@ -103,6 +103,7 @@ function BrowseDatatable({ tableState, setTableState, activeTable }) {
             newEntityAttributes,
             hashAttribute,
             dataTableColumns,
+            dynamicAttributesFromDataTable,
             error,
           });
         }
@@ -148,6 +149,8 @@ function BrowseDatatable({ tableState, setTableState, activeTable }) {
             columns={tableState.dataTableColumns || []}
             data={tableState.tableData || []}
             error={tableState.error}
+            tableDescriptionAttributes={tableDescriptionAttributes}
+            dynamicAttributesFromDataTable={tableState.dynamicAttributesFromDataTable}
             currentPage={tableState.page}
             pageSize={tableState.pageSize}
             totalPages={totalPages || 0}

src/components/instance/browse/index.js

@@ -64,32 +64,40 @@ function BrowseIndex() {
   const structure = useStoreState(instanceState, (s) => s.structure);
   const [entities, setEntities] = useState({ schemas: [], tables: [], activeTable: false });
   const [tableState, setTableState] = useState(defaultTableState);
+  const [tableDescription, setTableDescription] = useState(null);
   const baseUrl = `/o/${customer_id}/i/${compute_stack_id}/browse`;
   const showForm = instanceAuths[compute_stack_id]?.super || instanceAuths[compute_stack_id]?.structure === true;
   const showTableForm = showForm || (instanceAuths[compute_stack_id]?.structure && instanceAuths[compute_stack_id]?.structure?.includes(schema));
   const emptyPromptMessage = showForm
-    ? `Please ${(schema && entities.tables && !entities.tables.length) || !entities.schemas.length ? 'create' : 'choose'} a ${
-        schema ? 'table' : `${versionAsFloat >= 4.2 ? 'database' : 'schema'}`
-      }`
+    ? `Please ${(schema && entities.tables && !entities.tables.length) || !entities.schemas.length ? 'create' : 'choose'} a ${schema ? 'table' : `${versionAsFloat >= 4.2 ? 'database' : 'schema'}`
+    }`
     : "This user has not been granted access to any tables. A super-user must update this user's role.";
   const [hasHashAttr, setHasHashAttr] = useState(true);
 
   const syncInstanceStructure = () => {
     buildInstanceStructure({ auth, url });
   };
 
-  const checkForHashAttribute = () => {
-    async function check() {
-      if (table) {
+  const fetchDescribeTable = async () => {
+    if (table) {
+      try {
         const result = await describeTable({ auth, url, schema, table });
-        setHasHashAttr(Boolean(result.hash_attribute));
+        setTableDescription(result);
+      } catch (e) {
+        addError(e);
       }
     }
-
-    check();
   };
 
-  useEffect(checkForHashAttribute, [auth, url, schema, table]);
+  useEffect(() => {
+    fetchDescribeTable();
+  }, [auth, url, schema, table]);
+
+  useEffect(() => {
+    if (tableDescription) {
+      setHasHashAttr(Boolean(tableDescription.hash_attribute));
+    }
+  }, [tableDescription]);
 
   const validate = () => {
     if (structure) {
@@ -153,7 +161,7 @@ function BrowseIndex() {
           ) : schema && table && action && entities.activeTable ? (
             <JSONEditor newEntityAttributes={tableState.newEntityAttributes} hashAttribute={tableState.hashAttribute} />
           ) : schema && table && entities.activeTable ? (
-            <DataTable activeTable={entities.activeTable} tableState={tableState} setTableState={setTableState} />
+            <DataTable activeTable={entities.activeTable} tableDescriptionAttributes={tableDescription?.attributes} tableState={tableState} setTableState={setTableState} />
           ) : schema && table && !hasHashAttr ? (
             <NoPrimaryKeyMessage />
           ) : (

src/components/shared/DataTable.js

@@ -71,6 +71,8 @@ function DataTable({
   onRowClick,
   sorted,
   loading,
+  dynamicAttributesFromDataTable,
+  tableDescriptionAttributes,
   manual = false,
 }) {
   const { headerGroups, page, rows, prepareRow, state, setAllFilters, canPreviousPage, canNextPage, pageOptions, pageCount, gotoPage, nextPage, previousPage, setPageSize } =
@@ -111,7 +113,14 @@ function DataTable({
   return (
     <ErrorBoundary onError={(err, componentStack) => addError({ error: { message: err.message, componentStack } })} FallbackComponent={ErrorFallback}>
       <div className="react-table-scroller">
-        <DataTableHeader headerGroups={headerGroups} onSortedChange={onSortedChange} sorted={sorted} showFilter={showFilter} />
+        <DataTableHeader
+          headerGroups={headerGroups}
+          tableDescriptionAttributes={tableDescriptionAttributes}
+          dynamicAttributesFromDataTable={dynamicAttributesFromDataTable}
+          onSortedChange={onSortedChange}
+          sorted={sorted}
+          showFilter={showFilter}
+        />
         {loading || localLoading ? (
           <div className="centered text-center">
             <i className="fa fa-spinner fa-spin" />

src/functions/instance/getTableData.js

@@ -2,6 +2,21 @@ import describeTable from '../api/instance/describeTable';
 import searchByValue from '../api/instance/searchByValue';
 import searchByConditions from '../api/instance/searchByConditions';
 
+const getAttributesFromTableData = (tableData, existingAttributes) => {
+  if (existingAttributes.length >= 8) return [];
+  const existing = new Map(existingAttributes.map((value, index) => [value, index]));
+  const extra = new Map();
+  for (const dataRow of tableData) {
+    for (const key of Object.keys(dataRow)) {
+      if (!existing.has(key)) {
+        const count = extra.get(key) || 0;
+        extra.set(key, count + 1);
+      }
+    }
+  }
+  return Array.from(extra).sort(([, a], [, b]) => b - a).map(([key]) => key).slice(0, 8 - existingAttributes.length);
+}
+
 export default async ({ schema, table, filtered, pageSize, onlyCached, sorted, page, auth, url, signal, signal2 }) => {
   let fetchError = false;
   let newTotalRecords = 0;
@@ -10,6 +25,7 @@ export default async ({ schema, table, filtered, pageSize, onlyCached, sorted, p
   let allAttributes = false;
   let hashAttribute = false;
   let get_attributes = ['*'];
+  let dynamicAttributesFromDataTable = [];
   const offset = page * pageSize;
 
   try {
@@ -76,9 +92,12 @@ export default async ({ schema, table, filtered, pageSize, onlyCached, sorted, p
     }
   }
 
+
+  dynamicAttributesFromDataTable = getAttributesFromTableData(newData, allAttributes)
+  allAttributes.push(...dynamicAttributesFromDataTable);
   // sort columns, but keep primary key / hash attribute first, and created and updated last.
   // NOTE: __created__ and __updated__ might not exist in the schema, only include if they exist.
-  const orderedColumns = allAttributes.filter((a) => ![hashAttribute, '__createdtime__', '__updatedtime__'].includes(a)).sort();
+  const orderedColumns = allAttributes.filter((a) => ![hashAttribute, '__createdtime__', '__updatedtime__'].includes(a))
   const newEntityAttributes = orderedColumns.reduce((ac, a) => ({ ...ac, [a]: null }), {});
 
   if (allAttributes.includes('__createdtime__')) orderedColumns.push('__createdtime__');
@@ -97,5 +116,6 @@ export default async ({ schema, table, filtered, pageSize, onlyCached, sorted, p
     hashAttribute,
     dataTableColumns,
     error: fetchError === 'table' ? `You are not authorized to view ${schema}:${table}` : fetchError,
+    dynamicAttributesFromDataTable,
   };
 };