Merge branch 'main' into undo-redo

README.md

@@ -8,7 +8,7 @@
     </a>
 </p>
 <p align="center">
-    <b>Next-Gen ERD</b>: Design, Explore, Document and Analyze your database
+    <b>Next-Gen ERD</b>: Design, Explore, Document and Analyze your database, schema and data
 </p>
 <p align="center">
   <a href="https://azimutt.app" target="_blank" rel="noopener">azimutt.app</a> •
@@ -20,7 +20,7 @@
     <a href="https://azimutt.app/slack" target="_blank"><img src="assets/slack-join.svg" alt="Join us on Slack" style="width: 216px; height: 54px;" width="216" height="54"></a>
 </p>
 
-Azimutt is an Entity Relationship Diagram (ERD) targeting real world database schema (big & messy).
+Azimutt is a full-stack database exploration tool, from modern ERD made for real world databases (big & messy), to fast data navigation, but also documentation everywhere and whole database analysis.
 
 [![Azimutt screenshot](docs/_assets/azimutt-screenshot-gospeak.png)](https://azimutt.app/gallery/gospeak)
 
@@ -30,7 +30,7 @@ Databases existed for more than 40 years and despite a lot of tool around them,
 
 - **Database clients** focus on querying experience, with auto-completion and table/column lists but no visual help
 - **ERDs** have a great diagram UI but fall short when schema is growing (real-world use cases)
-- **Data catalogs** are primarily focused on data governance and lineage on big data sector
+- **Data catalogs** are focused on data governance and lineage for data teams, miss relational db for developers
 
 So we decided to built it 💪
 
@@ -39,15 +39,21 @@ Azimutt started as a schema exploration tool for databases with hundreds of tabl
 [![Azimutt roadmap](docs/_assets/azimutt-roadmap.png)](https://mm.tt/map/2434161843?t=N2yWZj1pc1)
 
 - Design your schema using [AML](docs/aml/README.md) for a fast diagramming
-- Explore your database using search everywhere, display only useful tables/columns and follow relations
-- Document it with layouts for use cases, features or team scopes and table/column notes
-- Analyze it to discover inconsistencies and best practices
+- Explore your database schema using search everywhere, display only useful tables/columns and follow relations
+- Query your data like never before, follow forign keys and display entities in diagram
+- Document using table/column notes and tags and layouts and memos for use cases, features or team scopes
+- Analyze it to discover inconsistencies and best practices to apply
 
 Azimutt goal is to be your ultimate tool to understand your database.
 
+## Self hosted
+
+You can use our [Docker image](https://github.com/azimuttapp/azimutt/pkgs/container/azimutt) to easily deploy it. Here is the [full guide](INSTALL.md).
+
+
 ## Local development
 
-Azimutt is built with [Elm](https://elm-lang.org)/[elm-spa](https://www.elm-spa.dev) (editor) and [Elixir](https://elixir-lang.org)/[Phoenix](https://www.phoenixframework.org) (backend & admin).
+Azimutt is built with [Elixir](https://elixir-lang.org)/[Phoenix](https://www.phoenixframework.org) (backend & admin) and [Elm](https://elm-lang.org)/[elm-spa](https://www.elm-spa.dev) (editor).
 
 For local development you will need to set up the environment:
 
@@ -68,9 +74,6 @@ Now you can visit :
 - [`localhost:4000`](http://localhost:4000) for the main app
 - [`localhost:4000/api/v1/swagger`](http://localhost:4000/api/swagger) for the Swagger documentation
 
-⚠️ to launch the app you will need a few environment variables: `GITHUB_CLIENT_ID`, `GITHUB_CLIENT_SECRET`, `MAILGUN_DOMAIN`, `MAILGUN_API_KEY`, `STRIPE_API_KEY`, `STRIPE_WEBHOOK_SIGNING_SECRET`.
-
-⚠️ Please see [Setup Stripe](#setup-stripe).
 
 ### npm command semantics
 
@@ -102,10 +105,12 @@ And then "special" commands:
 
 - `elm:book`: launch elm-book, the design system for Elm
 
+
 ### Development commands
 
 - `npm run elm:book` to launch the Elm design system
 
+
 ### Setup Stripe
 
 #### Config
@@ -115,6 +120,7 @@ And then "special" commands:
 - Copy your webhook signing secret to your `.env`, it's look like (`whsec_XXX`)
 - Go to [your Stripe dashboard](https://dashboard.stripe.com/test/apikeys) to obtain your API Key and copy it into `STRIPE_API_KEY` in your `.env` file.
 
+
 #### Payments
 
 When testing interactively, use a card number, such as `4242 4242 4242 4242`. Enter the card number in the Dashboard or in any payment form.
@@ -124,6 +130,7 @@ Use any value you like for other form fields.
 
 See more in the [stripe testing documentation](https://stripe.com/docs/testing)
 
+
 ## Stack
 
 * [Production](https://azimutt.app) & [Staging](https://azimutt.dev)

backend/lib/azimutt_web/templates/website/index.html.heex

@@ -23,7 +23,7 @@
                         <div class="flex justify-center mb-4 space-x-6">
                             <a href={Azimutt.config(:azimutt_github)} target="_blank" rel="noopener" class="px-3 py-1 text-sm font-semibold leading-6 text-gray-600 transition duration-300 ease-in-out rounded-full bg-gray-50 ring-1 ring-inset ring-gray-200 hover:bg-gray-100 hover:shadow-lg hover:scale-105">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="inline -mt-1"><path d="M11.86 1.6c1.9 0 3.67.44 5.3 1.31a9.8 9.8 0 015.24 8.75c0 2.27-.65 4.32-1.96 6.12a9.95 9.95 0 01-5.09 3.73c-.23.05-.4.03-.53-.07a.52.52 0 01-.2-.42v-3.46c0-.89-.22-1.5-.7-1.9 1.03-.1 1.8-.25 2.3-.42.79-.27 1.39-.7 1.81-1.24.48-.71.7-1.7.7-2.94 0-.52-.1-.99-.3-1.36-.14-.27-.4-.61-.8-1.03.1-.28.18-.62.2-1a4.67 4.67 0 00-.3-1.82c-.22-.05-.62.02-1.13.22-.32.15-.72.32-1.18.57l-.55.37a9.73 9.73 0 00-5.27 0l-.55-.37a8.54 8.54 0 00-1.2-.57c-.5-.2-.88-.24-1.13-.17a3.9 3.9 0 00-.3 1.83c0 .4.05.69.17.94-.32.42-.57.79-.73 1.13-.15.35-.22.77-.22 1.31 0 1.24.22 2.2.68 2.9.4.56.97 1 1.75 1.28.5.17 1.26.3 2.26.42-.35.32-.58.79-.68 1.4-.47.23-.92.3-1.38.25a2.02 2.02 0 01-1.68-1.1c-.17-.3-.4-.55-.68-.75l-.62-.3-.3-.05c-.3 0-.48.05-.48.15-.03.1.05.2.2.32l.2.18c.2.1.4.3.58.54.17.2.3.42.42.67l.18.32c.15.42.4.74.8.94a3 3 0 001.2.37c.33.02.69.02 1.06-.05l.45-.05.05 2.52c0 .17-.07.3-.2.42-.12.1-.3.15-.52.07a10.13 10.13 0 01-5.17-3.73 10.34 10.34 0 01-1.96-6.15c0-1.88.45-3.58 1.33-5.11a9.93 9.93 0 013.69-3.64 10.53 10.53 0 015.24-1.33zM5.21 15.51c.05-.05.13-.07.2-.02.08.05.1.1.08.17-.03.07-.1.07-.2.02s-.1-.12-.08-.17zm.45.35c.05-.05.13-.05.2.05.08.07.1.14.06.2-.05.04-.13.04-.2-.06-.1-.07-.1-.14-.06-.2zm.43.52c.05-.03.1-.03.15-.03a.2.2 0 01.1.1c.08.1.08.2 0 .25a.08.08 0 01-.1 0c-.02-.03-.1-.05-.15-.08-.05-.12-.05-.22 0-.24zm.5.59c.03-.03.08-.03.13-.03l.15.08c.05.05.07.1.07.15.03.05 0 .1-.02.12-.08.07-.18.07-.3-.05a.22.22 0 01-.08-.17c0-.08.03-.08.05-.1zm.68.52c.03-.1.1-.15.25-.1.15.05.2.1.2.17-.02.08-.05.13-.1.15-.05.02-.1.02-.17 0-.08-.02-.1-.07-.15-.1-.05-.05-.05-.07-.03-.12zm1.28.17c0-.02-.02-.05-.08-.07a.4.4 0 00-.2-.05c-.15 0-.2.05-.2.17 0 .1.08.15.23.15.17-.03.25-.08.25-.2zm.55-.25c.15 0 .23.05.23.13.02.07-.05.15-.2.2-.05 0-.1 0-.15-.03-.05-.02-.08-.07-.08-.15 0-.07.08-.12.2-.15z" fill="currentColor"></path></svg>
-                                814 stars
+                                827 stars
                             </a>
                             <a href={Azimutt.config(:azimutt_slack)} target="_blank" rel="noopener" class="px-3 py-1 text-sm font-semibold leading-6 text-gray-600 transition duration-300 ease-in-out rounded-full bg-gray-50 ring-1 ring-inset ring-gray-200 hover:bg-gray-100 hover:shadow-lg hover:scale-105">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none" class="inline -mt-1"><path fill="#E01E5A" d="M4.441 9.847c0 .809-.661 1.47-1.47 1.47-.81 0-1.471-.661-1.471-1.47 0-.81.661-1.471 1.47-1.471h1.471v1.47zm.739 0c0-.81.66-1.471 1.47-1.471.81 0 1.47.661 1.47 1.47v3.683c0 .81-.66 1.47-1.47 1.47-.81 0-1.47-.66-1.47-1.47V9.847z"></path><path fill="#36C5F0" d="M6.65 3.942c-.81 0-1.47-.662-1.47-1.47C5.18 1.661 5.84 1 6.65 1c.81 0 1.47.662 1.47 1.471v1.47H6.65zm.003.741c.81 0 1.47.66 1.47 1.47 0 .81-.66 1.47-1.47 1.47H2.97c-.81 0-1.471-.66-1.471-1.47 0-.81.661-1.47 1.47-1.47h3.683z"></path><path fill="#2EB67D" d="M12.555 6.153c0-.81.66-1.47 1.47-1.47.81 0 1.47.66 1.47 1.47 0 .81-.66 1.47-1.47 1.47h-1.47v-1.47zm-.739 0c0 .81-.661 1.47-1.47 1.47-.81 0-1.471-.66-1.471-1.47V2.471c0-.81.661-1.47 1.47-1.47.81 0 1.471.66 1.471 1.47v3.682z"></path><path fill="#ECB22E" d="M10.346 12.058c.809 0 1.47.661 1.47 1.47 0 .81-.661 1.471-1.47 1.471-.81 0-1.471-.66-1.471-1.47v-1.47h1.47zm0-.741c-.81 0-1.471-.661-1.471-1.47 0-.81.661-1.471 1.47-1.471h3.683c.81 0 1.47.661 1.47 1.47 0 .81-.66 1.471-1.47 1.471h-3.682z"></path></svg>
@@ -177,7 +177,7 @@
                     <a href={"mailto:#{Azimutt.config(:azimutt_email)}"} target="_blank" rel="noopener" class="underline">Email</a>.
                 </p>
                 <div class="flex items-center justify-center mt-10 gap-x-6">
-                    <a href={Routes.user_session_path(@conn, :new)} class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Join 2200+ early adopters</a>
+                    <a href={Routes.user_session_path(@conn, :new)} class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Join 2300+ early adopters</a>
                     <a href={Routes.gallery_path(@conn, :index)} class="text-sm font-semibold leading-6 text-gray-900">Browse samples <span aria-hidden="true">→</span></a>
                 </div>
             </div>

backend/priv/static/elm/styles.css

@@ -45,6 +45,14 @@ input[type="search"]::-webkit-search-results-decoration {
     margin-top: -64px;
 }
 
+/* context-menu, from https://tailwindcomponents.com/component/nestable-dropdown-menu */
+
+.context-menu li > ul                                  { transform: translatex(100%) scale(0) }
+.context-menu li:hover > ul                            { transform: translatex(101%) scale(1) }
+.context-menu li > span svg.context-menu-chevron       { transform: rotate(-90deg) }
+.context-menu li:hover > span svg.context-menu-chevron { transform: rotate(-270deg) }
+
+
 /* animations */
 
 /* from https://codepen.io/chrislang/pen/pvPpQb */

frontend/src/Components/Book.elm

@@ -11,6 +11,7 @@ import Components.Atoms.Markdown as Markdown
 import Components.Molecules.Alert as Alert
 import Components.Molecules.Avatar as Avatar
 import Components.Molecules.BarChart as BarChart
+import Components.Molecules.ContextMenu as ContextMenu
 import Components.Molecules.Divider as Divider
 import Components.Molecules.Dropdown as Dropdown
 import Components.Molecules.Editor as Editor
@@ -122,7 +123,7 @@ main =
             [ ( "", [ docs ] )
             , ( "Slices", [ DataExplorer.doc, DataExplorerDetails.doc, DataExplorerQuery.doc, DataExplorerStats.doc, ExportDialogBody.doc, NotFound.doc, NewLayoutBody.doc, ProjectSaveDialogBody.doc, ProPlan.doc ] )
             , ( "Organisms", [ ColorPicker.doc, Details.doc, Navbar.doc, Relation.doc, Table.doc, TableRow.doc ] )
-            , ( "Molecules", [ Alert.doc, Avatar.doc, BarChart.doc, Divider.doc, Dropdown.doc, Editor.doc, FileInput.doc, FormLabel.doc, InputText.doc, ItemList.doc, Modal.doc, Pagination.doc, PieChart.doc, PieChartCustom.doc, Popover.doc, Radio.doc, Select.doc, Slideover.doc, Toast.doc, Tooltip.doc ] )
+            , ( "Molecules", [ Alert.doc, Avatar.doc, BarChart.doc, ContextMenu.doc, Divider.doc, Dropdown.doc, Editor.doc, FileInput.doc, FormLabel.doc, InputText.doc, ItemList.doc, Modal.doc, Pagination.doc, PieChart.doc, PieChartCustom.doc, Popover.doc, Radio.doc, Select.doc, Slideover.doc, Toast.doc, Tooltip.doc ] )
             , ( "Atoms", [ Badge.doc, Button.doc, colorsDoc, Icon.doc, Input.doc, Kbd.doc, Markdown.doc, Link.doc, Loader.doc ] )
             ]