Merge pull request #20 from MetacityTools/dev

Releasing 0.5.0

Author: vojtatom

.github/workflows/ci.yaml

@@ -68,3 +68,24 @@ jobs:
                       cd Studio
                       npm i
                       npm run build
+
+    dev-release:
+        runs-on: ubuntu-latest
+        if: github.event_name == 'push' && contains(github.ref, 'dev')
+        needs: build
+        steps:
+            - uses: actions/checkout@v3
+            - name: Deploying to server
+              uses: appleboy/ssh-action@v0.1.10
+              with:
+                  host: ${{ secrets.SERVER_HOST }}
+                  username: ${{ secrets.SERVER_USERNAME }}
+                  key: ${{ secrets.SERVER_SSH_KEY }}
+                  port: ${{ secrets.PORT }}
+                  script: |
+                      cd dev
+                      rm -rf Studio
+                      GIT_SSH_COMMAND="ssh -i ~/.ssh/github" git clone -b dev git@github.com:MetacityTools/Studio.git 
+                      cd Studio
+                      npm i
+                      npm run build

README.md

@@ -34,15 +34,7 @@ These features are planned for the future, but not yet scheduled.
 
 ### Priority Backlog
 
--   [ ] Filter file inputs (add format filters)
--   [ ] Click off model - deselect all
--   [ ] Color indicating in group vs out of group in viewer
--   [ ] Delete group action button in the hierarchy menu
--   [ ] Group selection in hierarchy tree optimization (shift to select, deselect previous on selectiong previous)
--   [ ] Open editor on Group select
--   [ ] Unselect all on clicking away
 -   [ ] Shortcuts for tab switching in editor
--   [ ] When in Table view, click to select model and extend the selection based on groups on key/button/action
 
 ### Backlog
 
@@ -53,13 +45,9 @@ These features are planned for the future, but not yet scheduled.
 -   [ ] Extract Utils to separate SDK form metacity editors
 -   [ ] Optional interactivity - build BVH only if user opts-in to make the loaded models clickable
 -   [ ] Optimize deleting models - partition model BVH nodes based on submodels's ids
--   [ ] Named groups in hierarchy
 -   [ ] Insert textured plane (location blueprints for reference)
 -   [ ] Refactor General context - setting status messages, etc.
 -   [ ] Add a button to open/hide the side panel
-
-### Bugs and Validations
-
 -   [ ] Do not allow keys to be empty in table view during conversion
 
 ---
@@ -68,18 +56,51 @@ These features are planned for the future, but not yet scheduled.
 
 These features are planned for the future, and scheduled for a specific release.
 
-### v0.4.1
+### v0.5.1
 
 -   [ ] Projecting models onto models (2D onto 3D) - ✨WIP https://github.com/vojtatom/geometry
 -   [ ] Loading points and lines from SHP
 -   [ ] Export screenshot action
--   [ ] Selecting colormap
--   [ ] Hierarchy UI controls
-
-🧠 Call for consultation (TB planned, beginning of July 2023)
+-   [ ] Tooltip on hover over model
+-   [ ] Dark mode
+
+### v0.5.0 - Work in progress
+
+⚠️ Breaking changes, old `.metacity` files will not be compatible.
+🧠 Call for consultation (TB planned, end of July 2023)
+
+-   [x] Remove groups and hierarchy - all models will be in a flat list
+-   [x] Metadata editor replacing Hierarchy editor
+    -   [x] Diffing metadata between models
+    -   [x] Edit metadata on selection
+    -   [x] Editor part 1 - allow editing common attributes
+    -   ~~[ ] Editor part 2 - show which attributes are different (can be overwritten and changed to common)~~ - will not implement for now
+    -   [x] fulltext search filtering - values only
+-   [x] Styling
+    -   [x] Style Editor
+    -   [x] Auto generate/update styles
+    -   [x] Style outline
+    -   [x] Apply styles to the geometry
+    -   [x] Styling UI - show data infographics
+    -   [x] Clean syling button - switches on tab close
+-   [x] Updated metadata format - binary buffers + attributes + styling
+    -   [x] Metadata export/import
+    -   [x] Styles
+-   [x] Updated viewer to sync with studio
+-   [x] Filter file inputs (add format filters)
+-   [x] Click off model - deselect all
+-   [x] Group selection in hierarchy tree optimization (shift to select, deselect previous on selectiong previous)
+-   [x] When in Table view, click to select model and extend the selection based on groups on key/button/action
+-   [x] Import and export data separated into models (do not join on export)
+-   [x] Allow renaming models
+-   [x] Refactor colors
+-   [x] Resolve rejects during loading
+-   [x] Allow colormap codes in styles instead of lists of colors [plasma, viridis, inferno, magma]
 
 ### v0.4.0 - ✅ Released
 
+🧠 Call for consultation (TB planned, beginning of July 2023)
+
 -   [x] Browsing metadata hierarchy in viewer
 -   [x] Restructure menu in Editor (unify UI with viewer)
 -   [x] Remove metadata view from transform view

package.json

@@ -1,7 +1,7 @@
 {
     "name": "metacity-studio",
     "private": true,
-    "version": "0.4.0",
+    "version": "0.5.0",
     "type": "module",
     "scripts": {
         "dev": "vite",

studio/src/assets/index.css

@@ -5,7 +5,7 @@
 html,
 body,
 #root {
-    @apply w-full h-full;
+    @apply h-full w-full;
     overscroll-behavior-x: none;
 }
 
@@ -51,23 +51,54 @@ body,
     }
 
     input[type='range'] {
-        @apply appearance-none bg-transparent cursor-pointer outline-none;
+        @apply cursor-pointer appearance-none bg-transparent outline-none;
     }
 
     input[type='range']::-webkit-slider-runnable-track {
-        @apply bg-neutral-300 rounded-full;
+        @apply rounded-full bg-neutral-300;
     }
 
     input[type='range']::-webkit-slider-thumb {
-        @apply appearance-none bg-neutral-500 rounded-full w-4 h-4;
+        @apply h-4 w-4 appearance-none rounded-full bg-neutral-500;
     }
 
     input[type='range']::-moz-range-track {
-        @apply bg-neutral-300 rounded-full;
+        @apply rounded-full bg-neutral-300;
     }
 
     input[type='range']::-ms-track {
-        @apply bg-neutral-300 rounded-full;
+        @apply rounded-full bg-neutral-300;
+    }
+
+    select {
+        @apply cursor-pointer appearance-none bg-transparent outline-none;
+    }
+
+    select::-ms-expand {
+        display: none;
+    }
+
+    select::-moz-focusring {
+        color: transparent;
+        text-shadow: 0 0 0 #000;
+    }
+
+    select::-moz-focus-inner {
+        border: 0;
+    }
+
+    select option {
+        @apply bg-white;
+    }
+
+    /* add chevron to select */
+
+    select {
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l4 4 4-4"/></svg>');
+        background-repeat: no-repeat;
+        background-position: right 0.5rem center;
+        background-size: 1rem 1rem;
+        padding-right: 1.5rem;
     }
 
     .shadow-even {

studio/src/bananagl/picking/triangles/build.ts

@@ -1,7 +1,7 @@
 import { Attribute } from '@bananagl/bananagl';
 
 import { BVHNode } from '../bvh';
-import BuilderWorker from './build.worker?worker&inline';
+import BuilderWorker from './build.worker?worker';
 import {
     BuilderOutput,
     fromTransferable,

studio/src/components/Editor/Canvas/Help.tsx

@@ -5,6 +5,8 @@ import { TbHelp, TbHelpOff } from 'react-icons/tb';
 import { colorBase } from '@elements/Colors';
 import { MouseLeft, MouseRight, MouseWheel } from '@elements/Icons';
 
+import { useGrayscale } from '@shared/Context/hooks';
+
 function HelpItem(props: { children: React.ReactNode; last?: boolean }) {
     return (
         <div className={clsx('flex flex-col  pr-2', !props.last && ' border-r')}>
@@ -15,13 +17,15 @@ function HelpItem(props: { children: React.ReactNode; last?: boolean }) {
 
 export function Help() {
     const [show, setShow] = React.useState(false);
+    const [grayscale] = useGrayscale();
 
     if (!show)
         return (
             <div
                 className={clsx(
                     'absolute bottom-4 left-4 bg-white text-md py-2 px-4 rounded-md flex flex-row space-x-4 text-xl cursor-pointer border',
-                    colorBase
+                    colorBase,
+                    grayscale && 'filter grayscale'
                 )}
                 onClick={() => setShow(true)}
             >

studio/src/components/Editor/Editor.tsx

@@ -6,7 +6,6 @@ import { SizeGuard } from '@elements/SizeGuard';
 
 import { CanvasComponent } from '@shared/CanvasComponent';
 import { Controls } from '@shared/Controls';
-import { StyleDetailPanel } from '@shared/StyleDetail';
 
 import { Help } from './Canvas/Help';
 import { EditorSpash } from './EditorSplash';
@@ -17,19 +16,14 @@ export function ModelEditor() {
         <SizeGuard minWidth={600} minHeight={400}>
             <div className="w-full h-full">
                 <Allotment separator={false}>
+                    <Allotment.Pane preferredSize={500} className="border-r border-neutral-200">
+                        <SidePanel />
+                    </Allotment.Pane>
                     <Allotment.Pane minSize={200} className="bg-neutral-100">
                         <CanvasComponent />
                         <Help />
-                        <StyleDetailPanel className="absolute right-0 bottom-0 m-4" />
                         <Controls />
                     </Allotment.Pane>
-                    <Allotment.Pane
-                        minSize={500}
-                        preferredSize={500}
-                        className="border-l border-neutral-200"
-                    >
-                        <SidePanel />
-                    </Allotment.Pane>
                 </Allotment>
             </div>
             <ProcessingScreen />

studio/src/components/Editor/EditorContext.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 
-import { GroupNode, Node, Tables } from '@utils/utils';
-
-import { useGraph } from '@shared/Context/hooks';
+import { Tables } from '@utils/utils';
 
 interface EditorContextProps {
-    nodeToMove: Node | undefined;
-    setNodeToMove: React.Dispatch<React.SetStateAction<Node | undefined>>;
-    nodeToEdit: Node | undefined;
-    setNodeToEdit: React.Dispatch<React.SetStateAction<Node | undefined>>;
     tables: Tables;
     setTables: React.Dispatch<React.SetStateAction<Tables>>;
     activeSheet: number;
@@ -20,19 +14,13 @@ interface EditorContextProps {
 const context = React.createContext<EditorContextProps>({} as EditorContextProps);
 
 export function EditorContext(props: { children: React.ReactNode }) {
-    const [nodeToMove, setNodeToMove] = React.useState<Node | undefined>();
-    const [nodeToEdit, setNodeToEdit] = React.useState<Node | undefined>();
     const [tables, setTables] = React.useState<Tables>(new Tables([]));
     const [activeSheet, setActiveSheet] = React.useState<number>(0);
     const [status, setStatus] = React.useState<'editing' | 'saved' | 'failed' | undefined>();
 
     return (
         <context.Provider
             value={{
-                nodeToMove,
-                setNodeToMove,
-                nodeToEdit,
-                setNodeToEdit,
                 tables,
                 setTables,
                 activeSheet,
@@ -50,47 +38,6 @@ export function useTablesContext(): EditorContextProps {
     return React.useContext(context);
 }
 
-export function useMovingNode(): [Node | undefined, (node: Node | undefined) => void] {
-    const ctx = React.useContext(context);
-    const [graph] = useGraph();
-
-    const updateNodeToMove = (node: Node | undefined) => {
-        ctx.setNodeToMove((prev) => {
-            if (prev === node) return undefined;
-            if (prev === undefined) return node;
-            if (node === undefined) return undefined;
-            else {
-                if (node instanceof GroupNode) {
-                    if (node.isDescendantOf(prev)) return undefined;
-                    graph.moveNode(prev, node);
-                    return undefined;
-                } else {
-                    //fallback
-                    return node;
-                }
-            }
-        });
-    };
-
-    return [ctx.nodeToMove, updateNodeToMove];
-}
-
-export function useEditingNode(): [Node | undefined, (node: Node | undefined) => void] {
-    const ctx = React.useContext(context);
-
-    const updateNodeToLink = (node: Node | undefined) => {
-        ctx.setNodeToEdit((prev) => {
-            if (prev === node || node === undefined) {
-                return undefined;
-            } else {
-                return node;
-            }
-        });
-    };
-
-    return [ctx.nodeToEdit, updateNodeToLink];
-}
-
 export function useTables(): [Tables, React.Dispatch<React.SetStateAction<Tables>>] {
     const ctx = React.useContext(context);
     return [ctx.tables, ctx.setTables];