From 7ff37e6e1b77567c7ee64a8efd107aff37709377 Mon Sep 17 00:00:00 2001
From: adam_blvck <contact@adamblvck.com>
Date: Mon, 17 Jul 2023 01:43:48 +0200
Subject: [PATCH] - Updated readme - Added resizable columns

---
 README.md                             | 20 ++++++++++++++++++++
 docs/convert_json.ipynb               |  2 +-
 docs/{liver_777.csv => liber_777.csv} |  0
 src/App.js                            | 24 +++++++++++++++++++++---
 4 files changed, 42 insertions(+), 4 deletions(-)
 rename docs/{liver_777.csv => liber_777.csv} (100%)

diff --git a/README.md b/README.md
index 61e8545..29a51e7 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,26 @@
 # Open 777
 
+### 🜁🜂 Visit [Open 777 Here](https://adamblvck.github.io/open_777/) 🜄🜃
 
+## About
+
+Open 777 is a small online website for easily looking up Crowley's Esoteric Kabbalistic correspondences, meant for Esoteric Study & Practice.
+
+The website consists of transcriptions done by ADAM BLVCK from the now in open-domain book "777" by Aleister Crowley. Since looking up online correspondences can be a true hassle, and since no courated dataset of these correspondences could be found (which in itself is a treasure mine for enhancing AI-models), I decided to create one.
+
+## The Website
+
+In the books, the tables of correspondences is organized in 32 rows which represent the Kabbalistic scale of meaning, which spans many pages of correspondence categories. In the app a transposed approach is used, where the 32 "steps" on the scale are presented as columns, whereas the rows indicate categories.
+
+The website uses [Glide Data Grid](https://github.com/glideapps/glide-data-grid) which is most suitable for this purpose, and includes search-functionality across the whole table.
+
+## Data
+
+The to-transcribe data is huge, and thus this website will be updated every few days until all correspondences are covered. If you think you can help with transcription, please message me here or at contact@adamblvck.com.
+
+The correspondence dataset can be found as a json object in the file `src/liber_777.js`, or `docs/liber_777.csv`, but the source of both these files is now hosted on [Google Sheets](https://docs.google.com/spreadsheets/d/1bJPN_gs6USHniUfmWFIACCroOAzOq8jX2XWITclSBA0/edit?usp=sharing). The python notebook located at `docs/convert_json.ipynb` can be used to convert a csv (exported from the Google Sheet) into an appropriate format for use in a website, or javascript environment.
+
+### 🜁🜂 Visit [Open 777 Here](https://adamblvck.github.io/open_777/) 🜄🜃
 
 ## Publishing to GitHub Pages
 
diff --git a/docs/convert_json.ipynb b/docs/convert_json.ipynb
index 20b2fad..b6dabee 100644
--- a/docs/convert_json.ipynb
+++ b/docs/convert_json.ipynb
@@ -15,7 +15,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "df = pd.read_csv(\"./liver_777.csv\")"
+    "df = pd.read_csv(\"./liber_777.csv\")"
    ]
   },
   {
diff --git a/docs/liver_777.csv b/docs/liber_777.csv
similarity index 100%
rename from docs/liver_777.csv
rename to docs/liber_777.csv
diff --git a/src/App.js b/src/App.js
index 97b533c..3e1d238 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,18 +13,20 @@ import { TableColumns, TableIndex } from './structure';
 import { Liber777 } from './liber_777';
 import { DarkTheme } from './dark';
 
+import _ from 'lodash';
+
 function App() {
 
 	const [showSearch, setShowSearch] = React.useState(false);
 	const onSearchClose = React.useCallback(() => setShowSearch(false), []);
 
+	const [columns, setColumns] = React.useState(TableColumns);
+
 	const getContent = React.useCallback( cell => {
 		const [col, row] = cell;
 		const dataRow = Liber777[row];
 		// dumb but simple way to do this
 
-		console.log (col, row, TableIndex[col], dataRow);
-
 		const d = dataRow[ TableIndex[col]];
 		return {
 			kind: GridCellKind.Text,
@@ -59,6 +61,20 @@ function App() {
 		return text_color;
 	}
 
+	const handleColumnResize = (column, newSize) => {
+		console.log("event", column, newSize);
+
+		setColumns(prevCols => {
+			const index = _.findIndex(prevCols, { id: column.id });
+			const newCols = [...prevCols];
+			newCols.splice(index, 1, {
+				...prevCols[index],
+				width: newSize,
+			});
+			return newCols;
+		});
+	}
+
 	return (
 		<div className="App">
 			<div className="App-header">
@@ -83,6 +99,8 @@ function App() {
 					<DataEditor
 						theme={DarkTheme}
 
+						onColumnResize={handleColumnResize}
+
 						freezeColumns={1}
 						experimental={{hyperWrapping:true}}
 
@@ -92,7 +110,7 @@ function App() {
 						onSearchClose={onSearchClose}
 						className="data"
 						getCellContent={getContent}
-						columns={TableColumns}
+						columns={columns}
 						rows={Liber777.length}
 
 						drawCell={args => {