Giter Club home page Giter Club logo

flyt's Introduction

Flyt - (aka VSM/Value Stream Mapping)

Flyt canvas (13) - Process feedback on 'Flyt'  - Wednesday, September 15, 2021

Links

Background

Mission statement: Empower everyone on all levels to improve the way we work - process by process

Tech stack / Features

Comment
Library This is a React project
Package manager We use the Yarn -package-manager. To get started, run yarn && yarn start
Navigation NextJS
State management EasyPeasy persisted global store
Canvas tools We heavily rely on canvas and use PixiJS to ease development.
Testing TODO: Testing-Library
Code-Style We use ESLint together with Prettier for linting and enforcing a consistent code-style.
Authentication @azure/msal-react
Styling Sass
Templates

Developing

To get up and running: yarn && yarn use-dev

Running different environments locally

Env. command
Dev yarn use-dev
Test yarn use-test
QA yarn use-qa
PROD yarn use-prod

What it does

For example: running yarn use-dev replaces the root .env file with environment-variables/DEV.env, then it runs yarn dev.

Branching and deploying stuff

We use a simple branching structure. Instead of having a master and develop branch we just use one main-branch.

The main-branch contains the latest changes.

We use a "sliding tag" for each environment... Tag something DEV, TEST, QA or PROD, and it should trigger a new build and release. This gets rid of the "empty Pull requests" for releases, which is something we would have if we do a PR into Master from Develop. Also, this gives us more flexibility to release from another branch if we need to do that for some reason.

I've added a simple script to automate this: For example; Run yarn release-dev to tag DEV and push tags to GitHub.

NOTE: This script need to be updated to accomadate for multiple people updating the tags. Until then, try to update the tag and push it manually. Read more about git tags.

Environment Release script Deploy status URL Who should test what? Comments
DEV Run yarn release-dev DEV environment build status in Radix https://web-vsm-dev.radix.equinor.com/ Developer Developer is free to use this environment however they want to
TEST Run yarn release-test TEST environment build status in Radix https://web-vsm-test.radix.equinor.com/ Internal testing Developer tags what needs to be tested for QA-tester in the team
QA Run yarn release-qa QA environment build status in Radix https://web-vsm-qa.radix.equinor.com/ "Product Owner" or Customer When said feature is ready, it gets released into QA so our PO can give feedback
PROD Run yarn release-prod PROD environment build status in Radix https://web-vsm-prod.radix.equinor.com/ End-users We wait with deploying to prod until everyone is happy

Note: When running yarn release-<environment> we are starting a new build in Radix. If we already have a working build and want to release it to another environment, we may "promote" it to a different environment via the Radix-console.

Docker

# Building image
docker build -t equinor-flyt .

# Running image
## Dev
docker run -p 3000:3000 --env-file ./environment-variables/DEV.env equinor-flyt
## Test
docker run -p 3000:3000 --env-file ./environment-variables/TEST.env equinor-flyt
## QA
docker run -p 3000:3000 --env-file ./environment-variables/QA.env equinor-flyt
## Prod
docker run -p 3000:3000 --env-file ./environment-variables/PROD.env equinor-flyt

Runtime environment variables

When using NEXT.JS, the environment variables need to be set when building the image and not at runtime.

Generally you'll want to use build-time environment variables to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with Automatic Static Optimization.

Read more ...

To work-around this we are disabling "automatic static optimization" at our root level. Adding this to _app.tsx:

MyApp.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps };
};

Which disables "automatic static optimization" for all our pages. Read more ...

Pixi js Canvas

Making space for stuff

Put every Main activity and all it's children inside a container. That container width can be used to figure out the distance to the next Main Activity etc...

Defining a process

A vsm/flyt/process consists of a set of entities.

An entity can be of the following types:

  • MainActivity
  • SubActivity
  • Choice
  • Waiting

Structure of an entity

{
  id: "",
  type: "MainActivity",
  text: "",
  roles: [],
  duration: 0,
  problems: [],
  ideas: [],
  solutions: [],
  parentId: "",
}

Semantic Commit Messages

Copied from https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

feat: add hat wobble
^--^  ^------------^
|     |
|     +-> Summary in present tense.
|
+-------> Type: chore, docs, feat, fix, refactor, style, or test.

More Examples:

  • feat: (new feature for the user, not a new feature for build script)
  • fix: (bug fix for the user, not a fix to a build script)
  • docs: (changes to the documentation)
  • style: (formatting, missing semi colons, etc; no production code change)
  • refactor: (refactoring production code, eg. renaming a variable)
  • test: (adding missing tests, refactoring tests; no production code change)
  • chore: (updating grunt tasks etc; no production code change)

References:

flyt's People

Contributors

dansvend avatar dependabot[bot] avatar martabenthem avatar nesadrian avatar ofredstie avatar sjoenh avatar snyk-bot avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

bellout

flyt's Issues

Process hierarchy

User story
As a user I want to have parent-child relations between processes so that I can see one process in relation with others. Sub-process in a different colour.. link between mother and daughter

User input 1 (by Hege Fonneland - SharePoint ID53)
Hi, I would like to have the opportunity to also create another sipoc within the same window. To be able to do that I need to be able to create another row and then to create green notes. The need of this was discovered when working on amap process. I would be good to visualise the main process and then create sipoc for each of the main steps - within the same window. This to have a more detailed approach to who is the suppliers in each step and what output and customer that are relevant for each step of the main phase.

User input 2 (by Fredrik Liknes - SharePoint ID91)
Some work processes are rather large and it is not suitable to do all stages in one VSM. One way of doing this is to state that it is a selected sub-process that is evaluated. Another option could be to have a main process where you link in new sub-processes along the way (introducing a new button for navigation between VSMs).

User input 3 (by Hanne Schøld Helgestad - SharePoint ID133)
Option to add phases as one level of lower granularity than the main activities to more easily get the bigger picture overview of the process which will be very useful when you map long and complex processes.

Describe the solution you'd like

  • New type of card (new colour) in a parent process: LInked child process
  • New type of card in the child process: The parent process to be shown on top
  • Overview of linked processes: Se på hvordan Miro templaten i link swimlane. hvert kort=1prosess (https://miro.com/miroverse/cross-functional-swimlane-chart/)

Improved P, Q, I buttons

User input (17)
When adding a problem, question or idea to an activity, the dropdown list is an unecessary extra click. A better option would maybe to be presented with three coloured circles with a + sign on it (for new p, q, i) and a list of existing P, Q, I represented as circles with "P1", "Q2" labels etc. Hover-over existing will show the text.

User input (26)
Under Sub-activity and Choice for QIP (questions Ideas Problems etc) I suggest that the word "choice" is included in the blank box so that user understands that they have a drop down menu - I started writing something into the box first.

Sharepoint ID(s) (if feedback)
17, 26

User story
As an end user I want to simplify how problems, questions and ideas are visualised so that I use less time and get better overview.

Describe the solution you'd like
image

Improve 'duplicate VSM' feature

User input 1 (by Elisabeth Siem - Sharepoint ID113):
We have duplicated a VSM and roles and time are not copied over. Is there a reason for this? Or could this feature be added?

User input 2 (by Lise Storhaug Ekeland, Geir Lea Berge, Henriette Eidsnes):
Brukes dupliserings knappen – tar ikke med roller og problem/ideer automatisk. Kun tittel felt som blir kopiert. Alt det det andre må inn påny

Possible solution:
When clicking the duplicate button the following dialogue box should appear with choices of what to include in copy

  • Problems
  • Questions
  • Ideas
  • Write access/sharing rights
  • To-be process
  • Categories
  • Roles (from #323)
  • Durations (from #323)

Default: all above are unchecked

Evaluate if renaming should be done in duplicate dialogue box together with above choices.

FrontPage design update | Improve discoverability

image
https://www.figma.com/file/IkHwmIQrsT0iR34f5R5UnZ/VSM?node-id=2552%3A89145

Allow users to search and filter VSMs by text or keywords
Legacy Jira card: VSM-107

Back-end tasks:

  • ❤️ Fave & un-fave a VSM
  • Project listing includes field "isFavorite"
  • Get my favorite VSMs (filter option to include only favorites in listing)
  • Remember to filter away other people's VSMs with no name (string.IsNullOrWhitespace()). (Need to be done in backend for pagination to be correct)
  • Sort VSMs by Last Modified, Alphabetically and by Last created
  • Remember to support pagination for all results
  • Search for VSM based on name & users
  • Finne årsaker til dobbel insert av UserName.

Swagger: https://vsm-api-dev.azurewebsites.net/swagger/index.html

Front-end tasks:

  • Implement new design (all projects, my projects and my favorites pages)
  • ❤️ Fave & un-fave a VSM
  • Search for VSM based on name & users
  • Sort VSMs by Last Modified, Alphabetically and by Last created
  • Remember to support pagination for all results
  • #207

Versioning

User input
In addition to general metadata, also a version history with author would be useful (when sharing function with edit is available).

Sharepoint ID(s)
31

User story
As an end-user I want to keep track of all changes and possibly being able to roll-back to earlier versions to be able to understand history and secure understanding for where we are today and why (continuous improvement).


image

Back-end requirements

  • New route to retrieve the times when a project changed
  • New parameter to Project/GetById for "as of datetime x"
    - [ ] Any more routes that need to support "as of"? Potentially the vsmObject detail view... but we can manage without.

User Requirements (for testing)

Unless mentioned otherwise, any user can do the following:

Current

  • User can see the current version.
  • User (with edit-role) can edit a card in the current version.
  • User can see the details of any card in the current version.

Previous

  • User can see a list of all versions by clicking on the version icon (down right-hand corner). (versions are ordered by date and only one per day is shown)
  • User can switch between showing the changes grouped by Year, Month, Day, Hours, Minutes or Seconds (default to Days)
  • User can view a previous version.
  • User can view the details of any card in a previous version.
  • User can share the url of any version with others (copy from the url bar) and opening the url in a new tab will show that version, with the version view visible.
  • User cannot edit a card in a previous version. ( Drag'n drop interactions should be disabled, and sidebar view should be in read-only mode. )
  • Exiting the version view should return the user to the current version.
  • Current and To be processes should work the same as expected.

Text reverts back to old text or just doesn't save.

Bug with ID 61 reported at 23 June 2021 11:12:02 CEST

Text reverting to old text on a choice card
I am currently participating in meeting where project 92 is shown. The text in a choice card was updated. Ca 2 min later the text was reverted to old text - i.e. was saved, but not ?!??

VSM-152 + VSM-144

Display newlines in cards

Feedback ID32: In all post-it boxes, the text is visualized as one long paragraph. I would like to see the card with the same layout as my original input, including returns and spaces between paragraphs.

Add R to PQI's (R for Risk)

User input (if feedback)
HI, This is very good tool. I am using it for VSM process in the subactivity. you have problem, idea and questions.
We have some risks associated and would like to have it in the drop down menu. RISK
in addition, the dropdown menu is not intuitive, i started writing in that and then clicked save. nothing was saved.

Hope to see the possibility to choose risk in the subactivity.
Best Regards
Chetna Shukla

Sharepoint ID(s) (if feedback)
82

User story
As a user I want to add risks to process elements so that I can follow up risks

Todo:

  • API support - Add new taskType
  • Front-end implementation

Information/Tutorial for new features

Describe the solution you'd like
As a user I want to get a pop-up message (with update details) when opening flyt.equinor.com for the first time after a new feature release so that I know about new features I can use.

Only for major releases? Include bugs? Link to changelog?

Errors when adding time

When adding the number first and then the unit on a waiting Node, the number is not saved and thus not displayed in the canvas. This happens for all type of units except Minutes. When opening the sidebar again for a waiting node , the number OR the unit is displayed, not both. However, If I start with the unit instead of number it all works ok.

Finding relevant VSM's

User input (if feedback)
I wish to be able to filter out VSM's that are empty or "half done" so that it is easier to find VSM's where I can learn, get inspired and steal ideas

Sharepoint ID(s) (if feedback)
83

User story
As a user I wish to find VSM's where I can learn, get inspired and steal ideas

Describe the solution you'd like
to filter out VSM's that are empty or "half done" ?

Process labels

User story
As an end user, I want to tag a process with keywords so that I can look up all processes with a common keyword

Sharepoint ID
34, 76, 92

Describe the solution you'd like

  • Tags visible in overview (similar to Planner labels?)
  • Examples: Asset (Åsgard, Snorre etc), Process (Well construction, department meeting etc)
  • Examples: Project (Lean DPO)
  • Pre-defined vs free text? If free-text, propose existing similar if creating new
  • Project (list) - high potential - (#168 ) and Obsolete #173

Additional context
https://miro.com/app/board/o9J_lDp-Z84=/


Requirements (for @ntorsen to test)

Adding and removing labels on a process (Canvas)

  • Every user can create and read labels.
  • I can't add labels to a process I don't have write-access to.
  • When adding a label, it should suggest an existing one.

Filtering processes on labels (front-page)

  • It should be easy to find processes with a specific label.
  • Filter on one label
  • Filter on multiple labels. It should follow AND logic. That means all labels that is in the filter needs to be in a proccess for it to show.
  • When choosing labels to filter with, I should be able to search for a label.
  • The labels shown in the label-view should be clickable (toggle active-state) and indicate that it is selected.
  • It should be easy to set and clear my label-filter.
  • I should be able to bookmark the current page (URL) for a specific search.

Back-end

  • Create labels
  • Read labels
  • Get all labels (or a search endpoint?)
  • Update text of a label (Superuser only)
  • Delete an unlinked label (Superuser only)
  • Merge multiple labels into one (Superuser only)
  • Return LinkCount in label response.
  • Add label filter parameter to process listings.
  • Superuser should be able to administer labels for all processes
  • Filter Processes using AND logic (as explained above)

Front-end

Card stuck on cursor

Describe the bug
Sometimes when I want to add a blue main activity by dragging it, the template card in the left lower corner attach to my cursor and I'm not able to drop it off in the VSM. Finally, when I tend to rename the VSM, it leaves my cursor. I have done this several times (without wanting to rename) as a workaround.. Reg. Mona

Sharepoint ID
72

Pop-up dialogue when creating new VSM

As all roles (leaders, users etc) I want to find VSM's based on title, changing title should be mandatory when creating a new so that we don't get hoards of "Untitled VSM"'s. Evaluate how to handle naming of duplicates in same user story.

The process needs to be matured:

  • What if the user just wants to test the tool etc

Change share-text to "You need to be owner or admin to manage sharing"

When a user without priveleges opens the share popup screen; the following message appears: "You need to be creator or admin to manage sharing". There is no role with name "creator", should probably be "owner"? Meaning error message should be "You need to be owner or admin to manage sharing"

Add auth for socket-io endpoints

Server side, use thream/socketio-jwt: https://github.com/Thream/socketio-jwt
Something like this:

import { Server } from 'socket.io'
import { authorize } from '@thream/socketio-jwt'

const io = new Server(9000)
io.use(
  authorize({
    secret: 'your secret or public key'
  })
)

io.on('connection', async (socket) => {
  // jwt payload of the connected client
  console.log(socket.decodedToken)
  const clients = await io.sockets.allSockets()
  if (clients != null) {
    for (const clientId of clients) {
      const client = io.sockets.sockets.get(clientId)
      client?.emit('messages', { message: 'Success!' })
      // we can access the jwt payload of each connected client
      console.log(client?.decodedToken)
    }
  }
})

Client side, do something like this:

import { io } from 'socket.io-client'

// Require Bearer Token
const socket = io('http://localhost:9000', {
  auth: { token: `Bearer ${yourJWT}` }
})

// Handling token expiration
socket.on('connect_error', (error) => {
  if (error.data.type === 'UnauthorizedError') {
    console.log('User token has expired')
  }
})

// Listening to events
socket.on('messages', (data) => {
  console.log(data)
})

Send mail when adding new user to a VSM

The following was grabbed from this Jira issue: https://equinor-sds-si.atlassian.net/browse/VSM-150

From the VSM service, email the added user(s). Removed users will not receive a notification.

EMAIL:

Hi --NEW-USER--,
This is a notification informing you that --USER-- has added you as a --ROLE-- to the --VSM-TITLE-- value stream map located at the link below.
--LINK--

No response required.
Visit the VSM at vsm.equinor.com or flyt.equinor.com

Adding new cards sometimes does not work.

User input 1 (by Lise Storhaug Ekeland, Geir Lea Berge, Henriette Eidsnes):
Noen ganger – “umulig” å få til å flytte eksisterende  bokser (blå – gule). Eller finnes et eget triks/snet ?

User input x (by Karen-Maria Andersson?)

While assisting user in mapping ((projects/81) it was only possible for user to add new yellow cards under the blue card. The card was afterwards moved to bottom of the other yellow cards. I observed it more than once during mapping. However, I have not been able to replicate this issue myself in projects/105.

VSM-155

Make all text on green cards visible on canvas

User story
Several users map processes with a very long lists of suppliers, input, output and customers. Sometimes this is due to very complex process, sometimes just very bad and/or unclear process when these lists are long. In both cases seeing the entire list is valuable. Information in Green cards (Supplier, Input, Output, Customer) needs to be visible on canvas without additional clickings. If multiple Inputs and Outputs, it should also be possible to see which supplier supplies which input and which customers receive different outputs.

User input 1 (by Per Kulseth - SharePoint ID50)
Mulighet for flere grønne bokser eller ekspanderende grønne bokser i SIPOCen. Kan være mange leverandører og kunder

User input 2 (by Thorjan Knudsvik - SharePoint ID70)
Green cards (Supplier, Input, Output, Customer) should grow vertically when the content is more than what is visible.

User input 3 (by Mona Unneland - SharePoint ID85)
I would like to use this tool for an ongoing improvement project. Because we in this case have several suppliers, inputs, outputs and customers (green labels), we have to use Whiteboard instead. I hope this soon will be a possibility :-)

As of now, only the top of these lists are visible on the canvas.

Suggested solutions
a. automatically expanding green cards vertically to show all text
b. make it possible to add more green cards vertically

Side bar hides message that other user(s) made changes in VSM

Describe the bug
Side bar hides message that other user(s) made changes in VSM.

To Reproduce
Steps to reproduce the behavior:

  1. Two users open same VSM, both with write access
  2. add some cards
  3. User 1 opens side bar
  4. User 2 adds another card (or other change)

Expected behavior
Change message visible regardless of having side bar open

You don't see the updates in the side sheet when both users are editing the same thing. This may lead to overwriting other people's changes.

We support multiple users, adding and moving cards around in the canvas & the side sheet should also be automatically refreshed, as long as only one user have started editing what is currently selected.

Example: If both users start editing the same description of a card, they won't see the other person's edits and the latest to update will overwrite the other one.


What do we do when we have two people editing one card at the same time?
Right now; It's not too bad, it does update other users side sheets, but we get overwrite issues when someone is editing the same field.

How can we improve it?
In a perfect world, we would have proper support for editing simultaneously. Could be fun to test out.

If both users have the same card open at the same time. Sync the card state asap via websocket somehow.
How and when do we update the api? What happens with the changelog etc...

I'll think a bit about how we should approach this issue.

Ref #92 (comment)

Toolbox should only show when users have edit rights

The toolbox is showing for projects where you don’t have edit rights, and it should not.

Related: The tool tray will not be presented on an editable VSM if the user previously was viewing a read-only VSM. The tool tray should be visible in this condition.

Hide the sidebar if click on canvas

Feedback ID37: I would like to have the feature that if I have a card open (panel on the right to insert the text) that it closed when I click on the white screen again instead of using the cross.

Categorisation page (aka. Parking lot or Fishbone)

image

Link to design in Figma

Requirements (for testing)

Note: The scope is per process.

Things you should be able to do

  • Navigate into the category-page and back into the process
  • Add categories
  • Delete categories
  • Rename categories
  • Assign categories to PQIRs by dragging and dropping.
  • It is indicated that you can drop a category on a PQIR.
  • Remove categories from PQIRs
  • Filter the PQIRs by clicking on a category. (Filtering should use OR logic)
  • Further narrow down your filter of categories with the checkboxes on top. (AND logic. Only showing category types that are selected)
  • Both filter-methods should work together naturally.
  • Helper dialogues should show until you hide it.
  • Helper dialogues can be restored by from the settings screen.
    image

Things you shouldn't be able to do

Note: you should get user-feedback when encountering these...

  • You cannot delete a category that is assigned to a PQIR.
  • You cannot add a category with the same name as another.
  • You cannot rename a category to the same name as another.
  • You cannot assign a category more than once to a PQIR.

Front-end:

  • We need to have a good way of switching back and forth between the canvas and the parking lot. We don't think default should be to open a new window, but rather animate towards right/left to go into this page and vice versa.
  • When grabbing a category and hovering over a problem, the problem card should be highlighted (like they when mouse is hovering it without holding a category)
  • When filtering PQI's by clicking on categories, OR logic should be used, not AND
  • initial changes
  • Add [P] button to the canvas — Link to the categorization page
  • It should be quick and easy to get back to the canvas
  • Alert when trying to delete category that is assigned to a PIQ
  • Alert when creating new category with the same name as another
  • Alert when updating category with the same name as another
  • When creating a new category; move text-input to the + Add category button instead of in the new category itself
  • Fix bug: When scrolling in the category-page, the canvas scrolls as well... making us lose our place in the canvas. (ref #222 & relevant #221)

We need support in Back-end for categories. @Magos

  • Create Category
  • Change category name
  • Delete category
  • Link category to PQI - Categories can be added to multiple PQIs (Aka tasks)
  • Access → Owners, admins and contributors should all be able to manage categories for PQIs
  • Some Error code when renaming a category to the same name as another.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.