Actions annotations

.gitignore

@@ -13,6 +13,8 @@ docs/node_modules
 yarn.lock
 yarn-error.log
 lerna-debug.log
+.yarn/
+.pnp*
 
 # generated files
 covfee/shared/schemata.json
@@ -40,3 +42,5 @@ samples/conflab/media/*
 samples/memory/media/*
 samples/memory/media.zip
 
+# FIXME: #CONFLAB ignore the deployment files that now live in the private gitlab repo
+samples/continuous_annotation/*

README.md

@@ -2,32 +2,11 @@
 
 Covfee was created to provide an easily extensible tool for video perception and annotation experiments, especially those requiring continuous feedback from the user.
 
-Full documentation: [covfee docs](https://josedvq.github.io/covfee/)
+Full documentation: [covfee docs](https://tudelft-spc-lab.github.io)
 
 ## Quick start
 
-This document contains instructions for installing covfee locally. We recommend that you work with covfee locally first even if you plan to put it online.
-
-### Setup
-
-1. Install version 12.x of [node.js](https://nodejs.org/en/download/). Make sure that the `npm` command is available in your terminal.
-
-2. Clone this repository and install covfee using pip:
-
-```
-git clone git@github.com:josedvq/covfee.git
-cd covfee
-python3 -m pip install -e .
-```
-
-3. Install Javascript dependencies:
-```
-covfee-installjs
-```
-
-### Getting started
-
-Please see the [covfee docs](https://master--5faeef49f6655f00210dbf35.chromatic.com) for an interactive getting started guide.
-
-## Changing covfee
-If you wish to change the source code of the backend or make changes to the frontend that are not supported by a custom task, see the [Development guide](docs/development.md).
+1. Follow the [installation instructions](https://tudelft-spc-lab.github.io/covfee/docs/development).
+2. Navigate in your terminal to the `samples/tutorial` folder.
+3. Follow the import the task [steps](https://tudelft-spc-lab.github.io/covfee/docs/custom_task#importing-the-task).
+3. Follow the running the task [steps](https://tudelft-spc-lab.github.io/covfee/docs/custom_task#running-the-task).

covfee/cli/commands/dev.py

@@ -2,6 +2,7 @@
 
 These commands meant as development tools only
 """
+
 import os
 import click
 
@@ -41,3 +42,25 @@ def make_schemata():
         schema.make()
         schema.make_dataclasses()
         spinner.succeed("Schemata made.")
+
+
+if __name__ == "__main__":
+    import sys
+
+    # The following code is intended to run a specific covfee command, such as "build"
+    # from the command line, so it is configurable with a debugger (like in VSCode).
+    # For example, running `python dev.py --debug-covfee-command build <args>`
+    DEBUG_COMMAND: str = "--debug-covfee-command"
+    if DEBUG_COMMAND in sys.argv:
+        debug_command_index = sys.argv.index(DEBUG_COMMAND) + 1
+        if debug_command_index < len(sys.argv):
+            debug_command = sys.argv[debug_command_index]
+            # Note: covfee uses "click" to parse command line parameters. We remove
+            #       DEBUG_COMMAND, which is not recognized by either of the available
+            #       covfee functions.
+            sys.argv.pop(debug_command_index)
+            sys.argv.remove(DEBUG_COMMAND)
+            if debug_command == "schemata":
+                make_schemata()
+            elif debug_command == "build":
+                build_master()

covfee/cli/commands/launch.py

@@ -17,7 +17,8 @@
 from covfee.launcher import Launcher, ProjectExistsException, launch_webpack
 from covfee.shared.validator.validation_errors import JavascriptError, ValidationError
 
-from ...loader import Loader
+from covfee.loader import Loader
+import sys
 
 colorama_init()
 
@@ -97,7 +98,15 @@ def get_start_message(url):
     "--no-launch", is_flag=True, help="Do not launch covfee, only make the DB"
 )
 @click.argument("project_spec_file")
-def make(force, dev, deploy, safe, rms, no_launch, project_spec_file):
+def make(
+    force: bool,
+    dev: bool,
+    deploy: bool,
+    safe: bool,
+    rms: bool,
+    no_launch: bool,
+    project_spec_file: str,
+):
     mode = "local"
     if dev:
         mode = "dev"
@@ -109,13 +118,19 @@ def make(force, dev, deploy, safe, rms, no_launch, project_spec_file):
     install_npm_packages()
 
     try:
+        # 1. Parse the project spec file into a format that covfee can manage (CovfeeApp)
         loader = Loader(project_spec_file)
-        projects = loader.process(with_spinner=True)
+        covfee_app = loader.load_project_spec_file_and_parse_as_covfee_app(
+            with_spinner=True
+        )
 
+        # 2. Create or update the database
         launcher = Launcher(
-            mode, projects, Path(project_spec_file).parent, auth_enabled=not unsafe
+            mode, covfee_app, Path(project_spec_file).parent, auth_enabled=not unsafe
         )
-        launcher.make_database(force, with_spinner=True)
+        launcher.create_or_update_database(delete_existing_data=force)
+
+        # 3. Launch the app based on the current data/configuration.
         if not no_launch:
             print(
                 get_start_message(
@@ -179,3 +194,21 @@ def install_npm_packages(force=False):
     npm_package = NPMPackage(shared_path)
     if force or not npm_package.is_installed():
         npm_package.install()
+
+
+if __name__ == "__main__":
+
+    # The following code is intended to run a specific covfee command, such as "make"
+    # from the command line, so it is configurable with a debugger (like in VSCode).
+    # For example, running `python launch.py --debug-covfee-command make <args>`
+    DEBUG_COMMAND: str = "--debug-covfee-command"
+    if DEBUG_COMMAND in sys.argv:
+        debug_command_index = sys.argv.index(DEBUG_COMMAND) + 1
+        if debug_command_index < len(sys.argv):
+            debug_command = sys.argv[debug_command_index]
+            # Note: covfee uses "click" to parse command line parameters. We remove
+            #       DEBUG_COMMAND, which is not recognized by either of the available
+            #       covfee functions.
+            sys.argv.pop(debug_command_index)
+            sys.argv.remove(DEBUG_COMMAND)
+            globals()[debug_command]()

covfee/client/admin/force_graph.tsx

@@ -1,10 +1,10 @@
-import * as React from "react"
+import type { SimulationNodeDatum } from "d3"
 import * as d3 from "d3"
-import type { SimulationNodeDatum, Simulation } from "d3"
-import { NodeStatusToColor, getNodeStatus } from "./utils"
-import { NodeType } from "../types/node"
+import * as React from "react"
+import { ReducedJourney } from "../models/Journey"
 import { HitInstanceType } from "../types/hit"
-import { JourneyType, ReducedJourney } from "../models/Journey"
+import { NodeType } from "../types/node"
+import { NodeStatusToColor, getNodeStatus } from "./utils"
 
 const getDimensions = (nodes: SimulationNode[], nodeRadius: number) => {
   let minX = Infinity,
@@ -22,12 +22,18 @@ const getDimensions = (nodes: SimulationNode[], nodeRadius: number) => {
 }
 
 const createNodes = (nodes: NodeType[], focusedNode: number) => {
-  const res = nodes.map((n, index) => ({
-    id: n.id,
-    name: n.name,
-    focused: focusedNode == index,
-    color: NodeStatusToColor[getNodeStatus(n)],
-  }))
+  const res = nodes.map((n, index) => {
+    let name = n.name
+    if (n.progress !== null && n.progress !== undefined) {
+      name += ` (${n.progress.toFixed(1)}%)`
+    }
+    return {
+      id: n.id,
+      name: name,
+      focused: focusedNode === index,
+      color: NodeStatusToColor[getNodeStatus(n)],
+    }
+  })
 
   return res
 }
@@ -118,6 +124,9 @@ export const ForceGraph = ({
       .attr("stroke-opacity", ({ index }) =>
         nodes[index].focused ? "0.1" : "0.01"
       )
+    nodesRefs.current
+      .selectChildren("text")
+      .text(({ index }) => nodes[index].name)
   }
 
   React.useEffect(() => {
@@ -256,6 +265,7 @@ export const ForceGraph = ({
         .attr("fill", "#000")
         .attr("stroke", "#fff")
         .attr("stroke-width", "5px")
+        .attr("text-anchor", "middle")
         .attr("x", (d) => d.x)
         .attr("y", (d) => d.y)
         .text(({ index }) => nodes[index].name)

covfee/client/admin/hit_block/hit_block.tsx

@@ -1,10 +1,12 @@
 import * as React from "react"
 import styled from "styled-components"
 
-import { HitInstanceType } from "../../types/hit"
-import { NodeStatus } from "../../types/node"
 import { NodeIndexOutlined } from "@ant-design/icons"
+import classNames from "classnames"
 import { appContext } from "../../app_context"
+import { HitInstanceType } from "../../types/hit"
+import { NodeStatus, NodeType } from "../../types/node"
+import { ForceGraph } from "../force_graph"
 import {
   JourneyColorStatus,
   JourneyColorStatuses,
@@ -16,13 +18,10 @@ import {
   getJourneyStatus,
   getNodeStatus,
 } from "../utils"
-import classNames from "classnames"
-import { ForceGraph } from "../force_graph"
+import { JourneyRow } from "./journey_buttons"
 import { NodeButtons, NodeRow } from "./node_buttons"
-import { HoveringButtons } from "./utils"
 import type { HoveringButtonsArgs } from "./utils"
-import { JourneyRow } from "./journey_buttons"
-
+import { HoveringButtons } from "./utils"
 interface Props {
   hit: HitInstanceType
 }
@@ -130,7 +129,14 @@ export const HitBlock = (props: Props) => {
       </Header>
       {!collapsed && (
         <div style={{ display: "flex", flexDirection: "row" }}>
-          <div style={{ display: "flex", alignItems: "center", width: "60%" }}>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              width: "60%",
+            }}
+          >
             <NodesList>
               <h2>Nodes</h2>
 
@@ -177,8 +183,16 @@ export const HitBlock = (props: Props) => {
 
               <ul>
                 {props.hit.journeys.map((journey, index) => {
+                  let journeyNodes: NodeType[] = []
+                  for (const node_id of journey.nodes) {
+                    journeyNodes.push(
+                      props.hit.nodes.find((node) => node.id === node_id)
+                    )
+                  }
+
                   return (
                     <JourneyRow
+                      journeyNodes={journeyNodes}
                       key={index}
                       focus={focusedJourney == index}
                       onFocus={() => {
@@ -244,9 +258,12 @@ const JourneyStatusSummary = NodeStatusSummary
 const GraphContainer = styled.div`
   flex: 1 0 auto;
   max-width: 60%;
+  /* FIXME #CONFLAB: Hiding the GraphContainer because it takes too much space */
+  visibility: hidden;
+  width: 0px;
+  height: 0px;
 `
 const NodesList = styled.div`
-  max-width: 50%;
   flex: 1 0 auto;
   padding: 3px;