Gamification element skillets #1

Siluky · Mar 14, 2022 · 7acff13 · 7acff13
1 parent 8f11b25
commit 7acff13
Show file tree

Hide file tree

Showing 53 changed files with 569 additions and 25 deletions.
diff --git a/cvat-ui/src/actions/settings-actions.ts b/cvat-ui/src/actions/settings-actions.ts
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/assets/badge-grey-icon.svg b/cvat-ui/src/assets/badge-grey-icon.svg
diff --git a/cvat-ui/src/assets/badge-icon.svg b/cvat-ui/src/assets/badge-icon.svg
diff --git a/...ribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx b/...ribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/...i/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx b/...i/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -19,6 +19,8 @@ import { adjustContextImagePosition } from 'components/annotation-page/standard-
 import { collapseSidebar as collapseSidebarAction } from 'actions/annotation-actions';
 import AppearanceBlock from 'components/annotation-page/appearance-block';
 import IssuesListComponent from 'components/annotation-page/standard-workspace/objects-side-bar/issues-list';
+import ChallengeList from 'components/gamification/challenges/challengelist-component';
+import StatisticsList from 'components/gamification/statistics/statisticslist-component';
 
 interface OwnProps {
     objectsList: JSX.Element;
@@ -116,6 +118,12 @@ function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.E
                         <IssuesListComponent />
                     </Tabs.TabPane>
                 ) : null}
+                <Tabs.TabPane tab={<Text strong>Challenges</Text>} key='challenges'>
+                    <ChallengeList />
+                </Tabs.TabPane>
+                <Tabs.TabPane tab={<Text strong>Statistics</Text>} key='statistics'>
+                    <StatisticsList />
+                </Tabs.TabPane>
             </Tabs>
 
             {!sidebarCollapsed && <AppearanceBlock />}

diff --git a/cvat-ui/src/components/annotation-page/styles.scss b/cvat-ui/src/components/annotation-page/styles.scss
@@ -509,3 +509,14 @@ button.cvat-predictor-button {
         }
     }
 }
+
+.cvat-annotation-header-quick-statistics {
+    display: flex;
+
+    > div {
+        display: flex;
+        // height: 48px;
+        align-items: center;
+    }
+}
+
diff --git a/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx b/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/annotation-page/top-bar/quick-statistics.tsx b/cvat-ui/src/components/annotation-page/top-bar/quick-statistics.tsx
@@ -0,0 +1,32 @@
+// Copyright (C) 2022 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+import React from 'react';
+import { Row, Col } from 'antd/lib/grid';
+import QuickStatistic from 'components/gamification/statistics/quick-statistics-component';
+import ProgressBar from 'components/gamification/progressbar-component';
+
+function QuickStatisticsPanel(): JSX.Element {
+    return (
+        <div className='cvat-annotation-header-quick-statistics'>
+            <Row>
+                <Col span={8}>
+                    <QuickStatistic id={1} />
+                </Col>
+                <Col span={8}>
+                    <QuickStatistic id={2} />
+                </Col>
+                <Col span={8}>
+                    <QuickStatistic id={3} />
+                </Col>
+            </Row>
+            <Row>
+                <Col span={24}>
+                    <ProgressBar />
+                </Col>
+            </Row>
+        </div>
+    );
+}
+// TODO: include React.memo where appropriate
+export default React.memo(QuickStatisticsPanel);
diff --git a/cvat-ui/src/components/annotation-page/top-bar/right-group.tsx b/cvat-ui/src/components/annotation-page/top-bar/right-group.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -13,6 +13,7 @@ import LeftGroup from './left-group';
 import PlayerButtons from './player-buttons';
 import PlayerNavigation from './player-navigation';
 import RightGroup from './right-group';
+import QuickStatisticsPanel from './quick-statistics';
 
 interface Props {
     playing: boolean;
@@ -175,6 +176,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
                     />
                 </Row>
             </Col>
+            <QuickStatisticsPanel />
             <RightGroup
                 predictor={predictor}
                 workspace={workspace}

diff --git a/cvat-ui/src/components/common/cvat-tooltip.tsx b/cvat-ui/src/components/common/cvat-tooltip.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx b/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/create-task-page/basic-configuration-form.tsx b/cvat-ui/src/components/create-task-page/basic-configuration-form.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/create-task-page/create-task-content.tsx b/cvat-ui/src/components/create-task-page/create-task-content.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/create-task-page/create-task-page.tsx b/cvat-ui/src/components/create-task-page/create-task-page.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/create-task-page/project-search-field.tsx b/cvat-ui/src/components/create-task-page/project-search-field.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/create-task-page/project-subset-field.tsx b/cvat-ui/src/components/create-task-page/project-subset-field.tsx
@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 

diff --git a/cvat-ui/src/components/create-task-page/styles.scss b/cvat-ui/src/components/create-task-page/styles.scss
@@ -1,3 +1,7 @@
+// Copyright (C) 2022 Intel Corporation
+// 
+// SPDX-License-Identifier: MIT
+
 // Copyright (C) 2020 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

diff --git a/cvat-ui/src/components/gamification/badges/badge-details.tsx b/cvat-ui/src/components/gamification/badges/badge-details.tsx
@@ -0,0 +1,11 @@
+// Copyright (C) 2022 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+import '../gamif-styles.scss';
+import React from 'react';
+
+export default function BadgeDetails(): JSX.Element {
+    return (
+        <>Badge Details</>
+    );
+}
diff --git a/cvat-ui/src/components/gamification/badges/badge-overview.tsx b/cvat-ui/src/components/gamification/badges/badge-overview.tsx
@@ -0,0 +1,108 @@
+// Copyright (C) 2022 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+import '../gamif-styles.scss';
+import React from 'react';
+import { BadgeIcon, BadgeGreyIcon } from 'icons';
+import {
+    Row,
+    Col,
+    Progress,
+    Button,
+    Tabs,
+} from 'antd';
+
+type Badge = {
+    title: string;
+    instruction: string;
+    progress: number;
+    goal: number;
+    goalunit: string;
+    got: boolean;
+};
+
+interface Props {
+    // visible: boolean;
+    allBadges: Badge[];
+    currentBadge?: Badge;
+}
+
+const showBadges = (badges: Badge[]): JSX.Element => (
+    <Row>
+        {badges.map((badge: Badge) => (
+            <Col span={4}>
+                <Button
+                    icon={badge.got ? <BadgeIcon /> : <BadgeGreyIcon />}
+                    onClick={(): void => {
+                        // TODO: Change selectedBadge through reducer
+                    }}
+                />
+            </Col>
+        ))}
+    </Row>
+);
+
+const showSelectedBadge = (badge: Badge): JSX.Element => (
+    <>
+        <div className='gamif-badge-icon'>
+            {badge.got ? <BadgeIcon /> : <BadgeGreyIcon />}
+        </div>
+        <div className='gamif-badge-details'>
+            <strong>{badge.title}</strong>
+            {badge.instruction}
+            <Progress percent={badge.progress / badge.goal} />
+            {`Current Progress: ${badge.progress} / ${badge.goal} ${badge.goalunit}`}
+        </div>
+    </>
+);
+
+export default function BadgeOverview(props: Props): JSX.Element {
+    let { allBadges, currentBadge } = props;
+    const badge1: Badge = {
+        title: 'Badge 1',
+        instruction: 'Annotate 5 livers',
+        progress: 5,
+        goal: 5,
+        goalunit: 'Livers',
+        got: true,
+    };
+    const badge2: Badge = {
+        title: 'Badge 2',
+        instruction: 'Annotate ten images',
+        progress: 1,
+        goal: 10,
+        goalunit: 'Images',
+        got: false,
+    };
+
+    allBadges = [badge1, badge2];
+    currentBadge = badge1;
+
+    return (
+        <Tabs type='card' defaultActiveKey='1' className='badge-overview-tabs'>
+            <Tabs.TabPane tab='Permanent Badges' key='1'>
+                <div className='gamif-badge-overview-container'>
+                    <div className='gamif-badge-overview-header' />
+                    <div className='gamif-badge-overview-content'>
+                        {showBadges(allBadges)}
+                    </div>
+                    <div className='gamif-badge-detail-view'>
+                        {showSelectedBadge(currentBadge)}
+                    </div>
+                </div>
+            </Tabs.TabPane>
+            { /* TODO: Refactor */}
+            <Tabs.TabPane tab='Seasonal Badges' key='2'>
+                <div className='gamif-badge-overview-container'>
+                    <div className='gamif-badge-overview-header' />
+                    <div className='gamif-badge-overview-content'>
+                        {showBadges(allBadges)}
+                    </div>
+                    <div className='gamif-badge-detail-view'>
+                        {showSelectedBadge(currentBadge)}
+                    </div>
+                </div>
+            </Tabs.TabPane>
+        </Tabs>
+    );
+}
diff --git a/cvat-ui/src/components/gamification/badges/badgeprofile.tsx b/cvat-ui/src/components/gamification/badges/badgeprofile.tsx
@@ -0,0 +1,16 @@
+// Copyright (C) 2022 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+import React from 'react';
+import BadgeOverview from './badge-overview';
+import BadgeDetails from './badge-details';
+
+export default function BadgeProfile(): JSX.Element {
+    return (
+        <div style={{ width: 300, height: 300 }}>
+            {/* TODO: Seasonal/Permanent Badge Tabs */}
+            <BadgeOverview />
+            <BadgeDetails />
+        </div>
+    );
+}
diff --git a/cvat-ui/src/components/gamification/challenges/challenge-component.tsx b/cvat-ui/src/components/gamification/challenges/challenge-component.tsx
@@ -0,0 +1,18 @@
+// Copyright (C) 2022 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+
+interface Props {
+    id: number;
+}
+
+export default function Challenge(props: Props): JSX.Element {
+    const x = props;
+    return (
+        <div>
+            {`Cool Challenge ${x.id}`}
+        </div>
+    );
+}
diff --git a/cvat-ui/src/components/gamification/challenges/challengelist-component.tsx b/cvat-ui/src/components/gamification/challenges/challengelist-component.tsx
@@ -0,0 +1,23 @@
+// Copyright (C) 2022 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import { Row } from 'antd';
+import Challenge from './challenge-component';
+
+export default function ChallengeList(): JSX.Element {
+    return (
+        <>
+            <Row>
+                <Challenge id={1} />
+            </Row>
+            <Row>
+                <Challenge id={2} />
+            </Row>
+            <Row>
+                <Challenge id={3} />
+            </Row>
+        </>
+    );
+}